From 6c5fc5ec84721fa4f76cb1b92fe6418cec2ef977 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 24 Jul 2019 13:22:20 +0200 Subject: [PATCH 01/16] implemented template selector on initial add --- src/row/block.js | 87 +++++++++++++++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 30 deletions(-) diff --git a/src/row/block.js b/src/row/block.js index 39f8e9cc2..4b6501229 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -6,22 +6,27 @@ import './style.scss'; import './editor.scss'; +import { times } from 'lodash'; import { alignBottom, alignCenter, alignTop } from './icons'; +import { useState } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; -const { SelectControl, CheckboxControl, PanelBody } = wp.components; +const { SelectControl, CheckboxControl, PanelBody, SVG, Path } = wp.components; const { Fragment } = wp.element; const { dispatch, select } = wp.data; const { applyFilters } = wp.hooks; const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; -let templates = { - '1-1': { - label: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ), + +let templates = [ + { + title: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ), templateLock: 'all', - blocks: [ + icon: , + template: [ [ 'wp-bootstrap-blocks/column', { @@ -36,10 +41,11 @@ let templates = { ], ], }, - '1-2': { - label: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ), + { + title: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ), templateLock: 'all', - blocks: [ + icon: , + template: [ [ 'wp-bootstrap-blocks/column', { @@ -54,10 +60,11 @@ let templates = { ], ], }, - '2-1': { - label: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ), + { + title: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ), templateLock: 'all', - blocks: [ + icon: , + template: [ [ 'wp-bootstrap-blocks/column', { @@ -72,10 +79,11 @@ let templates = { ], ], }, - '1-1-1': { - label: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ), + { + title: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ), templateLock: 'all', - blocks: [ + icon: , + template: [ [ 'wp-bootstrap-blocks/column', { @@ -96,22 +104,25 @@ let templates = { ], ], }, -}; +]; templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); if ( enableCustomTemplate ) { templates.custom = { - label: __( 'Custom', 'wp-bootstrap-blocks' ), + title: __( 'Custom', 'wp-bootstrap-blocks' ), templateLock: false, - blocks: [ + template: [ [ 'wp-bootstrap-blocks/column' ], ], }; } -const getColumnsTemplate = ( template ) => { - return templates[ template ] ? templates[ template ].blocks : []; +const getColumnsTemplate = ( columns ) => { + if ( columns === undefined ) { + return null; + } + return times( columns, () => [ 'wp-bootstrap-blocks/column' ] ); }; const getColumnsTemplateLock = ( template ) => { return templates[ template ] ? templates[ template ].templateLock : false; @@ -142,11 +153,22 @@ registerBlockType( 'wp-bootstrap-blocks/row', { }, edit( { className, attributes, setAttributes, clientId } ) { - const { template, noGutters, alignment, verticalAlignment } = attributes; + const { noGutters, alignment, verticalAlignment } = attributes; + + const { count } = useSelect( ( select ) => { + return { + count: select( 'core/block-editor' ).getBlockCount( clientId ), + }; + } ); + const [ template, setTemplate ] = useState( getColumnsTemplate( count ) ); + const [ forceUseTemplate, setForceUseTemplate ] = useState( false ); + + const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; + const templateOptions = []; Object.keys( templates ).forEach( ( templateName ) => { templateOptions.push( { - label: templates[ templateName ].label, + label: templates[ templateName ].title, value: templateName, } ); } ); @@ -156,15 +178,11 @@ registerBlockType( 'wp-bootstrap-blocks/row', { // Update sizes to fit with selected template cols.forEach( ( col, index ) => { - if ( templates[ selectedTemplate ] && templates[ selectedTemplate ].blocks.length > index ) { - const newAttributes = templates[ selectedTemplate ].blocks[ index ][ 1 ]; + if ( templates[ selectedTemplate ] && templates[ selectedTemplate ].template.length > index ) { + const newAttributes = templates[ selectedTemplate ].template[ index ][ 1 ]; dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); } } ); - - setAttributes( { - template: selectedTemplate, - } ); }; const alignmentControls = [ @@ -209,7 +227,6 @@ registerBlockType( 'wp-bootstrap-blocks/row', { { onTemplateChange( selectedTemplate ); @@ -237,8 +254,18 @@ registerBlockType( 'wp-bootstrap-blocks/row', {
{ + if ( nextTemplate === undefined ) { + nextTemplate = getColumnsTemplate( 2 ); + } + + setTemplate( nextTemplate ); + setForceUseTemplate( true ); + } } + __experimentalAllowTemplateOptionSkip + templateLock="all" />
From 36e34eb2d173d4491a9820b8360ddac92c19f466 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 24 Jul 2019 14:00:18 +0200 Subject: [PATCH 02/16] remove templateLock from templates --- src/row/block.js | 110 ++++++++++++++++++++++------------------------- 1 file changed, 51 insertions(+), 59 deletions(-) diff --git a/src/row/block.js b/src/row/block.js index 4b6501229..9811c32fd 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -24,7 +24,6 @@ const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; let templates = [ { title: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ), - templateLock: 'all', icon: , template: [ [ @@ -43,7 +42,6 @@ let templates = [ }, { title: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ), - templateLock: 'all', icon: , template: [ [ @@ -62,7 +60,6 @@ let templates = [ }, { title: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ), - templateLock: 'all', icon: , template: [ [ @@ -81,7 +78,6 @@ let templates = [ }, { title: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ), - templateLock: 'all', icon: , template: [ [ @@ -107,16 +103,7 @@ let templates = [ ]; templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); -const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); -if ( enableCustomTemplate ) { - templates.custom = { - title: __( 'Custom', 'wp-bootstrap-blocks' ), - templateLock: false, - template: [ - [ 'wp-bootstrap-blocks/column' ], - ], - }; -} +const templateLock = applyFilters( 'wpBootstrapBlocks.row.templateLock', false ); const getColumnsTemplate = ( columns ) => { if ( columns === undefined ) { @@ -124,9 +111,6 @@ const getColumnsTemplate = ( columns ) => { } return times( columns, () => [ 'wp-bootstrap-blocks/column' ] ); }; -const getColumnsTemplateLock = ( template ) => { - return templates[ template ] ? templates[ template ].templateLock : false; -}; registerBlockType( 'wp-bootstrap-blocks/row', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. @@ -166,23 +150,27 @@ registerBlockType( 'wp-bootstrap-blocks/row', { const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; const templateOptions = []; - Object.keys( templates ).forEach( ( templateName ) => { + templates.forEach( ( template, i ) => { templateOptions.push( { - label: templates[ templateName ].title, - value: templateName, + label: template.title, + value: i, } ); } ); - const onTemplateChange = ( selectedTemplate ) => { - // Grab columns of existing block - const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks; + const onTemplateChange = ( templateIndex ) => { + if ( templates[ templateIndex ] ) { + // Grab columns of existing block + const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks; - // Update sizes to fit with selected template - cols.forEach( ( col, index ) => { - if ( templates[ selectedTemplate ] && templates[ selectedTemplate ].template.length > index ) { - const newAttributes = templates[ selectedTemplate ].template[ index ][ 1 ]; - dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); - } - } ); + // Update sizes to fit with selected template + cols.forEach( ( col, index ) => { + if ( templates[ templateIndex ].template.length > index ) { + const newAttributes = templates[ templateIndex ].template[ index ][ 1 ]; + dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); + } + } ); + + setTemplate( templates[ templateIndex ].template ); + } }; const alignmentControls = [ @@ -223,34 +211,38 @@ registerBlockType( 'wp-bootstrap-blocks/row', { return ( - - - { - onTemplateChange( selectedTemplate ); - } } - /> - setAttributes( { noGutters: isChecked } ) } - /> - - - - setAttributes( { alignment: newAlignment } ) } - alignmentControls={ alignmentControls } - /> - setAttributes( { verticalAlignment: newVerticalAlignment } ) } - alignmentControls={ verticalAlignmentControls } - /> - + { ! showTemplateSelector && ( + + + + { + onTemplateChange( selectedTemplate ); + } } + /> + setAttributes( { noGutters: isChecked } ) } + /> + + + + setAttributes( { alignment: newAlignment } ) } + alignmentControls={ alignmentControls } + /> + setAttributes( { verticalAlignment: newVerticalAlignment } ) } + alignmentControls={ verticalAlignmentControls } + /> + + + ) }
From 5cdd03c108906a178f2df5177ac4a51c1930afb9 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 24 Jul 2019 16:27:34 +0200 Subject: [PATCH 03/16] added custom template --- src/row/block.js | 29 ++++++++++++++++++++--------- src/row/class-row-block-type.php | 3 +++ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/row/block.js b/src/row/block.js index 9811c32fd..8aa7415f7 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -103,15 +103,23 @@ let templates = [ ]; templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); -const templateLock = applyFilters( 'wpBootstrapBlocks.row.templateLock', false ); - -const getColumnsTemplate = ( columns ) => { - if ( columns === undefined ) { +const getColumnsTemplate = ( columnCount ) => { + if ( columnCount === undefined ) { return null; } - return times( columns, () => [ 'wp-bootstrap-blocks/column' ] ); + return times( columnCount, () => [ + 'wp-bootstrap-blocks/column', + { + sizeMd: columnCount ? 12 / columnCount : 12, + }, + ] ); }; +const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); +const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); + +const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : "all"; + registerBlockType( 'wp-bootstrap-blocks/row', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. title: __( 'Row', 'wp-bootstrap-blocks' ), // Block title. @@ -137,7 +145,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', { }, edit( { className, attributes, setAttributes, clientId } ) { - const { noGutters, alignment, verticalAlignment } = attributes; + const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; const { count } = useSelect( ( select ) => { return { @@ -250,14 +258,17 @@ registerBlockType( 'wp-bootstrap-blocks/row', { __experimentalTemplateOptions={ templates } __experimentalOnSelectTemplateOption={ ( nextTemplate ) => { if ( nextTemplate === undefined ) { - nextTemplate = getColumnsTemplate( 2 ); + nextTemplate = getColumnsTemplate( customTemplateColumnCount ); + setAttributes( { + isCustomTemplate: true, + } ); } setTemplate( nextTemplate ); setForceUseTemplate( true ); } } - __experimentalAllowTemplateOptionSkip - templateLock={ templateLock } + __experimentalAllowTemplateOptionSkip={ enableCustomTemplate } + templateLock={ getColumnsTemplateLock( isCustomTemplate ) } /> diff --git a/src/row/class-row-block-type.php b/src/row/class-row-block-type.php index da9a96b9f..72382694b 100755 --- a/src/row/class-row-block-type.php +++ b/src/row/class-row-block-type.php @@ -44,6 +44,9 @@ class Row_Block_Type extends Block_Type { 'verticalAlignment' => array( 'type' => 'string', ), + 'isCustomTemplate' => array( + 'type' => 'boolean', + ), ); /** From d06a2deb53457bd9e2f45f92c39f9160197731b6 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 25 Jul 2019 13:56:56 +0200 Subject: [PATCH 04/16] add template selector in inspector controls --- src/row/block.js | 52 ++++++++++++++++++++++++++++++++------------- src/row/editor.scss | 9 ++++++++ 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/src/row/block.js b/src/row/block.js index 8aa7415f7..72c0e8f74 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data'; const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; -const { SelectControl, CheckboxControl, PanelBody, SVG, Path } = wp.components; +const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; const { Fragment } = wp.element; const { dispatch, select } = wp.data; const { applyFilters } = wp.hooks; @@ -157,13 +157,6 @@ registerBlockType( 'wp-bootstrap-blocks/row', { const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; - const templateOptions = []; - templates.forEach( ( template, i ) => { - templateOptions.push( { - label: template.title, - value: i, - } ); - } ); const onTemplateChange = ( templateIndex ) => { if ( templates[ templateIndex ] ) { // Grab columns of existing block @@ -177,6 +170,9 @@ registerBlockType( 'wp-bootstrap-blocks/row', { } } ); + setAttributes( { + isCustomTemplate: false, + } ); setTemplate( templates[ templateIndex ].template ); } }; @@ -222,14 +218,40 @@ registerBlockType( 'wp-bootstrap-blocks/row', { { ! showTemplateSelector && ( - - { - onTemplateChange( selectedTemplate ); + +
    + { templates.map( ( template, index ) => ( +
  • + { + onTemplateChange( index ); + } } + /> +
    • + ) ) } +
+ { enableCustomTemplate && ( + + )} + + Date: Thu, 25 Jul 2019 14:22:46 +0200 Subject: [PATCH 05/16] use only lodash.times --- package-lock.json | 11 ++++++++--- package.json | 3 ++- src/row/block.js | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 272eaa3ac..cc096259f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4223,9 +4223,9 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash.noop": { "version": "3.0.1", @@ -4237,6 +4237,11 @@ "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz", "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=" }, + "lodash.times": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/lodash.times/-/lodash.times-4.3.2.tgz", + "integrity": "sha1-Ph8lZcQxdU1Uq1fy7RdBk5KFyh0=" + }, "log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", diff --git a/package.json b/package.json index d48f33d4c..4af60f310 100755 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "cgb-scripts": "^1.18.1", - "lodash.noop": "^3.0.1" + "lodash.noop": "^3.0.1", + "lodash.times": "^4.3.2" } } diff --git a/src/row/block.js b/src/row/block.js index 72c0e8f74..ebc3b00c4 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -6,7 +6,7 @@ import './style.scss'; import './editor.scss'; -import { times } from 'lodash'; +import times from 'lodash.times'; import { alignBottom, alignCenter, alignTop } from './icons'; import { useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; @@ -241,7 +241,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', { const customTemplate = getColumnsTemplate( customTemplateColumnCount ); setAttributes( { isCustomTemplate: true, - } ); + } ); setTemplate( customTemplate ); } } > From b9b3fb0d46b01d84773d66f948a2beb79cc33848 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 25 Jul 2019 15:23:04 +0200 Subject: [PATCH 06/16] eslint fixes --- src/row/block.js | 41 ++++++++++++++++++++--------------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/row/block.js b/src/row/block.js index ebc3b00c4..b53fdaa09 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -8,15 +8,13 @@ import './editor.scss'; import times from 'lodash.times'; import { alignBottom, alignCenter, alignTop } from './icons'; -import { useState } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; -const { Fragment } = wp.element; -const { dispatch, select } = wp.data; +const { Fragment, useState } = wp.element; +const { dispatch, select, useSelect } = wp.data; const { applyFilters } = wp.hooks; const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; @@ -118,7 +116,7 @@ const getColumnsTemplate = ( columnCount ) => { const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); -const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : "all"; +const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'all'; registerBlockType( 'wp-bootstrap-blocks/row', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. @@ -147,6 +145,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', { edit( { className, attributes, setAttributes, clientId } ) { const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; + // eslint-disable-next-line no-shadow const { count } = useSelect( ( select ) => { return { count: select( 'core/block-editor' ).getBlockCount( clientId ), @@ -222,7 +221,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', { title={ __( 'Change layout', 'wp-bootstrap-blocks' ) } >
    - { templates.map( ( template, index ) => ( + { templates.map( ( template, index ) => ( // eslint-disable-line no-shadow
  • { enableCustomTemplate && ( - - )} + + ) } + > Date: Fri, 26 Jul 2019 13:38:58 +0200 Subject: [PATCH 07/16] create edit.js --- src/row/block.js | 266 +-------------------------------------------- src/row/edit.js | 272 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 276 insertions(+), 262 deletions(-) create mode 100644 src/row/edit.js diff --git a/src/row/block.js b/src/row/block.js index b53fdaa09..39f1e6af5 100755 --- a/src/row/block.js +++ b/src/row/block.js @@ -2,121 +2,15 @@ * BLOCK: wp-bootstrap-blocks/row */ +import edit from './edit'; + // Import CSS. import './style.scss'; import './editor.scss'; -import times from 'lodash.times'; -import { alignBottom, alignCenter, alignTop } from './icons'; - const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks -const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; -const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; -const { Fragment, useState } = wp.element; -const { dispatch, select, useSelect } = wp.data; -const { applyFilters } = wp.hooks; - -const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; - -let templates = [ - { - title: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ), - icon: , - template: [ - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 6, - }, - ], - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 6, - }, - ], - ], - }, - { - title: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ), - icon: , - template: [ - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 4, - }, - ], - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 8, - }, - ], - ], - }, - { - title: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ), - icon: , - template: [ - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 8, - }, - ], - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 4, - }, - ], - ], - }, - { - title: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ), - icon: , - template: [ - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 4, - }, - ], - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 4, - }, - ], - [ - 'wp-bootstrap-blocks/column', - { - sizeMd: 4, - }, - ], - ], - }, -]; -templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); - -const getColumnsTemplate = ( columnCount ) => { - if ( columnCount === undefined ) { - return null; - } - return times( columnCount, () => [ - 'wp-bootstrap-blocks/column', - { - sizeMd: columnCount ? 12 / columnCount : 12, - }, - ] ); -}; - -const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); -const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); - -const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'all'; +const { InnerBlocks } = wp.editor; registerBlockType( 'wp-bootstrap-blocks/row', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. @@ -142,159 +36,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', { }; }, - edit( { className, attributes, setAttributes, clientId } ) { - const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; - - // eslint-disable-next-line no-shadow - const { count } = useSelect( ( select ) => { - return { - count: select( 'core/block-editor' ).getBlockCount( clientId ), - }; - } ); - const [ template, setTemplate ] = useState( getColumnsTemplate( count ) ); - const [ forceUseTemplate, setForceUseTemplate ] = useState( false ); - - const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; - - const onTemplateChange = ( templateIndex ) => { - if ( templates[ templateIndex ] ) { - // Grab columns of existing block - const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks; - - // Update sizes to fit with selected template - cols.forEach( ( col, index ) => { - if ( templates[ templateIndex ].template.length > index ) { - const newAttributes = templates[ templateIndex ].template[ index ][ 1 ]; - dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); - } - } ); - - setAttributes( { - isCustomTemplate: false, - } ); - setTemplate( templates[ templateIndex ].template ); - } - }; - - const alignmentControls = [ - { - icon: 'editor-alignleft', - title: __( 'Align columns left', 'wp-bootstrap-blocks' ), - align: 'left', - }, - { - icon: 'editor-aligncenter', - title: __( 'Align columns center', 'wp-bootstrap-blocks' ), - align: 'center', - }, - { - icon: 'editor-alignright', - title: __( 'Align columns right', 'wp-bootstrap-blocks' ), - align: 'right', - }, - ]; - - const verticalAlignmentControls = [ - { - icon: alignTop, - title: __( 'Align columns top', 'wp-bootstrap-blocks' ), - align: 'top', - }, - { - icon: alignCenter, - title: __( 'Align columns center', 'wp-bootstrap-blocks' ), - align: 'center', - }, - { - icon: alignBottom, - title: __( 'Align columns bottom', 'wp-bootstrap-blocks' ), - align: 'bottom', - }, - ]; - - return ( - - { ! showTemplateSelector && ( - - - -
      - { templates.map( ( template, index ) => ( // eslint-disable-line no-shadow -
    • - { - onTemplateChange( index ); - } } - /> -
      • - ) ) } -
    - { enableCustomTemplate && ( - - ) } -     - - setAttributes( { noGutters: isChecked } ) } - /> - -     - - setAttributes( { alignment: newAlignment } ) } - alignmentControls={ alignmentControls } - /> - setAttributes( { verticalAlignment: newVerticalAlignment } ) } - alignmentControls={ verticalAlignmentControls } - /> - -     - ) } -
    - { - if ( nextTemplate === undefined ) { - nextTemplate = getColumnsTemplate( customTemplateColumnCount ); - setAttributes( { - isCustomTemplate: true, - } ); - } - - setTemplate( nextTemplate ); - setForceUseTemplate( true ); - } } - __experimentalAllowTemplateOptionSkip={ enableCustomTemplate } - templateLock={ getColumnsTemplateLock( isCustomTemplate ) } - /> -
    -     - ); - }, + edit, save() { return ( diff --git a/src/row/edit.js b/src/row/edit.js new file mode 100644 index 000000000..f41ee5468 --- /dev/null +++ b/src/row/edit.js @@ -0,0 +1,272 @@ +import times from 'lodash.times'; +import { alignBottom, alignCenter, alignTop } from './icons'; + +const { __ } = wp.i18n; // Import __() from wp.i18n +const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; +const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; +const { Component, Fragment } = wp.element; +const { dispatch, select } = wp.data; +const { applyFilters } = wp.hooks; + +const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; +let templates = [ + { + title: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ), + icon: , + template: [ + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 6, + }, + ], + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 6, + }, + ], + ], + }, + { + title: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ), + icon: , + template: [ + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 4, + }, + ], + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 8, + }, + ], + ], + }, + { + title: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ), + icon: , + template: [ + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 8, + }, + ], + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 4, + }, + ], + ], + }, + { + title: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ), + icon: , + template: [ + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 4, + }, + ], + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 4, + }, + ], + [ + 'wp-bootstrap-blocks/column', + { + sizeMd: 4, + }, + ], + ], + }, +]; +templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); + +const getColumnsTemplate = ( columnCount ) => { + if ( columnCount === undefined ) { + return null; + } + return times( columnCount, () => [ + 'wp-bootstrap-blocks/column', + { + sizeMd: columnCount ? 12 / columnCount : 12, + }, + ] ); +}; + +const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); +const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); + +const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'all'; + +export default class BootstrapRowEdit extends Component { + constructor( props ) { + super( ...props ); + const count = select( 'core/block-editor' ).getBlockCount( props.clientId ); + this.state = { + count, + template: getColumnsTemplate( count ), + forceUseTemplate: false, + } + } + + render() { + const { className, attributes, setAttributes, clientId } = this.props; + const { count, template, forceUseTemplate } = this.state; + const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; + + const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; + + const onTemplateChange = ( templateIndex ) => { + if ( templates[ templateIndex ] ) { + // Grab columns of existing block + const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks; + + // Update sizes to fit with selected template + cols.forEach( ( col, index ) => { + if ( templates[ templateIndex ].template.length > index ) { + const newAttributes = templates[ templateIndex ].template[ index ][ 1 ]; + dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); + } + } ); + + setAttributes( { + isCustomTemplate: false, + } ); + this.setState({ + template: templates[ templateIndex ].template, + }); + } + }; + + const alignmentControls = [ + { + icon: 'editor-alignleft', + title: __( 'Align columns left', 'wp-bootstrap-blocks' ), + align: 'left', + }, + { + icon: 'editor-aligncenter', + title: __( 'Align columns center', 'wp-bootstrap-blocks' ), + align: 'center', + }, + { + icon: 'editor-alignright', + title: __( 'Align columns right', 'wp-bootstrap-blocks' ), + align: 'right', + }, + ]; + + const verticalAlignmentControls = [ + { + icon: alignTop, + title: __( 'Align columns top', 'wp-bootstrap-blocks' ), + align: 'top', + }, + { + icon: alignCenter, + title: __( 'Align columns center', 'wp-bootstrap-blocks' ), + align: 'center', + }, + { + icon: alignBottom, + title: __( 'Align columns bottom', 'wp-bootstrap-blocks' ), + align: 'bottom', + }, + ]; + + return ( + + { ! showTemplateSelector && ( + + + +
      + { templates.map( ( template, index ) => ( // eslint-disable-line no-shadow +
    • + { + onTemplateChange( index ); + } } + /> +
      • + ) ) } +
    + { enableCustomTemplate && ( + + ) } +     + + setAttributes( { noGutters: isChecked } ) } + /> + +     + + setAttributes( { alignment: newAlignment } ) } + alignmentControls={ alignmentControls } + /> + setAttributes( { verticalAlignment: newVerticalAlignment } ) } + alignmentControls={ verticalAlignmentControls } + /> + +     + ) } +
    + { + if ( nextTemplate === undefined ) { + nextTemplate = getColumnsTemplate( customTemplateColumnCount ); + setAttributes( { + isCustomTemplate: true, + } ); + } + + this.setState({ + template: nextTemplate, + forceUseTemplate: true, + }); + } } + __experimentalAllowTemplateOptionSkip={ enableCustomTemplate } + templateLock={ getColumnsTemplateLock( isCustomTemplate ) } + /> +
    +     + ); + } +} From 90856d04e2ef2ebd01cdc801bdca6a68bd9faa6e Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 26 Jul 2019 13:42:02 +0200 Subject: [PATCH 08/16] eslint fixes --- src/row/edit.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/row/edit.js b/src/row/edit.js index f41ee5468..0c7dec796 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -110,20 +110,20 @@ const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'a export default class BootstrapRowEdit extends Component { constructor( props ) { - super( ...props ); + super( ...props ); const count = select( 'core/block-editor' ).getBlockCount( props.clientId ); this.state = { count, template: getColumnsTemplate( count ), forceUseTemplate: false, - } + }; } render() { const { className, attributes, setAttributes, clientId } = this.props; const { count, template, forceUseTemplate } = this.state; const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; - + const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; const onTemplateChange = ( templateIndex ) => { @@ -142,9 +142,9 @@ export default class BootstrapRowEdit extends Component { setAttributes( { isCustomTemplate: false, } ); - this.setState({ + this.setState( { template: templates[ templateIndex ].template, - }); + } ); } }; @@ -213,7 +213,7 @@ export default class BootstrapRowEdit extends Component { setAttributes( { isCustomTemplate: true, } ); - this.setState({ template: customTemplate }); + this.setState( { template: customTemplate } ); } } > { __( 'Or use custom layout' ) } @@ -257,10 +257,10 @@ export default class BootstrapRowEdit extends Component { } ); } - this.setState({ + this.setState( { template: nextTemplate, forceUseTemplate: true, - }); + } ); } } __experimentalAllowTemplateOptionSkip={ enableCustomTemplate } templateLock={ getColumnsTemplateLock( isCustomTemplate ) } From 7c2edfd39fced1473efa5288884685451cf8661b Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Sun, 28 Jul 2019 16:42:59 +0200 Subject: [PATCH 09/16] use withSelect / withDispatch instead of directly access functions --- src/row/edit.js | 75 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 53 insertions(+), 22 deletions(-) diff --git a/src/row/edit.js b/src/row/edit.js index 0c7dec796..d73262167 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -2,11 +2,14 @@ import times from 'lodash.times'; import { alignBottom, alignCenter, alignTop } from './icons'; const { __ } = wp.i18n; // Import __() from wp.i18n -const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; +const { InnerBlocks, InnerBlocksTemplatePicker, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; const { Component, Fragment } = wp.element; -const { dispatch, select } = wp.data; +const { withSelect, withDispatch } = wp.data; const { applyFilters } = wp.hooks; +const { compose } = wp.compose; + +const templatePickerAvailable = !!InnerBlocksTemplatePicker; const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; let templates = [ @@ -91,6 +94,9 @@ let templates = [ ]; templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates ); +const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); +const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); + const getColumnsTemplate = ( columnCount ) => { if ( columnCount === undefined ) { return null; @@ -102,40 +108,41 @@ const getColumnsTemplate = ( columnCount ) => { }, ] ); }; - -const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true ); -const customTemplateColumnCount = applyFilters( 'wpBootstrapBlocks.row.customTemplateColumnCount', 2 ); - +const getDefaultTemplate = () => templates.length > 0 ? templates[0].template : null; const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'all'; -export default class BootstrapRowEdit extends Component { +class BootstrapRowEdit extends Component { constructor( props ) { super( ...props ); - const count = select( 'core/block-editor' ).getBlockCount( props.clientId ); + let template = null; + if ( props.columnCount !== 0 ) { + template = getColumnsTemplate( props.columnCount ) + } else { + if ( templatePickerAvailable ) { + template = null; + } else { + template = getDefaultTemplate(); + } + } this.state = { - count, - template: getColumnsTemplate( count ), - forceUseTemplate: false, + template, }; } render() { - const { className, attributes, setAttributes, clientId } = this.props; - const { count, template, forceUseTemplate } = this.state; + const { className, attributes, setAttributes, columns, updateBlockAttributes } = this.props; + const { template } = this.state; const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; - const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template; + const showTemplateSelector = templatePickerAvailable && !template; const onTemplateChange = ( templateIndex ) => { if ( templates[ templateIndex ] ) { - // Grab columns of existing block - const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks; - // Update sizes to fit with selected template - cols.forEach( ( col, index ) => { + columns.forEach( ( column, index ) => { if ( templates[ templateIndex ].template.length > index ) { const newAttributes = templates[ templateIndex ].template[ index ][ 1 ]; - dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes ); + updateBlockAttributes( column.clientId, newAttributes ); } } ); @@ -245,9 +252,11 @@ export default class BootstrapRowEdit extends Component { ) }
    + { getColumnsTemplateLock( isCustomTemplate ) } { if ( nextTemplate === undefined ) { @@ -259,14 +268,36 @@ export default class BootstrapRowEdit extends Component { this.setState( { template: nextTemplate, - forceUseTemplate: true, } ); } } __experimentalAllowTemplateOptionSkip={ enableCustomTemplate } - templateLock={ getColumnsTemplateLock( isCustomTemplate ) } />
    ); } } + +const applyWithSelect = withSelect( ( select, { clientId } ) => { + const { getBlocksByClientId } = select( 'core/editor' ); + + const columns = getBlocksByClientId( clientId )[ 0 ].innerBlocks; + + return { + columnCount: columns.length, + columns, + }; +} ); + +const applyWithDispatch = withDispatch( ( dispatch ) => { + const { updateBlockAttributes } = dispatch( 'core/editor' ); + + return { + updateBlockAttributes, + }; +} ); + +export default compose( + applyWithSelect, + applyWithDispatch, +)( BootstrapRowEdit ); From c81e59f6890e140e2992824badea8a22179af85c Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Sun, 28 Jul 2019 16:50:05 +0200 Subject: [PATCH 10/16] fix code style --- src/row/edit.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/row/edit.js b/src/row/edit.js index d73262167..b8ab12c04 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -9,7 +9,7 @@ const { withSelect, withDispatch } = wp.data; const { applyFilters } = wp.hooks; const { compose } = wp.compose; -const templatePickerAvailable = !!InnerBlocksTemplatePicker; +const templatePickerAvailable = !! InnerBlocksTemplatePicker; const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ]; let templates = [ @@ -108,7 +108,7 @@ const getColumnsTemplate = ( columnCount ) => { }, ] ); }; -const getDefaultTemplate = () => templates.length > 0 ? templates[0].template : null; +const getDefaultTemplate = () => templates.length > 0 ? templates[ 0 ].template : null; const getColumnsTemplateLock = isCustomTemplate => isCustomTemplate ? false : 'all'; class BootstrapRowEdit extends Component { @@ -116,13 +116,11 @@ class BootstrapRowEdit extends Component { super( ...props ); let template = null; if ( props.columnCount !== 0 ) { - template = getColumnsTemplate( props.columnCount ) + template = getColumnsTemplate( props.columnCount ); + } else if ( templatePickerAvailable ) { + template = null; } else { - if ( templatePickerAvailable ) { - template = null; - } else { - template = getDefaultTemplate(); - } + template = getDefaultTemplate(); } this.state = { template, @@ -134,7 +132,7 @@ class BootstrapRowEdit extends Component { const { template } = this.state; const { isCustomTemplate, noGutters, alignment, verticalAlignment } = attributes; - const showTemplateSelector = templatePickerAvailable && !template; + const showTemplateSelector = templatePickerAvailable && ! template; const onTemplateChange = ( templateIndex ) => { if ( templates[ templateIndex ] ) { @@ -281,7 +279,7 @@ class BootstrapRowEdit extends Component { const applyWithSelect = withSelect( ( select, { clientId } ) => { const { getBlocksByClientId } = select( 'core/editor' ); - const columns = getBlocksByClientId( clientId )[ 0 ].innerBlocks; + const columns = getBlocksByClientId( clientId )[ 0 ] ? getBlocksByClientId( clientId )[ 0 ].innerBlocks : []; return { columnCount: columns.length, From f6dcf325b016e15de97d5db25d56a0b41cd85513 Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Sun, 28 Jul 2019 16:51:14 +0200 Subject: [PATCH 11/16] remove debug code --- src/row/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/row/edit.js b/src/row/edit.js index b8ab12c04..b9b896d3c 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -250,7 +250,6 @@ class BootstrapRowEdit extends Component { ) }
    - { getColumnsTemplateLock( isCustomTemplate ) } Date: Sun, 28 Jul 2019 17:09:00 +0200 Subject: [PATCH 12/16] fix setting attributes when first template is selected --- src/row/edit.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/row/edit.js b/src/row/edit.js index b9b896d3c..afba4ed60 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -144,9 +144,6 @@ class BootstrapRowEdit extends Component { } } ); - setAttributes( { - isCustomTemplate: false, - } ); this.setState( { template: templates[ templateIndex ].template, } ); @@ -204,6 +201,9 @@ class BootstrapRowEdit extends Component { label={ template.title } icon={ template.icon } onClick={ () => { + setAttributes( { + isCustomTemplate: false, + } ); onTemplateChange( index ); } } /> @@ -214,11 +214,9 @@ class BootstrapRowEdit extends Component {
    • ) ) }
diff --git a/src/row/editor.scss b/src/row/editor.scss index da67243f3..5c10024e2 100755 --- a/src/row/editor.scss +++ b/src/row/editor.scss @@ -101,7 +101,15 @@ } .wp-bootstrap-blocks-template-selector-button { - width: 25%; + flex: 0 0 50%; + + > .components-icon-button { + flex-direction: column; + } +} + +.wp-bootstrap-blocks-template-selector-button-label { + font-size: 12px; } // Column block From 0f5916ca9fab8f673712d681da479769ab1b3a36 Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Tue, 30 Jul 2019 08:50:52 +0200 Subject: [PATCH 15/16] add missing icon when template has no icon set --- src/row/edit.js | 10 +++++----- src/row/icons.js | 6 ++++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/row/edit.js b/src/row/edit.js index ea1e9fe32..947f391ed 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -1,5 +1,5 @@ import times from 'lodash.times'; -import { alignBottom, alignCenter, alignTop } from './icons'; +import { alignBottom, alignCenter, alignTop, templateIconMissing } from './icons'; const { __ } = wp.i18n; const { InnerBlocks, InnerBlocksTemplatePicker, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; @@ -18,14 +18,14 @@ const perpareTemplates = templates => { if ( Array.isArray( templates ) ) { return templates; } - return Object.keys( templates ).map(templateName => { + return Object.keys( templates ).map( templateName => { return { title: templates[ templateName ].title || templates[ templateName ].label, - icon: templates[ templateName ].icon, + icon: templates[ templateName ].icon || templateIconMissing, template: templates[ templateName ].template || templates[ templateName ].blocks, name: templateName, - } - }); + }; + } ); }; let templates = { diff --git a/src/row/icons.js b/src/row/icons.js index 76fc3e5bc..0f08e3568 100644 --- a/src/row/icons.js +++ b/src/row/icons.js @@ -25,3 +25,9 @@ export const alignTop = ( ); + +export const templateIconMissing = ( + + + +); From 663fa9b895f0942187b6549d3473b18e011d68e3 Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Tue, 30 Jul 2019 16:00:33 +0200 Subject: [PATCH 16/16] pass wp version and gutenberg version to javascript to conditionally enable template picker --- package-lock.json | 44 ++++++++++++++++++++++++++++--- package.json | 3 ++- src/class-wp-bootstrap-blocks.php | 14 +++++++++- src/row/edit.js | 11 ++++++-- 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc096259f..03168ade6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1107,6 +1107,11 @@ "caniuse-lite": "^1.0.30000844", "electron-to-chromium": "^1.3.47" } + }, + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" } } }, @@ -1929,6 +1934,13 @@ "semver": "^5.5.0", "shebang-command": "^1.2.0", "which": "^1.2.9" + }, + "dependencies": { + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + } } } } @@ -2400,6 +2412,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + }, "strip-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", @@ -4666,6 +4683,13 @@ "resolve": "^1.10.0", "semver": "2 || 3 || 4 || 5", "validate-npm-package-license": "^3.0.1" + }, + "dependencies": { + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + } } }, "normalize-path": { @@ -4906,6 +4930,13 @@ "registry-auth-token": "^3.0.1", "registry-url": "^3.0.3", "semver": "^5.1.0" + }, + "dependencies": { + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + } } }, "pako": { @@ -5653,9 +5684,9 @@ } }, "semver": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", - "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" }, "semver-diff": { "version": "2.1.0", @@ -5663,6 +5694,13 @@ "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=", "requires": { "semver": "^5.0.3" + }, + "dependencies": { + "semver": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==" + } } }, "set-blocking": { diff --git a/package.json b/package.json index 4af60f310..81a4a9d97 100755 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "cgb-scripts": "^1.18.1", "lodash.noop": "^3.0.1", - "lodash.times": "^4.3.2" + "lodash.times": "^4.3.2", + "semver": "^6.3.0" } } diff --git a/src/class-wp-bootstrap-blocks.php b/src/class-wp-bootstrap-blocks.php index f2d6858a3..b9be267a1 100755 --- a/src/class-wp-bootstrap-blocks.php +++ b/src/class-wp-bootstrap-blocks.php @@ -141,7 +141,7 @@ public function enqueue_block_assets() { */ public function enqueue_block_editor_assets() { // Scripts. - wp_enqueue_script( + wp_register_script( $this->token . '-js', // Handle. esc_url( $this->assets_url ) . 'blocks.build.js', // block.build.js: We register the block here. Built with Webpack. array( @@ -157,6 +157,18 @@ public function enqueue_block_editor_assets() { true // Enqueue the script in the footer. ); + global $wp_version; + wp_localize_script( + $this->token . '-js', + 'wpBootstrapBlocks', + array( + 'gutenbergVersion' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : false, + 'wpVersion' => $wp_version, + ) + ); + + wp_enqueue_script( $this->token . '-js' ); + // Styles. wp_enqueue_style( $this->token . '-editor-styles', // Handle. diff --git a/src/row/edit.js b/src/row/edit.js index 947f391ed..2a83eaf32 100644 --- a/src/row/edit.js +++ b/src/row/edit.js @@ -1,15 +1,22 @@ +/* global wpBootstrapBlocks */ import times from 'lodash.times'; import { alignBottom, alignCenter, alignTop, templateIconMissing } from './icons'; +const semver = require( 'semver' ); const { __ } = wp.i18n; -const { InnerBlocks, InnerBlocksTemplatePicker, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; +const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor; const { IconButton, Button, CheckboxControl, PanelBody, SVG, Path } = wp.components; const { Component, Fragment } = wp.element; const { withSelect, withDispatch } = wp.data; const { applyFilters } = wp.hooks; const { compose } = wp.compose; -const templatePickerAvailable = !! InnerBlocksTemplatePicker; +let templatePickerAvailable = false; +if ( wpBootstrapBlocks.gutenbergVersion ) { + templatePickerAvailable = semver.gte( wpBootstrapBlocks.gutenbergVersion, semver.coerce( '6.0' ) ); +} else { + templatePickerAvailable = semver.gte( wpBootstrapBlocks.wpVersion, semver.coerce( '6' ) ); // Since this feature is not yet in core we don't know the exact WordPress version. +} const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ];