From d1d47962652f3d60fc505fa851f435e81b5071fd Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 12 Jun 2019 14:41:37 -0400 Subject: [PATCH 01/17] Block Editor: Add template options support to InnerBlocks --- .../src/components/inner-blocks/README.md | 63 +++++++++++++++++++ .../src/components/inner-blocks/index.js | 28 +++++---- .../src/components/inner-blocks/style.scss | 61 ++++++++++++++++++ .../inner-blocks/template-picker.js | 58 +++++++++++++++++ 4 files changed, 197 insertions(+), 13 deletions(-) create mode 100644 packages/block-editor/src/components/inner-blocks/template-picker.js diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index ef8b015b713b50..f723d98e8b3873 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -90,6 +90,69 @@ const TEMPLATE = [ [ 'core/columns', {}, [ The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph. +### `templateOptions` + +* **Type:** `Array` + +To present the user with a set of template choices for the inner blocks, you may provide an array of template options. + +A template option is an object consisting of the following properties: + +- `title` (`string`): A human-readable label which describes the template. +- `icon` (`WPElement|string`): An element or [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug to show as a visual approximation of the template. +- `template` (`Array`): The template to apply when the option has been selected. See [`template` documentation](#template) for more information. + +For the template placeholder selection to be displayed, you must render `InnerBlocks` with a `template` prop value of `null`. You may track this as state of your component, updating its value when receiving the selected template via `onSelectTemplateOption`. + +```jsx +import { useState } from '@wordpress/element'; + +const TEMPLATE_OPTIONS = [ + { + title: 'Two Columns', + icon: , + template: [ + [ 'core/column', { width: 50 } ], + [ 'core/column', { width: 50 } ], + ], + }, + { + title: 'Three Columns', + icon: , + template: [ + [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: 33.33 } ], + ], + }, +]; + +function edit() { + const [ template, setTemplate ] = useState( null ); + + return ( + + ); +} +``` + +### `onSelectTemplateOption` + +* **Type:** `Function` + +Callback function invoked when the user makes a template selection, used in combination with the `templateOptions` props. The selected template is passed as the first and only argument. The value of the template may be `undefined` if the `allowTemplateOptionSkip` prop is passed to `InnerBlocks` and the user opts to skip template selection. + +### `allowTemplateOptionSkip` + +* **Type:** `Boolean` +* **Default:** `false` + +Whether to include a button in the template selection placeholder to allow the user to skip selection, used in combination with the `templateOptions` prop. When clicked, the `onSelectTemplateOption` callback will be passed an `undefined` value as the template. + ### `templateInsertUpdatesSelection` * **Type:** `Boolean` * **Default:** `true` diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 75a6731f42db57..abbc7c9a4e2e59 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -24,13 +24,11 @@ import DefaultBlockAppender from './default-block-appender'; */ import BlockList from '../block-list'; import { withBlockEditContext } from '../block-edit/context'; +import TemplatePicker from './template-picker'; class InnerBlocks extends Component { constructor() { super( ...arguments ); - this.state = { - templateInProcess: !! this.props.template, - }; this.updateNestedSettings(); } @@ -48,11 +46,6 @@ class InnerBlocks extends Component { if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) { this.synchronizeBlocksWithTemplate(); } - if ( this.state.templateInProcess ) { - this.setState( { - templateInProcess: false, - } ); - } } componentDidUpdate( prevProps ) { @@ -107,21 +100,30 @@ class InnerBlocks extends Component { clientId, hasOverlay, renderAppender, + template, + templateOptions, + onSelectTemplateOption, + allowTemplateOptionSkip, } = this.props; - const { templateInProcess } = this.state; + + const isPlaceholder = template === null && !! templateOptions; const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', { - 'has-overlay': hasOverlay, + 'has-overlay': hasOverlay && ! isPlaceholder, } ); return (
- { ! templateInProcess && ( + { isPlaceholder ? + : - ) } + /> }
); } diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index ff8e4b9adbe96a..e6a933869f2f4a 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -17,3 +17,64 @@ right: 0; left: 0; } + +.block-editor-inner-blocks__template-picker { + .components-placeholder__instructions { + // Defer to vertical margins applied by template picker options. + margin-bottom: 0; + } + + .components-placeholder__fieldset { + // Options will render horizontally, but the immediate children of the + // fieldset are the options and the skip button, oriented vertically. + flex-direction: column; + } + + &.has-many-options .components-placeholder__fieldset { + // Allow options to occupy a greater amount of the available space if + // many options exist. + max-width: 90%; + } +} + +.block-editor-inner-blocks__template-picker-options { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + margin: $grid-size-large 0; +} + +.block-editor-inner-blocks__template-picker-option { + flex-basis: 100%; + flex-shrink: 1; + max-width: 100px; + margin: 0 $grid-size; + + &.components-icon-button { + // Override default styles inherited from to center + // icon horizontally. + justify-content: center; + } + + &.components-button { + // Override default styles inherited from + + ) } + + ); +} + +export default InnerBlocksTemplatePicker; From 77ca437fb5bc8fe6db862bf0c9af560d04db3a37 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 12 Jun 2019 14:42:04 -0400 Subject: [PATCH 02/17] Block Library: Columns: Add template options --- packages/block-library/src/columns/block.json | 3 +- .../block-library/src/columns/deprecated.js | 28 ++++ packages/block-library/src/columns/edit.js | 124 +++++++++++++++--- packages/block-library/src/columns/save.js | 3 +- .../block-library/src/columns/test/utils.js | 6 + packages/block-library/src/columns/utils.js | 4 + 6 files changed, 147 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 267aef219883e2..6a8fdaf81d1518 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -3,8 +3,7 @@ "category": "layout", "attributes": { "columns": { - "type": "number", - "default": 2 + "type": "number" }, "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 7d3d16c770adbf..b60b86f3b1ff2b 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -6,6 +6,11 @@ import { InnerBlocks, } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import save from './save'; + /** * Given an HTML string for a deprecated columns inner block, returns the * column index to which the migrated inner block should be assigned. Returns @@ -96,4 +101,27 @@ export default [ ); }, }, + { + attributes: { + columns: { + type: 'number', + default: 2, + }, + }, + isEligible( attributes, innerBlocks ) { + return ( + ! attributes.hasOwnProperty( 'columns' ) && + innerBlocks.length + ); + }, + migrate( attributes, innerBlocks ) { + attributes = { + ...attributes, + columns: innerBlocks.length, + }; + + return [ attributes, innerBlocks ]; + }, + save, + }, ]; diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 71625625233815..b55dca24dd87ca 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -11,6 +11,8 @@ import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl, + SVG, + Path, } from '@wordpress/components'; import { InspectorControls, @@ -20,6 +22,7 @@ import { } from '@wordpress/block-editor'; import { withDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -43,6 +46,75 @@ import { */ const ALLOWED_BLOCKS = [ 'core/column' ]; +/** + * Template option choices for predefined columns layouts. + * + * @constant + * @type {Array} + */ +const TEMPLATE_OPTIONS = [ + { + title: __( 'Two columns; equal split' ), + icon: , + template: [ + [ 'core/column', { width: 50 } ], + [ 'core/column', { width: 50 } ], + ], + }, + { + title: __( 'Two columns; one-third, two-thirds split' ), + icon: , + template: [ + [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: 66.66 } ], + ], + }, + { + title: __( 'Two columns; two-thirds, one-third split' ), + icon: , + template: [ + [ 'core/column', { width: 66.66 } ], + [ 'core/column', { width: 33.33 } ], + ], + }, + { + title: __( 'Three columns; equal split' ), + icon: , + template: [ + [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: 33.33 } ], + ], + }, + { + title: __( 'Three columns; wide center column' ), + icon: , + template: [ + [ 'core/column', { width: 25 } ], + [ 'core/column', { width: 50 } ], + [ 'core/column', { width: 25 } ], + ], + }, + { + title: __( 'Four columns; equal split' ), + icon: , + template: [ + [ 'core/column', { width: 25 } ], + [ 'core/column', { width: 25 } ], + [ 'core/column', { width: 25 } ], + [ 'core/column', { width: 25 } ], + ], + }, +]; + +/** + * Number of columns to assume for template in case the user opts to skip + * template option selection. + * + * @type {Number} + */ +const SKIPPED_TEMPLATE_DEFAULT_COLUMNS = 2; + export function ColumnsEdit( { attributes, className, @@ -51,32 +123,48 @@ export function ColumnsEdit( { } ) { const { columns, verticalAlignment } = attributes; + const [ template, setTemplate ] = useState( getColumnsTemplate( columns ) ); + const classes = classnames( className, `has-${ columns }-columns`, { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); return ( <> - - - - - - - - + { template && ( + <> + + + + + + + + + + ) }
{ + if ( nextTemplate === undefined ) { + nextTemplate = getColumnsTemplate( SKIPPED_TEMPLATE_DEFAULT_COLUMNS ); + } + + updateColumns( nextTemplate.length ); + setTemplate( nextTemplate ); + } } + allowTemplateOptionSkip + template={ template } templateLock="all" allowedBlocks={ ALLOWED_BLOCKS } />
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 851a4270f7a4d6..74e4e7f8c5254d 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -11,7 +11,8 @@ import { InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { columns, verticalAlignment } = attributes; - const wrapperClasses = classnames( `has-${ columns }-columns`, { + const wrapperClasses = classnames( { + [ `has-${ columns }-columns` ]: columns > 0, [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js index cb69e1740e1f32..b89a63e2e01533 100644 --- a/packages/block-library/src/columns/test/utils.js +++ b/packages/block-library/src/columns/test/utils.js @@ -24,6 +24,12 @@ describe( 'getColumnsTemplate', () => { [ 'core/column' ], ] ); } ); + + it( 'should return null if columns count is not defined', () => { + const template = getColumnsTemplate( undefined ); + + expect( template ).toBe( null ); + } ); } ); describe( 'toWidthPrecision', () => { diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js index 0c4e4c59e9ccd3..77a0b7cf4375a8 100644 --- a/packages/block-library/src/columns/utils.js +++ b/packages/block-library/src/columns/utils.js @@ -12,6 +12,10 @@ import { times, findIndex, sumBy, merge, mapValues } from 'lodash'; * @return {Object[]} Columns layout configuration. */ export const getColumnsTemplate = memoize( ( columns ) => { + if ( columns === undefined ) { + return null; + } + return times( columns, () => [ 'core/column' ] ); } ); From 13bd06ed7adeed58a81a55cc65ed919b4f66c80f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 17 Jun 2019 09:41:11 +0100 Subject: [PATCH 03/17] Remove one option from the setup state of the columns block --- packages/block-library/src/columns/edit.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index b55dca24dd87ca..e7d8c3b3c58e1a 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -95,16 +95,6 @@ const TEMPLATE_OPTIONS = [ [ 'core/column', { width: 25 } ], ], }, - { - title: __( 'Four columns; equal split' ), - icon: , - template: [ - [ 'core/column', { width: 25 } ], - [ 'core/column', { width: 25 } ], - [ 'core/column', { width: 25 } ], - [ 'core/column', { width: 25 } ], - ], - }, ]; /** From 989702cf5b37d98cb2bbeb07121c6b9c48ac536f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 17 Jun 2019 09:45:58 +0100 Subject: [PATCH 04/17] Mark the template options API as experimental --- packages/block-editor/src/components/inner-blocks/README.md | 6 +++--- packages/block-editor/src/components/inner-blocks/index.js | 6 +++--- packages/block-library/src/columns/edit.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index f723d98e8b3873..69e953e3e8bdfb 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -90,7 +90,7 @@ const TEMPLATE = [ [ 'core/columns', {}, [ The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph. -### `templateOptions` +### `__experimentaltemplateOptions` * **Type:** `Array` @@ -140,13 +140,13 @@ function edit() { } ``` -### `onSelectTemplateOption` +### `__experimentalOnSelectTemplateOption` * **Type:** `Function` Callback function invoked when the user makes a template selection, used in combination with the `templateOptions` props. The selected template is passed as the first and only argument. The value of the template may be `undefined` if the `allowTemplateOptionSkip` prop is passed to `InnerBlocks` and the user opts to skip template selection. -### `allowTemplateOptionSkip` +### `__experimentalAllowTemplateOptionSkip` * **Type:** `Boolean` * **Default:** `false` diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index abbc7c9a4e2e59..dd22db13f8fda0 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -101,9 +101,9 @@ class InnerBlocks extends Component { hasOverlay, renderAppender, template, - templateOptions, - onSelectTemplateOption, - allowTemplateOptionSkip, + __experimentalTemplateOptions: templateOptions, + __experimentalOnSelectTemplateOption: onSelectTemplateOption, + __experimentalAllowTemplateOptionSkip: allowTemplateOptionSkip, } = this.props; const isPlaceholder = template === null && !! templateOptions; diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index e7d8c3b3c58e1a..84ee1432a33d12 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -144,8 +144,8 @@ export function ColumnsEdit( { ) }
{ + __experimentalTemplateOptions={ TEMPLATE_OPTIONS } + __experimentalOnSelectTemplateOption={ ( nextTemplate ) => { if ( nextTemplate === undefined ) { nextTemplate = getColumnsTemplate( SKIPPED_TEMPLATE_DEFAULT_COLUMNS ); } @@ -153,7 +153,7 @@ export function ColumnsEdit( { updateColumns( nextTemplate.length ); setTemplate( nextTemplate ); } } - allowTemplateOptionSkip + __experimentalAllowTemplateOptionSkip template={ template } templateLock="all" allowedBlocks={ ALLOWED_BLOCKS } /> From b41b489964cd7586ca20ec62db2f011ef169ae47 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 17 Jun 2019 11:56:14 +0100 Subject: [PATCH 05/17] Fix e2e tests --- .../src/components/inner-blocks/index.js | 32 ++++++++++----- packages/block-library/src/columns/edit.js | 41 +++++++++++-------- packages/e2e-tests/plugins/templates.php | 2 +- .../__snapshots__/writing-flow.test.js.snap | 2 +- .../specs/block-hierarchy-navigation.test.js | 2 + .../e2e-tests/specs/blocks/columns.test.js | 1 + .../__snapshots__/templates.test.js.snap | 4 +- packages/e2e-tests/specs/writing-flow.test.js | 1 + 8 files changed, 55 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index dd22db13f8fda0..0d1feef14ff39d 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,6 +29,9 @@ import TemplatePicker from './template-picker'; class InnerBlocks extends Component { constructor() { super( ...arguments ); + this.state = { + templateInProcess: !! this.props.template, + }; this.updateNestedSettings(); } @@ -46,6 +49,12 @@ class InnerBlocks extends Component { if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) { this.synchronizeBlocksWithTemplate(); } + + if ( this.state.templateInProcess ) { + this.setState( { + templateInProcess: false, + } ); + } } componentDidUpdate( prevProps ) { @@ -105,6 +114,7 @@ class InnerBlocks extends Component { __experimentalOnSelectTemplateOption: onSelectTemplateOption, __experimentalAllowTemplateOptionSkip: allowTemplateOptionSkip, } = this.props; + const { templateInProcess } = this.state; const isPlaceholder = template === null && !! templateOptions; @@ -114,16 +124,18 @@ class InnerBlocks extends Component { return (
- { isPlaceholder ? - : - } + { ! templateInProcess && ( + isPlaceholder ? + : + + ) }
); } diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 84ee1432a33d12..ca0ffe99f6b3ba 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { dropRight } from 'lodash'; +import { dropRight, times } from 'lodash'; /** * WordPress dependencies @@ -57,8 +57,8 @@ const TEMPLATE_OPTIONS = [ title: __( 'Two columns; equal split' ), icon: , template: [ - [ 'core/column', { width: 50 } ], - [ 'core/column', { width: 50 } ], + [ 'core/column' ], + [ 'core/column' ], ], }, { @@ -81,9 +81,9 @@ const TEMPLATE_OPTIONS = [ title: __( 'Three columns; equal split' ), icon: , template: [ - [ 'core/column', { width: 33.33 } ], - [ 'core/column', { width: 33.33 } ], - [ 'core/column', { width: 33.33 } ], + [ 'core/column' ], + [ 'core/column' ], + [ 'core/column' ], ], }, { @@ -202,15 +202,13 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { setAttributes( { columns } ); let innerBlocks = getBlocks( clientId ); - if ( ! hasExplicitColumnWidths( innerBlocks ) ) { - return; - } + const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks ); // Redistribute available width for existing inner blocks. const { columns: previousColumns } = attributes; const isAddingColumn = columns > previousColumns; - if ( isAddingColumn ) { + if ( isAddingColumn && hasExplicitWidths ) { // If adding a new column, assign width to the new column equal to // as if it were `1 / columns` of the total available space. const newColumnWidth = toWidthPrecision( 100 / columns ); @@ -221,18 +219,29 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { innerBlocks = [ ...getMappedColumnWidths( innerBlocks, widths ), - createBlock( 'core/column', { - width: newColumnWidth, + ...times( columns - previousColumns, () => { + return createBlock( 'core/column', { + width: newColumnWidth, + } ); + } ), + ]; + } else if ( isAddingColumn ) { + innerBlocks = [ + ...innerBlocks, + ...times( columns - previousColumns, () => { + return createBlock( 'core/column', ); } ), ]; } else { // The removed column will be the last of the inner blocks. - innerBlocks = dropRight( innerBlocks ); + innerBlocks = dropRight( innerBlocks, previousColumns - columns ); - // Redistribute as if block is already removed. - const widths = getRedistributedColumnWidths( innerBlocks, 100 ); + if ( hasExplicitWidths ) { + // Redistribute as if block is already removed. + const widths = getRedistributedColumnWidths( innerBlocks, 100 ); - innerBlocks = getMappedColumnWidths( innerBlocks, widths ); + innerBlocks = getMappedColumnWidths( innerBlocks, widths ); + } } replaceInnerBlocks( clientId, innerBlocks, false ); diff --git a/packages/e2e-tests/plugins/templates.php b/packages/e2e-tests/plugins/templates.php index b4d399905c68eb..f245813dfce294 100644 --- a/packages/e2e-tests/plugins/templates.php +++ b/packages/e2e-tests/plugins/templates.php @@ -26,7 +26,7 @@ function gutenberg_test_templates_register_book_type() { array( 'core/quote' ), array( 'core/columns', - array(), + array( 'columns' => 2 ), array( array( 'core/column', diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index 7852dacfc4174f..ba03d8e24ec8d2 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -5,7 +5,7 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `

First paragraph

- +

First col

diff --git a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js index 56d1ce2c3694b2..3f0e1c8c3f55c7 100644 --- a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js @@ -20,6 +20,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate using the block hierarchy dropdown menu', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await pressKeyTimes( 'Tab', 5 ); // Tab to inserter. @@ -61,6 +62,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. await pressKeyTimes( 'Tab', 5 ); // Tab to inserter. diff --git a/packages/e2e-tests/specs/blocks/columns.test.js b/packages/e2e-tests/specs/blocks/columns.test.js index fd061642478e74..4372f5ee6dbeb9 100644 --- a/packages/e2e-tests/specs/blocks/columns.test.js +++ b/packages/e2e-tests/specs/blocks/columns.test.js @@ -16,6 +16,7 @@ describe( 'Columns', () => { it( 'restricts all blocks inside the columns block', async () => { await insertBlock( 'Columns' ); + await page.click( '[aria-label="Two columns; equal split"]' ); await page.click( '[aria-label="Block Navigation"]' ); const columnBlockMenuItem = ( await page.$x( '//button[contains(concat(" ", @class, " "), " block-editor-block-navigation__item-button ")][text()="Column"]' ) )[ 0 ]; await columnBlockMenuItem.click(); diff --git a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap index 52f4469dddeeae..b6115c32f56f51 100644 --- a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap +++ b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap @@ -13,7 +13,7 @@ exports[`templates Using a CPT with a predefined template Should add a custom po

- +
\\"\\"/
@@ -39,7 +39,7 @@ exports[`templates Using a CPT with a predefined template Should respect user ed

- +
\\"\\"/
diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index 5bcf9869c86469..b9ac58f46fd405 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -28,6 +28,7 @@ describe( 'adding blocks', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/columns' ); await page.keyboard.press( 'Enter' ); + await page.click( ':focus [aria-label="Two columns; equal split"]' ); await page.click( ':focus .block-editor-button-block-appender' ); await page.waitForSelector( ':focus.block-editor-inserter__search' ); await page.keyboard.type( 'Paragraph' ); From 502cfcd89e4b677fd02016371f0e7bae586d9ad2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 18 Jun 2019 13:30:55 +0100 Subject: [PATCH 06/17] Rename default columns constant --- packages/block-library/src/columns/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index ca0ffe99f6b3ba..ec8dce62953cb4 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -103,7 +103,7 @@ const TEMPLATE_OPTIONS = [ * * @type {Number} */ -const SKIPPED_TEMPLATE_DEFAULT_COLUMNS = 2; +const DEFAULT_COLUMNS = 2; export function ColumnsEdit( { attributes, @@ -147,7 +147,7 @@ export function ColumnsEdit( { __experimentalTemplateOptions={ TEMPLATE_OPTIONS } __experimentalOnSelectTemplateOption={ ( nextTemplate ) => { if ( nextTemplate === undefined ) { - nextTemplate = getColumnsTemplate( SKIPPED_TEMPLATE_DEFAULT_COLUMNS ); + nextTemplate = getColumnsTemplate( DEFAULT_COLUMNS ); } updateColumns( nextTemplate.length ); From 70934276838b86161a44f3f42c4d123e86de0ee2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 18 Jun 2019 13:39:26 +0100 Subject: [PATCH 07/17] Use ul/li for a11y reasons --- .../src/components/inner-blocks/style.scss | 15 ++++++---- .../inner-blocks/template-picker.js | 29 ++++++++++++------- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index e6a933869f2f4a..6851d77b44acda 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -37,19 +37,24 @@ } } -.block-editor-inner-blocks__template-picker-options { +.block-editor-inner-blocks__template-picker-options.block-editor-inner-blocks__template-picker-options { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; margin: $grid-size-large 0; + list-style: none; + + > li { + flex-basis: 100%; + flex-shrink: 1; + margin: 0 $grid-size; + max-width: 100px; + } } .block-editor-inner-blocks__template-picker-option { - flex-basis: 100%; - flex-shrink: 1; - max-width: 100px; - margin: 0 $grid-size; + width: 100%; &.components-icon-button { // Override default styles inherited from to center diff --git a/packages/block-editor/src/components/inner-blocks/template-picker.js b/packages/block-editor/src/components/inner-blocks/template-picker.js index 3b75b23ac7a644..8afc65a34e25eb 100644 --- a/packages/block-editor/src/components/inner-blocks/template-picker.js +++ b/packages/block-editor/src/components/inner-blocks/template-picker.js @@ -29,18 +29,27 @@ function InnerBlocksTemplatePicker( { instructions={ instructions } className={ classes } > -
+ { + /* + * Disable reason: The `list` ARIA role is redundant but + * Safari+VoiceOver won't announce the list otherwise. + */ + /* eslint-disable jsx-a11y/no-redundant-roles */ + } +
    { options.map( ( templateOption, index ) => ( - onSelect( templateOption.template ) } - className="block-editor-inner-blocks__template-picker-option" - label={ templateOption.title } - /> +
  • + onSelect( templateOption.template ) } + className="block-editor-inner-blocks__template-picker-option" + label={ templateOption.title } + /> +
    • ) ) } -
+ + { /* eslint-enable jsx-a11y/no-redundant-roles */ } { allowSkip && (
@@ -198,14 +206,11 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); const { getBlocks } = registry.select( 'core/block-editor' ); - // Update columns count. - setAttributes( { columns } ); - let innerBlocks = getBlocks( clientId ); const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks ); // Redistribute available width for existing inner blocks. - const { columns: previousColumns } = attributes; + const { columns: previousColumns = 0 } = attributes; const isAddingColumn = columns > previousColumns; if ( isAddingColumn && hasExplicitWidths ) { @@ -245,5 +250,8 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { } replaceInnerBlocks( clientId, innerBlocks, false ); + + // Update columns count. + setAttributes( { columns } ); }, } ) )( ColumnsEdit ); From cc37d0950ad179d901dd3ba7dae47f885e34015b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 09:22:52 +0100 Subject: [PATCH 09/17] Fix block template selection --- packages/block-library/src/columns/block.json | 3 -- .../block-library/src/columns/deprecated.js | 24 ++++++++--- packages/block-library/src/columns/edit.js | 43 +++++++++++-------- packages/block-library/src/columns/save.js | 3 +- 4 files changed, 44 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 6a8fdaf81d1518..3c22ca71fba621 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -2,9 +2,6 @@ "name": "core/columns", "category": "layout", "attributes": { - "columns": { - "type": "number" - }, "verticalAlignment": { "type": "string" } diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index b60b86f3b1ff2b..12cec63c51e589 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -6,11 +11,6 @@ import { InnerBlocks, } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import save from './save'; - /** * Given an HTML string for a deprecated columns inner block, returns the * column index to which the migrated inner block should be assigned. Returns @@ -122,6 +122,18 @@ export default [ return [ attributes, innerBlocks ]; }, - save, + save( { attributes } ) { + const { verticalAlignment, columns } = attributes; + + const wrapperClasses = classnames( `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + return ( +
+ +
+ ); + }, }, ]; diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 6d3b4c135302ad..bfac7bd60c0562 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -21,7 +21,7 @@ import { BlockVerticalAlignmentToolbar, } from '@wordpress/block-editor'; import { withDispatch, useSelect } from '@wordpress/data'; -import { createBlock } from '@wordpress/blocks'; +import { createBlock, synchronizeBlocksWithTemplate } from '@wordpress/blocks'; import { useState } from '@wordpress/element'; /** @@ -110,18 +110,19 @@ export function ColumnsEdit( { className, updateAlignment, updateColumns, + updateTemplate, clientId, } ) { - const { columns, verticalAlignment } = attributes; + const { verticalAlignment } = attributes; const { count } = useSelect( ( select ) => { return { count: select( 'core/block-editor' ).getBlockCount( clientId ), }; } ); - const [ template, setTemplate ] = useState( getColumnsTemplate( columns ) ); + const [ template, setTemplate ] = useState( getColumnsTemplate( count ) ); - const classes = classnames( className, `has-${ columns }-columns`, { + const classes = classnames( className, { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); @@ -133,8 +134,8 @@ export function ColumnsEdit( { updateColumns( count, value ) } min={ 2 } max={ 6 } /> @@ -157,7 +158,7 @@ export function ColumnsEdit( { } setTemplate( nextTemplate ); - updateColumns( nextTemplate.length ); + updateTemplate( nextTemplate ); } } __experimentalAllowTemplateOptionSkip // setting the template to null when the inner blocks @@ -199,10 +200,11 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { * Updates the column count, including necessary revisions to child Column * blocks to grant required or redistribute available space. * - * @param {number} columns New column count. + * @param {number} previousColumns Previous column count. + * @param {number} newColumns New column count. */ - updateColumns( columns ) { - const { clientId, setAttributes, attributes } = ownProps; + updateColumns( previousColumns, newColumns ) { + const { clientId } = ownProps; const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); const { getBlocks } = registry.select( 'core/block-editor' ); @@ -210,13 +212,12 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks ); // Redistribute available width for existing inner blocks. - const { columns: previousColumns = 0 } = attributes; - const isAddingColumn = columns > previousColumns; + const isAddingColumn = newColumns > previousColumns; if ( isAddingColumn && hasExplicitWidths ) { // If adding a new column, assign width to the new column equal to // as if it were `1 / columns` of the total available space. - const newColumnWidth = toWidthPrecision( 100 / columns ); + const newColumnWidth = toWidthPrecision( 100 / newColumns ); // Redistribute in consideration of pending block insertion as // constraining the available working width. @@ -224,7 +225,7 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { innerBlocks = [ ...getMappedColumnWidths( innerBlocks, widths ), - ...times( columns - previousColumns, () => { + ...times( newColumns - previousColumns, () => { return createBlock( 'core/column', { width: newColumnWidth, } ); @@ -233,13 +234,13 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { } else if ( isAddingColumn ) { innerBlocks = [ ...innerBlocks, - ...times( columns - previousColumns, () => { + ...times( newColumns - previousColumns, () => { return createBlock( 'core/column', ); } ), ]; } else { // The removed column will be the last of the inner blocks. - innerBlocks = dropRight( innerBlocks, previousColumns - columns ); + innerBlocks = dropRight( innerBlocks, previousColumns - newColumns ); if ( hasExplicitWidths ) { // Redistribute as if block is already removed. @@ -250,8 +251,14 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { } replaceInnerBlocks( clientId, innerBlocks, false ); + }, - // Update columns count. - setAttributes( { columns } ); + updateTemplate( template ) { + const { clientId } = ownProps; + const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); + const { getBlocks } = registry.select( 'core/block-editor' ); + const innerBlocks = getBlocks( clientId ); + const nextBlocks = synchronizeBlocksWithTemplate( innerBlocks, template ); + replaceInnerBlocks( clientId, nextBlocks, false ); }, } ) )( ColumnsEdit ); diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 74e4e7f8c5254d..8f9b8c2d673620 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -9,10 +9,9 @@ import classnames from 'classnames'; import { InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { columns, verticalAlignment } = attributes; + const { verticalAlignment } = attributes; const wrapperClasses = classnames( { - [ `has-${ columns }-columns` ]: columns > 0, [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); From 398b5f1884d4aa2eced2b1fe6249844f5b3549e5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 11:22:13 +0100 Subject: [PATCH 10/17] Try to fix e2e and unit tests --- .../block-library/src/columns/deprecated.js | 6 ---- packages/block-library/src/columns/edit.js | 28 +++++++++---------- .../fixtures/blocks/core__columns.html | 4 +-- .../fixtures/blocks/core__columns.json | 6 ++-- .../fixtures/blocks/core__columns.parsed.json | 8 ++---- .../blocks/core__columns.serialized.html | 4 +-- .../blocks/core__columns__deprecated.json | 4 +-- .../core__columns__deprecated.serialized.html | 4 +-- .../block-hierarchy-navigation.test.js.snap | 8 +++--- .../__snapshots__/writing-flow.test.js.snap | 4 +-- .../__snapshots__/templates.test.js.snap | 8 +++--- 11 files changed, 37 insertions(+), 47 deletions(-) diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 12cec63c51e589..26bf2af22bba2b 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -108,12 +108,6 @@ export default [ default: 2, }, }, - isEligible( attributes, innerBlocks ) { - return ( - ! attributes.hasOwnProperty( 'columns' ) && - innerBlocks.length - ); - }, migrate( attributes, innerBlocks ) { attributes = { ...attributes, diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index bfac7bd60c0562..a2535804102c9f 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -21,8 +21,8 @@ import { BlockVerticalAlignmentToolbar, } from '@wordpress/block-editor'; import { withDispatch, useSelect } from '@wordpress/data'; -import { createBlock, synchronizeBlocksWithTemplate } from '@wordpress/blocks'; -import { useState } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; +import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -110,7 +110,6 @@ export function ColumnsEdit( { className, updateAlignment, updateColumns, - updateTemplate, clientId, } ) { const { verticalAlignment } = attributes; @@ -121,6 +120,16 @@ export function ColumnsEdit( { }; } ); const [ template, setTemplate ] = useState( getColumnsTemplate( count ) ); + const [ forceUseTemplate, setForceUseTemplate ] = useState( false ); + + // This is used to force the usage of the template even if the count doesn't match the template + // The count doesn't match the template once you use undo/redo (this is used to reset to the placeholder state). + useEffect( () => { + // Once the template is applied, reset it. + if ( forceUseTemplate ) { + setForceUseTemplate( false ); + } + }, [ forceUseTemplate ] ); const classes = classnames( className, { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, @@ -158,12 +167,12 @@ export function ColumnsEdit( { } setTemplate( nextTemplate ); - updateTemplate( nextTemplate ); + setForceUseTemplate( true ); } } __experimentalAllowTemplateOptionSkip // setting the template to null when the inner blocks // are empty allows to reset to the placeholder state. - template={ count === 0 ? null : template } + template={ count === 0 && ! forceUseTemplate ? null : template } templateLock="all" allowedBlocks={ ALLOWED_BLOCKS } />
@@ -252,13 +261,4 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { replaceInnerBlocks( clientId, innerBlocks, false ); }, - - updateTemplate( template ) { - const { clientId } = ownProps; - const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); - const { getBlocks } = registry.select( 'core/block-editor' ); - const innerBlocks = getBlocks( clientId ); - const nextBlocks = synchronizeBlocksWithTemplate( innerBlocks, template ); - replaceInnerBlocks( clientId, nextBlocks, false ); - }, } ) )( ColumnsEdit ); diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.html b/packages/e2e-tests/fixtures/blocks/core__columns.html index bcced4e7b9f244..10316fc04d135a 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.html +++ b/packages/e2e-tests/fixtures/blocks/core__columns.html @@ -1,5 +1,5 @@ - -
+ +
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json index 2a446b72dc79d0..d2c4a123741dc5 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns.json @@ -3,9 +3,7 @@ "clientId": "_clientId_0", "name": "core/columns", "isValid": true, - "attributes": { - "columns": 3 - }, + "attributes": {}, "innerBlocks": [ { "clientId": "_clientId_0", @@ -70,6 +68,6 @@ "originalContent": "
\n\t\t\n\t\t\n\t
" } ], - "originalContent": "
\n\t\n\t\n
" + "originalContent": "
\n\t\n\t\n
" } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json index 7dbde278bc08c6..e3a1d3c00b0b15 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json @@ -1,9 +1,7 @@ [ { "blockName": "core/columns", - "attrs": { - "columns": 3 - }, + "attrs": {}, "innerBlocks": [ { "blockName": "core/column", @@ -70,9 +68,9 @@ ] } ], - "innerHTML": "\n
\n\t\n\t\n
\n", + "innerHTML": "\n
\n\t\n\t\n
\n", "innerContent": [ - "\n
\n\t", + "\n
\n\t", null, "\n\t", null, diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html index b7472ac094fbbb..47dcbe2fa69175 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html @@ -1,5 +1,5 @@ - -
+ +

Column One, Paragraph One

diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json index 6993fb5da69c4a..29c4e1ce9609ba 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json @@ -2,8 +2,8 @@ { "clientId": "_clientId_0", "name": "core/columns", - "isValid": true, - "attributes": { + "isValid": true, + "attributes": { "columns": 3 }, "innerBlocks": [ diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html index 88041c92cb39d3..d8271e568f7af3 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html @@ -1,5 +1,5 @@ - -
+ +

Column One, Paragraph One

diff --git a/packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap index dc278255bc8565..4ee1d7710bbe18 100644 --- a/packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -11,8 +11,8 @@ exports[`Navigating the block hierarchy should appear and function even without `; exports[`Navigating the block hierarchy should navigate block hierarchy using only the keyboard 1`] = ` -" -
+" +

First column

@@ -31,8 +31,8 @@ exports[`Navigating the block hierarchy should navigate block hierarchy using on `; exports[`Navigating the block hierarchy should navigate using the block hierarchy dropdown menu 1`] = ` -" -
+" +

First column

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index ba03d8e24ec8d2..e693daea38401b 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -5,8 +5,8 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `

First paragraph

- -
+ +

First col

diff --git a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap index b6115c32f56f51..f089390857781a 100644 --- a/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap +++ b/packages/e2e-tests/specs/plugins/__snapshots__/templates.test.js.snap @@ -13,8 +13,8 @@ exports[`templates Using a CPT with a predefined template Should add a custom po

- -
+ +
\\"\\"/
@@ -39,8 +39,8 @@ exports[`templates Using a CPT with a predefined template Should respect user ed

- -
+ +
\\"\\"/
From 3d246ae2c81316f506c1864458883ed03da0da60 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 15:11:38 +0200 Subject: [PATCH 11/17] Remove unnecessary comma Co-Authored-By: Andrew Duthie --- packages/block-library/src/columns/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index a2535804102c9f..d573500cd551d9 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -244,7 +244,7 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { innerBlocks = [ ...innerBlocks, ...times( newColumns - previousColumns, () => { - return createBlock( 'core/column', ); + return createBlock( 'core/column' ); } ), ]; } else { From 068e9bf2f6ab267d7f83a373eb8718e6aaff9c14 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 14:16:05 +0100 Subject: [PATCH 12/17] regenerate fixtures --- .../e2e-tests/fixtures/blocks/core__columns__deprecated.json | 4 ++-- test/integration/full-content/server-registered.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json index 29c4e1ce9609ba..6993fb5da69c4a 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json @@ -2,8 +2,8 @@ { "clientId": "_clientId_0", "name": "core/columns", - "isValid": true, - "attributes": { + "isValid": true, + "attributes": { "columns": 3 }, "innerBlocks": [ diff --git a/test/integration/full-content/server-registered.json b/test/integration/full-content/server-registered.json index 49912d76c49605..3915c3edec678b 100644 --- a/test/integration/full-content/server-registered.json +++ b/test/integration/full-content/server-registered.json @@ -1 +1 @@ -{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"className":{"type":"string"},"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}} \ No newline at end of file +{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}} \ No newline at end of file From 81096014c43d6821505eea919503a205f7b3070f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 14:41:47 +0100 Subject: [PATCH 13/17] Remove the migrate function --- packages/block-library/src/columns/deprecated.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 26bf2af22bba2b..827971b577e0d5 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -108,14 +108,6 @@ export default [ default: 2, }, }, - migrate( attributes, innerBlocks ) { - attributes = { - ...attributes, - columns: innerBlocks.length, - }; - - return [ attributes, innerBlocks ]; - }, save( { attributes } ) { const { verticalAlignment, columns } = attributes; From f5b581adc2dfcedd48683e94089d78bbe7139182 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 14:49:35 +0100 Subject: [PATCH 14/17] omit the columns attribute while migrating --- packages/block-library/src/columns/deprecated.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 827971b577e0d5..3e6d23cb73f3c2 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { omit } from 'lodash'; import classnames from 'classnames'; /** @@ -108,6 +109,11 @@ export default [ default: 2, }, }, + migrate( attributes, innerBlocks ) { + attributes = omit( attributes, [ 'columns' ] ); + + return [ attributes, innerBlocks ]; + }, save( { attributes } ) { const { verticalAlignment, columns } = attributes; From 409e48c6fbf75dcaf3107dd1abd847cbebbf412a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 14:55:41 +0100 Subject: [PATCH 15/17] Use white backgrounds --- packages/block-editor/src/components/inner-blocks/style.scss | 4 ++++ packages/block-library/src/columns/deprecated.js | 2 +- .../e2e-tests/fixtures/blocks/core__columns__deprecated.json | 4 +--- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index 6851d77b44acda..71e934350e541b 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -60,6 +60,10 @@ // Override default styles inherited from to center // icon horizontally. justify-content: center; + + &.is-default { + background-color: $white; + } } &.components-button { diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 3e6d23cb73f3c2..56ffe5d90bc6a1 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -88,7 +88,7 @@ export default [ ) ); return [ - attributes, + omit( attributes, [ 'columns' ] ), migratedInnerBlocks, ]; }, diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json index 6993fb5da69c4a..c5ad0b8151b8e3 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json @@ -3,9 +3,7 @@ "clientId": "_clientId_0", "name": "core/columns", "isValid": true, - "attributes": { - "columns": 3 - }, + "attributes": {}, "innerBlocks": [ { "clientId": "_clientId_0", From ddc187bc03d4217032adc157491fe3fb9bd4f2d0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 18:06:00 +0100 Subject: [PATCH 16/17] Clarify experimental props in the docs --- .../src/components/inner-blocks/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index 69e953e3e8bdfb..303e24730f7fe3 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -90,7 +90,7 @@ const TEMPLATE = [ [ 'core/columns', {}, [ The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph. -### `__experimentaltemplateOptions` +### `__experimentalTemplateOptions` * **Type:** `Array` @@ -102,7 +102,7 @@ A template option is an object consisting of the following properties: - `icon` (`WPElement|string`): An element or [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug to show as a visual approximation of the template. - `template` (`Array`): The template to apply when the option has been selected. See [`template` documentation](#template) for more information. -For the template placeholder selection to be displayed, you must render `InnerBlocks` with a `template` prop value of `null`. You may track this as state of your component, updating its value when receiving the selected template via `onSelectTemplateOption`. +For the template placeholder selection to be displayed, you must render `InnerBlocks` with a `template` prop value of `null`. You may track this as state of your component, updating its value when receiving the selected template via `__experimentalOnSelectTemplateOption`. ```jsx import { useState } from '@wordpress/element'; @@ -133,8 +133,8 @@ function edit() { return ( ); } @@ -144,14 +144,14 @@ function edit() { * **Type:** `Function` -Callback function invoked when the user makes a template selection, used in combination with the `templateOptions` props. The selected template is passed as the first and only argument. The value of the template may be `undefined` if the `allowTemplateOptionSkip` prop is passed to `InnerBlocks` and the user opts to skip template selection. +Callback function invoked when the user makes a template selection, used in combination with the `__experimentalTemplateOptions` props. The selected template is passed as the first and only argument. The value of the template may be `undefined` if the `__experimentalAllowTemplateOptionSkip` prop is passed to `InnerBlocks` and the user opts to skip template selection. ### `__experimentalAllowTemplateOptionSkip` * **Type:** `Boolean` * **Default:** `false` -Whether to include a button in the template selection placeholder to allow the user to skip selection, used in combination with the `templateOptions` prop. When clicked, the `onSelectTemplateOption` callback will be passed an `undefined` value as the template. +Whether to include a button in the template selection placeholder to allow the user to skip selection, used in combination with the `__experimentalTemplateOptions` prop. When clicked, the `__experimentalOnSelectTemplateOption` callback will be passed an `undefined` value as the template. ### `templateInsertUpdatesSelection` * **Type:** `Boolean` From 60b7c502abeb232914f710f1b4263060f323c360 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 24 Jun 2019 18:10:12 +0100 Subject: [PATCH 17/17] Increase the specificity of the list styling in the TemplatePicker --- packages/block-editor/src/components/inner-blocks/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index 71e934350e541b..0f8576fd5ecf34 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -46,6 +46,7 @@ list-style: none; > li { + list-style: none; flex-basis: 100%; flex-shrink: 1; margin: 0 $grid-size;