From 72c5aefe0ababf855a7ea637c797a08edf7e03f1 Mon Sep 17 00:00:00 2001 From: Abhijit Rakas Date: Thu, 27 Jun 2019 13:48:02 +0530 Subject: [PATCH] Add deprecation rule for showcase block --- blocks/build/build.js | 222 ++++++++++++++++++++++++++------------- blocks/showcase/index.js | 193 ++++++++++++++++++++++------------ 2 files changed, 270 insertions(+), 145 deletions(-) diff --git a/blocks/build/build.js b/blocks/build/build.js index 9a40a3c..bf3ab76 100755 --- a/blocks/build/build.js +++ b/blocks/build/build.js @@ -417,6 +417,86 @@ var __ = wp.i18n.__; var registerBlockType = wp.blocks.registerBlockType; +var attributes = { + + showCaseTitle: { + type: 'array', + field: { + type: 'rich-text', + className: 'showcase-title', + placeholder: __('Showcase Title'), + tagName: 'h3', + inlineToolbar: false + }, + selector: '.showcase-title', + source: 'children' + }, + + showCaseContent: { + type: 'array', + field: { + type: 'rich-text', + className: 'showcase-content', + placeholder: __('Showcase description'), + tagName: 'div', + multiline: 'p', + inlineToolbar: false + }, + selector: '.showcase-content', + source: 'children' + }, + + showCaseImage: { + type: 'object', + field: { + type: 'image', + buttonText: __('Upload'), + inputUrl: false, + imagePlaceholder: true, + removeButtonText: __('Remove') + } + }, + + showCaseLink: { + type: 'string', + field: { + type: 'link', + placement: 'inspector', + label: __('Showcase link') + } + } + +}; + +var edit = function edit(props, middleware) { + var showCaseLink = props.attributes.showCaseLink; + + + var className = props.className ? props.className : ''; + + return wp.element.createElement( + 'div', + { className: className + ' showcase-wrapper alignwide' }, + wp.element.createElement( + 'div', + { className: 'image-container' }, + middleware.fields.showCaseImage + ), + wp.element.createElement( + 'div', + { className: 'info-container' }, + middleware.inspectorControls, + middleware.fields.showCaseTitle, + middleware.fields.showCaseContent, + showCaseLink ? wp.element.createElement( + 'a', + { href: showCaseLink, title: __('Read More'), className: 'button secondary' }, + __('Read More') + ) : '' + ) + ); +}; + registerBlockType('rtgb/showcase', { title: __('Showcase'), @@ -424,87 +504,15 @@ registerBlockType('rtgb/showcase', { category: 'layout', description: __('Use for showcase'), - attributes: { - - showCaseTitle: { - type: 'array', - field: { - type: 'rich-text', - className: 'showcase-title', - placeholder: __('Showcase Title'), - tagName: 'h3', - inlineToolbar: false - }, - selector: '.showcase-title', - source: 'children' - }, - - showCaseContent: { - type: 'array', - field: { - type: 'rich-text', - className: 'showcase-content', - placeholder: __('Showcase description'), - tagName: 'div', - multiline: 'p', - inlineToolbar: false - }, - selector: '.showcase-content', - source: 'children' - }, - - showCaseImage: { - type: 'object', - field: { - type: 'image', - buttonText: __('Upload'), - inputUrl: false, - imagePlaceholder: true, - removeButtonText: __('Remove') - } - }, - - showCaseLink: { - type: 'string', - field: { - type: 'link', - placement: 'inspector', - label: __('Showcase link') - } - } - }, + attributes: attributes, getEditWrapperProps: function getEditWrapperProps() { return { 'data-align': 'wide' }; }, - edit: function edit(props, middleware) { - var showCaseLink = props.attributes.showCaseLink; - var className = props.className ? props.className : ''; + edit: edit, - return wp.element.createElement( - 'div', - { className: className + ' showcase-wrapper alignwide' }, - wp.element.createElement( - 'div', - { className: 'image-container' }, - middleware.fields.showCaseImage - ), - wp.element.createElement( - 'div', - { className: 'info-container' }, - middleware.inspectorControls, - middleware.fields.showCaseTitle, - middleware.fields.showCaseContent, - showCaseLink ? wp.element.createElement( - 'a', - { href: showCaseLink, title: __('Read More'), className: 'button secondary' }, - __('Read More') - ) : '' - ) - ); - }, save: function save(props) { var _props$attributes = props.attributes, showCaseImage = _props$attributes.showCaseImage, @@ -566,7 +574,71 @@ registerBlockType('rtgb/showcase', { ) : '' ) ); - } + }, + + + deprecated: [{ + attributes: attributes, + edit: edit, + save: function save(props) { + var _props$attributes2 = props.attributes, + showCaseImage = _props$attributes2.showCaseImage, + showCaseTitle = _props$attributes2.showCaseTitle, + showCaseContent = _props$attributes2.showCaseContent, + showCaseLink = _props$attributes2.showCaseLink; + + + var className = props.className ? props.className : ''; + var imageContent = ''; + + if (showCaseImage) { + var imageSrc = wp.element.createElement( + 'figure', + null, + wp.element.createElement('img', { src: showCaseImage.url, alt: showCaseImage.title }) + ); + + imageContent = wp.element.createElement( + 'div', + { className: 'image-container' }, + imageSrc + ); + } + + return wp.element.createElement( + 'div', + { className: className + ' showcase-wrapper alignwide' }, + imageContent, + wp.element.createElement( + 'div', + { className: 'info-container' }, + showCaseLink ? wp.element.createElement( + 'h3', + null, + wp.element.createElement( + 'a', + { href: showCaseLink, className: 'showcase-title' }, + showCaseTitle + ) + ) : wp.element.createElement( + 'h3', + { className: 'showcase-title' }, + showCaseTitle + ), + wp.element.createElement( + 'div', + { className: 'showcase-content' }, + showCaseContent + ), + showCaseLink ? wp.element.createElement( + 'a', + { href: showCaseLink, title: __('Read More'), className: 'button secondary' }, + __('Read More') + ) : '' + ) + ); + } + }] }); /***/ }), diff --git a/blocks/showcase/index.js b/blocks/showcase/index.js index 774bbce..6584376 100644 --- a/blocks/showcase/index.js +++ b/blocks/showcase/index.js @@ -7,92 +7,99 @@ const { registerBlockType, } = wp.blocks; -registerBlockType( 'rtgb/showcase', { - - title: __( 'Showcase' ), - icon: 'portfolio', - category: 'layout', - description: __( 'Use for showcase' ), - - attributes: { - - showCaseTitle: { - type: 'array', - field: { - type: 'rich-text', - className: 'showcase-title', - placeholder: __( 'Showcase Title' ), - tagName: 'h3', - inlineToolbar: false, - }, - selector: '.showcase-title', - source: 'children', +const attributes = { + + showCaseTitle: { + type: 'array', + field: { + type: 'rich-text', + className: 'showcase-title', + placeholder: __( 'Showcase Title'), + tagName: 'h3', + inlineToolbar: false, }, + selector: '.showcase-title', + source: 'children', + }, - showCaseContent: { - type: 'array', - field: { - type: 'rich-text', - className: 'showcase-content', - placeholder: __( 'Showcase description' ), - tagName: 'div', - multiline: 'p', - inlineToolbar: false, - }, - selector: '.showcase-content', - source: 'children', + showCaseContent: { + type: 'array', + field: { + type: 'rich-text', + className: 'showcase-content', + placeholder: __( 'Showcase description'), + tagName: 'div', + multiline: 'p', + inlineToolbar: false, }, + selector: '.showcase-content', + source: 'children', + }, - showCaseImage: { - type: 'object', - field: { - type: 'image', - buttonText: __( 'Upload' ), - inputUrl: false, - imagePlaceholder: true, - removeButtonText: __( 'Remove' ), - }, + showCaseImage: { + type: 'object', + field: { + type: 'image', + buttonText: __( 'Upload'), + inputUrl: false, + imagePlaceholder: true, + removeButtonText: __( 'Remove'), }, + }, - showCaseLink: { - type: 'string', - field: { - type: 'link', - placement: 'inspector', - label: __( 'Showcase link' ), - }, + showCaseLink: { + type: 'string', + field: { + type: 'link', + placement: 'inspector', + label: __( 'Showcase link'), }, }, - getEditWrapperProps() { - return { 'data-align': 'wide' }; - }, +}; - edit( props, middleware ) { - const { - attributes: { - showCaseLink, - } - } = props; +const edit = (props, middleware) => { - const className = props.className ? props.className : ''; + const { + attributes: { + showCaseLink, + } + } = props; - return ( -
-
- { middleware.fields.showCaseImage } -
+ const className = props.className ? props.className : ''; -
- { middleware.inspectorControls } - { middleware.fields.showCaseTitle } - { middleware.fields.showCaseContent } - { showCaseLink ? { __( 'Read More' ) } : '' } -
+ return ( +
+
+ {middleware.fields.showCaseImage}
- ); + +
+ {middleware.inspectorControls} + {middleware.fields.showCaseTitle} + {middleware.fields.showCaseContent} + {showCaseLink ? {__('Read More')} : ''} +
+
+ ); + +}; + +registerBlockType( 'rtgb/showcase', { + + title: __( 'Showcase' ), + icon: 'portfolio', + category: 'layout', + description: __( 'Use for showcase' ), + + attributes, + + getEditWrapperProps() { + return { 'data-align': 'wide' }; }, + edit, + save( props ) { const { attributes: { @@ -131,4 +138,50 @@ registerBlockType( 'rtgb/showcase', {
); }, + + + deprecated: [ + { + attributes, + edit, + save(props) { + const { + attributes: { + showCaseImage, + showCaseTitle, + showCaseContent, + showCaseLink, + }, + } = props; + + const className = props.className ? props.className : ''; + let imageContent = ''; + + if (showCaseImage) { + const imageSrc = ( +
+ {showCaseImage.title} +
+ ); + + imageContent = ( +
+ {imageSrc} +
+ ); + } + + return ( +
+ {imageContent} +
+ {showCaseLink ? (

{showCaseTitle}

) : (

{showCaseTitle}

)} +
{showCaseContent}
+ {showCaseLink ? {__('Read More')} : ''} +
+
+ ); + }, + }, + ], } );