From b21e01ec90de0c7053a83efcec3a949fd8da9634 Mon Sep 17 00:00:00 2001 From: Rhys Clay Date: Mon, 21 May 2018 11:36:20 +1000 Subject: [PATCH] Updated for v3+ deprecations --- package-lock.json | 6 +- package.json | 2 +- src/blocks/before-and-after/index.js | 148 ++++++------ src/blocks/features-list/index.js | 218 +++++++++--------- src/blocks/features-list/inspector.js | 44 ++-- src/blocks/section/index.js | 220 +++++++++++------- src/blocks/section/inspector.js | 93 ++++---- src/blocks/text-and-image/index.js | 299 ++++++++++++++++--------- src/blocks/text-and-image/inspector.js | 40 ++-- 9 files changed, 607 insertions(+), 463 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4f30e2a..f8ce358 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1489,9 +1489,9 @@ } }, "cgb-scripts": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/cgb-scripts/-/cgb-scripts-1.9.5.tgz", - "integrity": "sha512-TxCiPU6HOy5slXzpja589gynMlCDHiLzJy3DrhuD7uCDMJn5il85W3hQaeyteIbkTKr69VzKHVMNzB3Rq1Gm4w==", + "version": "1.9.6", + "resolved": "https://registry.npmjs.org/cgb-scripts/-/cgb-scripts-1.9.6.tgz", + "integrity": "sha512-6R7zs77xUTgzsvV7w3e5a7tZWoDroYOSsDJRt42rKQTAQBOfWTRFE8y7wcmYkjrFMlTOOkekMnD4qlYt+Ps79Q==", "requires": { "autoprefixer": "7.2.6", "babel-core": "6.26.0", diff --git a/package.json b/package.json index a9bc3b8..4612ea9 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "eject": "cgb-scripts eject" }, "dependencies": { - "cgb-scripts": "1.9.5", + "cgb-scripts": "1.9.6", "classnames": "^2.2.5", "lodash": "^4.17.10", "memize": "^1.0.5", diff --git a/src/blocks/before-and-after/index.js b/src/blocks/before-and-after/index.js index e55bb23..ad61f5c 100644 --- a/src/blocks/before-and-after/index.js +++ b/src/blocks/before-and-after/index.js @@ -7,24 +7,17 @@ /** * Block Dependencies */ -import icons from "../icons"; +import icons from '../icons'; /** * Internal block libraries */ const { __ } = wp.i18n; // Import __() from wp.i18n -const { - registerBlockType, - MediaUpload, - BlockControls, - InnerBlocks, -} = wp.blocks; -const { - Button, - Toolbar, - Tooltip, - Dashicon, -} = wp.components; +const { registerBlockType } = wp.blocks; + +const { MediaUpload } = wp.editor; + +const { Button } = wp.components; /** * Register: aa Gutenberg Block. * @@ -37,71 +30,65 @@ const { * @return {?WPBlock} The block, if it has been successfully * registered; otherwise `undefined`. */ -registerBlockType("cgb/block-before-and-after", { - - title: __("Before & After"), // Block title. - icon: "image-flip-horizontal", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. - category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. - keywords: [__("before-and-after — CGB Block"), __("Before & After")], +registerBlockType('cgb/block-before-and-after', { + title: __('Before & After'), // Block title. + icon: 'image-flip-horizontal', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. + category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. + keywords: [__('before-and-after — CGB Block'), __('Before & After')], attributes: { beforeImgURL: { - type: "string", + type: 'string', }, beforeImgID: { - type: "number" + type: 'number', }, afterImgURL: { - type: "string", + type: 'string', }, afterImgID: { - type: "number" + type: 'number', }, - }, // The "edit" property must be a valid function. edit: props => { - const onSelectBeforeImage = img => { props.setAttributes({ beforeImgID: img.id, beforeImgURL: img.url, - }); }; const onRemoveBeforeImage = () => { props.setAttributes({ beforeImgID: null, beforeImgURL: null, - }); - }; - + }; + const onSelectAfterImage = img => { props.setAttributes({ afterImgID: img.id, afterImgURL: img.url, - }); }; const onRemoveAfterImage = () => { props.setAttributes({ afterImgID: null, afterImgURL: null, - }); }; return [ -
-
-
+
+
{!props.attributes.beforeImgID ? ( ) : (
- - - - + + +
)}
-
+
{!props.attributes.afterImgID ? ( ) : (
- - - - + + +
)}
-
-
+
+
, ]; }, // The "save" property must be specified and must be a valid function. save: function(props) { - return (
-
-
-
-
-
-
- -
-
+
+
+
+
+
+
+ +
+
); - } -}); \ No newline at end of file + }, +}); diff --git a/src/blocks/features-list/index.js b/src/blocks/features-list/index.js index c39b0c0..d7782ea 100644 --- a/src/blocks/features-list/index.js +++ b/src/blocks/features-list/index.js @@ -3,8 +3,8 @@ * * A simple block to show a feature */ -import classnames from "classnames"; -import icons from "../icons"; +import classnames from 'classnames'; +import icons from '../icons'; import Inspector from './inspector'; /** @@ -12,20 +12,15 @@ import Inspector from './inspector'; */ const { __ } = wp.i18n; // Import __() from wp.i18n +const { registerBlockType } = wp.blocks; const { - registerBlockType, RichText, MediaUpload, BlockControls, InnerBlocks, - BlockAlignmentToolbar -} = wp.blocks; -const { - Button, - Toolbar, - Tooltip, - Dashicon -} = wp.components; + BlockAlignmentToolbar, +} = wp.editor; +const { Button } = wp.components; /** * Register: aa Gutenberg Block. * @@ -38,108 +33,112 @@ const { * @return {?WPBlock} The block, if it has been successfully * registered; otherwise `undefined`. */ -registerBlockType("cgb/block-feature", { +registerBlockType('cgb/block-feature', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. - title: __("Feature"), // Block title. - icon: "heart", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. - category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. - keywords: [__("feature"), __("Feature List")], + title: __('Feature'), // Block title. + icon: 'heart', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. + category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. + keywords: [__('feature'), __('Feature List')], attributes: { title: { - type: "string", - source: "children", - selector: "h3" + type: 'string', + source: 'children', + selector: 'h3', }, description: { - type: "array", - source: "children", - selector: ".feature__description" + type: 'array', + source: 'children', + selector: '.feature__description', }, imgURL: { - type: "string", - source: "attribute", - attribute: "src", - selector: "img" + type: 'string', + source: 'attribute', + attribute: 'src', + selector: 'img', }, imgID: { - type: "number" + type: 'number', }, imgAlt: { - type: "string", - source: "attribute", - attribute: "alt", - selector: "img" + type: 'string', + source: 'attribute', + attribute: 'alt', + selector: 'img', }, circularImg: { - type: "boolean", - default: "false", + type: 'boolean', + default: 'false', }, link: { - type: "string", - default: "/contact" + type: 'string', + default: '/contact', }, buttonText: { - type: "string", - default: "Find out more" + type: 'string', + default: 'Find out more', }, blockAlignment: { type: 'string', - default: 'center' + default: 'center', }, }, - getEditWrapperProps( attributes ) { + getEditWrapperProps(attributes) { const { blockAlignment } = attributes; - if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) { - return { 'data-align': blockAlignment } + if ( + 'left' === blockAlignment || + 'right' === blockAlignment || + 'full' === blockAlignment + ) { + return { 'data-align': blockAlignment }; } }, // The "edit" property must be a valid function. edit: props => { - const { attributes: { blockAlignment, imgURL, imgAlt, buttonText, link, circularImg }, className } = props; - // This control which editable will be focused and falls back to the title editable - const focusedEditable = props.focus - ? props.focus.editable || "title" - : null; + const { + attributes: { + blockAlignment, + imgURL, + imgAlt, + buttonText, + link, + circularImg, + }, + className, + } = props; + const attributes = props.attributes; const onChangeTitle = value => { props.setAttributes({ title: value }); }; - const onFocusTitle = focus => { - props.setFocus(_.extend({}, focus, { editable: "title" })); - }; const onChangeDescription = value => { props.setAttributes({ description: value }); }; - const onFocusDescription = focus => { - props.setFocus(_.extend({}, focus, { editable: "description" })); - }; const onSelectImage = img => { - let thumb = img.url; props.setAttributes({ - imgID : img.id, - imgAlt: img.alt + imgID: img.id, + imgAlt: img.alt, }); - if(props.attributes.circularImg) { + if (props.attributes.circularImg) { const image = new wp.api.models.Media({ id: img.id }) - .fetch() - .done(res => { - thumb = res.media_details.sizes['thumbnail'].source_url; - props.setAttributes({ - imgURL: thumb - }); - }) + .fetch() + .done(res => { + thumb = res.media_details.sizes['thumbnail'].source_url; + props.setAttributes({ + imgURL: thumb, + }); + }); } else { props.setAttributes({ - imgURL: img.url - }); + imgURL: img.url, + }); } }; @@ -147,7 +146,7 @@ registerBlockType("cgb/block-feature", { props.setAttributes({ imgID: null, imgURL: null, - imgAlt: null + imgAlt: null, }); }; @@ -161,7 +160,7 @@ registerBlockType("cgb/block-feature", { const updateAlignment = nextAlign => { props.setAttributes({ - blockAlignment: nextAlign + blockAlignment: nextAlign, }); }; @@ -171,29 +170,29 @@ registerBlockType("cgb/block-feature", { const imgClasses = classnames( 'center-block', - circularImg ? `image--circle` : null + circularImg ? `image--circle` : null, ); return [ -
+
- + - -
+ +
{!attributes.imgID ? ( ) : (
- {imgAlt} + {imgAlt} {props.focus ? ( - ) : null} @@ -227,66 +222,65 @@ registerBlockType("cgb/block-feature", {
-
+
, ]; }, // The "save" property must be specified and must be a valid function. save: function(props) { - - const { attributes: { blockAlignment, imgURL, imgAlt, title, description, buttonText, link }, classNames } = props; + const { + attributes: { + blockAlignment, + imgURL, + imgAlt, + title, + description, + buttonText, + link, + }, + classNames, + } = props; const classes = classnames( classNames, - blockAlignment ? `flex--align${blockAlignment}` : null + blockAlignment ? `flex--align${blockAlignment}` : null, ); return ( -
+
- { + {imgAlt}
-

{ title }

-
- { description } -
+

{title}

+
{description}
- - { buttonText } + + {buttonText}
); - } + }, }); diff --git a/src/blocks/features-list/inspector.js b/src/blocks/features-list/inspector.js index 7a24bbc..36120b4 100644 --- a/src/blocks/features-list/inspector.js +++ b/src/blocks/features-list/inspector.js @@ -3,50 +3,48 @@ */ const { __ } = wp.i18n; const { Component } = wp.element; -const { - InspectorControls, -} = wp.blocks; -const { - PanelBody, - PanelRow, - TextControl, - ToggleControl, -} = wp.components; +const { InspectorControls } = wp.editor; +const { PanelBody, PanelRow, TextControl, ToggleControl } = wp.components; /** * Create an Inspector Controls wrapper Component */ export default class Inspector extends Component { - constructor( props ) { - super( ...arguments ); + constructor(props) { + super(...arguments); } render() { - const { attributes: { link, buttonText, circularImg }, onChangeLink, onChangeButtonText, onChangeImgType } = this.props; + const { + attributes: { link, buttonText, circularImg }, + onChangeLink, + onChangeButtonText, + onChangeImgType, + } = this.props; return ( - + - + diff --git a/src/blocks/section/index.js b/src/blocks/section/index.js index c9fc75e..ad3f455 100644 --- a/src/blocks/section/index.js +++ b/src/blocks/section/index.js @@ -3,8 +3,7 @@ * * Wrap another block in a section */ -import classnames from "classnames"; -import icons from "../icons"; +import classnames from 'classnames'; import Inspector from './inspector'; /** @@ -14,17 +13,45 @@ import Inspector from './inspector'; const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType, - InnerBlocks, - InspectorControls, - BlockControls, - BlockDescription, - BlockAlignmentToolbar } = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE + const { - TextControl, - Dashicon -} = wp.components; -const validAlignments = ["wide", "full"]; + InnerBlocks, + BlockControls, + BlockAlignmentToolbar, +} = wp.editor; + +const validAlignments = ['wide', 'full']; + +const attributes = { + verticalPadding: { + type: 'number', + default: 1, + }, + horizontalPadding: { + type: 'number', + default: 0, + }, + topMargin: { + type: 'number', + default: 0, + }, + bottomMargin: { + type: 'number', + default: 1, + }, + sectionBackgroundColor: { + type: 'string', + default: 'transparent', + }, + alignment: { + type: 'string', + }, + id: { + type: 'string', + }, +}; + /** * Register: aa Gutenberg Block. * @@ -37,40 +64,13 @@ const validAlignments = ["wide", "full"]; * @return {?WPBlock} The block, if it has been successfully * registered; otherwise `undefined`. */ -registerBlockType("cgb/block-section", { +registerBlockType('cgb/block-section', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. - title: __("Section"), // Block title. - icon: "editor-table", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. - category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. - keywords: [__("team"), __("Section")], - attributes: { - verticalPadding: { - type: "number", - default: 1 - }, - horizontalPadding: { - type: "number", - default: 0 - }, - topMargin: { - type: "number", - default: 0 - }, - bottomMargin: { - type: "number", - default: 1 - }, - sectionBackgroundColor: { - type: "string", - default: "transparent" - }, - alignment: { - type: "string" - }, - id: { - type: "string" - } - }, + title: __('Section'), // Block title. + icon: 'editor-table', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. + category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. + keywords: [__('team'), __('Section')], + attributes, // The "edit" property must be a valid function. edit: props => { @@ -96,56 +96,65 @@ registerBlockType("cgb/block-section", { const updateAlignment = nextAlign => { props.setAttributes({ - alignment: nextAlign + alignment: nextAlign, }); }; const onChangeSectionID = value => { props.setAttributes({ - id: value - }) + id: value, + }); }; - const { attributes: { alignment, sectionBackgroundColor, verticalPadding, horizontalPadding, topMargin, bottomMargin }, x } = props; + const { + attributes: { + alignment, + sectionBackgroundColor, + verticalPadding, + horizontalPadding, + topMargin, + bottomMargin, + }, + } = props; return [ -
- -
-
+
, ]; }, @@ -153,24 +162,33 @@ registerBlockType("cgb/block-section", { const { alignment } = attributes; if (-1 !== validAlignments.indexOf(alignment)) { - return { "data-align": alignment }; + return { 'data-align': alignment }; } }, // The "save" property must be specified and must be a valid function. save: props => { const classes = classnames( - "transition-all", - props.attributes.alignment ? `align${props.attributes.alignment}` : null + 'transition-all', + props.attributes.alignment ? `align${props.attributes.alignment}` : null, ); // if it is wide or full show a container const innerClasses = classnames( - props.attributes.alignment == "wide" ? "container" : null + props.attributes.alignment == 'wide' ? 'container' : null, ); - const { attributes: { id, sectionBackgroundColor, verticalPadding, horizontalPadding, topMargin, bottomMargin } } = props; + const { + attributes: { + id, + sectionBackgroundColor, + verticalPadding, + horizontalPadding, + topMargin, + bottomMargin, + }, + } = props; return (
@@ -193,4 +211,54 @@ registerBlockType("cgb/block-section", { ); }, + deprecated: [ + { + attributes, + save: props => { + const classes = classnames( + 'transition-all', + props.attributes.alignment + ? `align${props.attributes.alignment}` + : null, + ); + + // if it is wide or full show a container + + const innerClasses = classnames( + props.attributes.alignment == 'wide' ? 'container' : null, + ); + + const { + attributes: { + id, + sectionBackgroundColor, + verticalPadding, + horizontalPadding, + topMargin, + bottomMargin, + }, + } = props; + + return ( +
+
+ +
+
+ ); + }, + }, + ], }); diff --git a/src/blocks/section/inspector.js b/src/blocks/section/inspector.js index 8f0b521..ae933fd 100644 --- a/src/blocks/section/inspector.js +++ b/src/blocks/section/inspector.js @@ -3,73 +3,68 @@ */ const { __ } = wp.i18n; const { Component } = wp.element; -const { - InspectorControls, - ColorPalette, -} = wp.blocks; -const { - PanelBody, - PanelRow, - PanelColor, - TextControl, -} = wp.components; +const { ColorPalette } = wp.blocks; +const { InspectorControls } = wp.editor; +const { PanelBody, PanelRow, PanelColor, TextControl } = wp.components; /** * Create an Inspector Controls wrapper Component */ export default class Inspector extends Component { - constructor( props ) { - super( ...arguments ); + constructor(props) { + super(...arguments); } render() { - const { attributes: { verticalPadding, horizontalPadding }, onChangeHorizontalPadding, onChangeVerticalPadding } = this.props; + const { + attributes: { verticalPadding, horizontalPadding }, + onChangeHorizontalPadding, + onChangeVerticalPadding, + } = this.props; return ( - - - - - - - - - - + + + + - + + + - - - + diff --git a/src/blocks/text-and-image/index.js b/src/blocks/text-and-image/index.js index 3033093..cb24669 100644 --- a/src/blocks/text-and-image/index.js +++ b/src/blocks/text-and-image/index.js @@ -14,18 +14,46 @@ import Inspector from './inspector'; */ const { __ } = wp.i18n; // Import __() from wp.i18n -const { - registerBlockType, - MediaUpload, - BlockControls, - InnerBlocks, -} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE -const { - Button, - Toolbar, - Tooltip, - Dashicon, -} = wp.components; +const { registerBlockType } = wp.blocks; + +const { MediaUpload, BlockControls, InnerBlocks } = wp.editor; + +const { Button, Toolbar, Tooltip, Dashicon } = wp.components; + +const attributes = { + message: { + type: 'array', + source: 'children', + selector: '.message-body', + }, + imgURL: { + type: 'string', + source: 'attribute', + attribute: 'src', + selector: 'img', + }, + imgID: { + type: 'number', + }, + imgAlt: { + type: 'string', + source: 'attribute', + attribute: 'alt', + selector: 'img', + }, + textFirstAlignment: { + type: 'boolean', + default: false, + }, + columnWidth: { + type: 'number', + default: 50, + }, + imgExtension: { + type: 'boolean', + default: false, + }, +}; /** * Register: aa Gutenberg Block. * @@ -38,160 +66,223 @@ const { * @return {?WPBlock} The block, if it has been successfully * registered; otherwise `undefined`. */ -registerBlockType( 'cgb/block-text-and-image', { +registerBlockType('cgb/block-text-and-image', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. - title: __( 'Text & Image' ), // Block title. + title: __('Text & Image'), // Block title. icon: 'image-flip-horizontal', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. - keywords: [ __( 'text-and-image — CGB Block' ), __( 'Text and Image' ) ], - attributes: { - message: { - type: 'array', - source: 'children', - selector: '.message-body', - }, - imgURL: { - type: 'string', - source: 'attribute', - attribute: 'src', - selector: 'img', - }, - imgID: { - type: 'number', - }, - imgAlt: { - type: 'string', - source: 'attribute', - attribute: 'alt', - selector: 'img', - }, - textFirstAlignment: { - type: 'boolean', - default: false, - }, - columnWidth: { - type: 'number', - default: 50, - }, - }, + keywords: [__('text-and-image — CGB Block'), __('Text and Image')], + attributes, // The "edit" property must be a valid function. edit: props => { + const { + attributes: { + imgID, + imgURL, + imgAlt, + textFirstAlignment, + imgExtension, + columnWidth, + }, + className, + setAttributes, + isSelected, + } = props; + const onSelectImage = img => { - props.setAttributes( { + setAttributes({ imgID: img.id, imgURL: img.url, imgAlt: img.alt, - } ); + }); }; const onRemoveImage = () => { - props.setAttributes( { + setAttributes({ imgID: null, imgURL: null, imgAlt: null, - } ); + }); }; const toggleTextFirstAlignment = () => { - props.setAttributes( { - textFirstAlignment: ! props.attributes.textFirstAlignment, - } ); + setAttributes({ + textFirstAlignment: !textFirstAlignment, + }); }; const onChangeColumnWidth = value => { - props.setAttributes( { + setAttributes({ columnWidth: value, - } ); + }); + }; + + const onChangeImgExtension = value => { + setAttributes({ imgExtension: value }); }; + return [ -
+
- -
- + +
- + - +
-
+
-
- { ! props.attributes.imgID ? ( +
+ {!imgID ? ( ( + value={imgID} + render={({ open }) => ( - ) } + )} /> ) : ( -
- { - - - + ) : null}
- ) } + )}
-
+
, ]; }, // The "save" property must be specified and must be a valid function. - save: function( props ) { - const colOrder = props.attributes.textFirstAlignment ? - 'row-reverse' : - 'row'; + save: function(props) { + const colOrder = props.attributes.textFirstAlignment + ? 'row-reverse' + : 'row'; + + const { + attributes: { + columnWidth, + imgExtension, + textFirstAlignment, + imgURL, + imgAlt, + }, + className, + } = props; + return ( -
-
-
+
+
+
-
- { +
+ {imgAlt}
); }, -} ); + + deprecated: [ + { + attributes, + save: function(props) { + const colOrder = props.attributes.textFirstAlignment + ? 'row-reverse' + : 'row'; + return ( +
+
+
+ +
+
+ {props.attributes.imgAlt} +
+
+
+ ); + }, + }, + ], +}); diff --git a/src/blocks/text-and-image/inspector.js b/src/blocks/text-and-image/inspector.js index e4526ff..d39c1f0 100644 --- a/src/blocks/text-and-image/inspector.js +++ b/src/blocks/text-and-image/inspector.js @@ -3,38 +3,42 @@ */ const { __ } = wp.i18n; const { Component } = wp.element; -const { - InspectorControls, -} = wp.blocks; -const { - PanelBody, - PanelRow, - RangeControl, -} = wp.components; +const { InspectorControls } = wp.editor; +const { PanelBody, PanelRow, RangeControl, ToggleControl } = wp.components; /** * Create an Inspector Controls wrapper Component */ export default class Inspector extends Component { render() { - const { attributes: { columnWidth }, onChangeColumnWidth } = this.props; + const { + attributes: { columnWidth, imgExtension }, + onChangeColumnWidth, + onChangeImgExtension, + } = this.props; return ( - + - + + + + +