diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 2587229664bfe5..ecf3a49aa10095 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { forEach, find, difference } from 'lodash'; /** * WordPress dependencies @@ -11,31 +10,16 @@ import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar, - InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { - toWidthPrecision, - getTotalColumnsWidth, - getColumnWidths, - getAdjacentBlocks, - getRedistributedColumnWidths, -} from '../columns/utils'; function ColumnEdit( { attributes, updateAlignment, - updateWidth, hasChildBlocks, } ) { - const { verticalAlignment, width } = attributes; + const { verticalAlignment } = attributes; const classes = classnames( 'block-core-columns', { [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, @@ -49,19 +33,6 @@ function ColumnEdit( { value={ verticalAlignment } /> - - - - - { - updateBlockAttributes( columnClientId, { width: nextColumnWidth } ); - } ); - }, }; } ) )( ColumnEdit ); diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 71625625233815..b976ddc91b55da 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -2,12 +2,12 @@ * External dependencies */ import classnames from 'classnames'; -import { dropRight } from 'lodash'; +import { dropRight, forEach, find, difference } from 'lodash'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { PanelBody, RangeControl, @@ -18,7 +18,7 @@ import { BlockControls, BlockVerticalAlignmentToolbar, } from '@wordpress/block-editor'; -import { withDispatch } from '@wordpress/data'; +import { withDispatch, useSelect } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; /** @@ -30,6 +30,9 @@ import { getMappedColumnWidths, getRedistributedColumnWidths, toWidthPrecision, + getTotalColumnsWidth, + getColumnWidths, + getAdjacentBlocks, } from './utils'; /** @@ -44,10 +47,12 @@ import { const ALLOWED_BLOCKS = [ 'core/column' ]; export function ColumnsEdit( { + clientId, attributes, className, updateAlignment, updateColumns, + updateColumnWidth, } ) { const { columns, verticalAlignment } = attributes; @@ -55,6 +60,10 @@ export function ColumnsEdit( { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); + const columnBlocks = useSelect( ( select ) => ( + select( 'core/block-editor' ).getBlocks( clientId ) + ) ); + return ( <> @@ -67,6 +76,27 @@ export function ColumnsEdit( { max={ 6 } /> + + { columnBlocks.map( ( columnBlock, index ) => ( +
+ { sprintf( __( 'Column %d' ), index + 1 ) } + { + updateColumnWidth( columnBlock.clientId, nextWidth ); + } } + min={ 0 } + max={ 100 } + required + allowReset + /> +
+ ) ) } + ( { * 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 {string} clientId Client ID of column block for which to update + * width attribute. + * @param {number} columns New column count. */ - updateColumns( columns ) { - const { clientId, setAttributes, attributes } = ownProps; + updateColumns( clientId, columns ) { + const { setAttributes, attributes } = ownProps; const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); const { getBlocks } = registry.select( 'core/block-editor' ); @@ -159,4 +191,37 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( { replaceInnerBlocks( clientId, innerBlocks, false ); }, + + updateColumnWidth( clientId, width ) { + const { updateBlockAttributes } = dispatch( 'core/block-editor' ); + const { getBlockRootClientId, getBlocks } = registry.select( 'core/block-editor' ); + + // Constrain or expand siblings to account for gain or loss of + // total columns area. + const columns = getBlocks( getBlockRootClientId( clientId ) ); + const adjacentColumns = getAdjacentBlocks( columns, clientId ); + + // The occupied width is calculated as the sum of the new width + // and the total width of blocks _not_ in the adjacent set. + const occupiedWidth = width + getTotalColumnsWidth( + difference( columns, [ + find( columns, { clientId } ), + ...adjacentColumns, + ] ) + ); + + // Compute _all_ next column widths, in case the updated column + // is in the middle of a set of columns which don't yet have + // any explicit widths assigned (include updates to those not + // part of the adjacent blocks). + const nextColumnWidths = { + ...getColumnWidths( columns, columns.length ), + [ clientId ]: toWidthPrecision( width ), + ...getRedistributedColumnWidths( adjacentColumns, 100 - occupiedWidth, columns.length ), + }; + + forEach( nextColumnWidths, ( nextColumnWidth, columnClientId ) => { + updateBlockAttributes( columnClientId, { width: nextColumnWidth } ); + } ); + }, } ) )( ColumnsEdit ); diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index f8780b91ebab53..354c7a81704bd0 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -174,3 +174,11 @@ div.block-core-columns.is-vertically-aligned-bottom { left: 0; right: 0; } + +.wp-block-columns__column-settings-column { + legend { + font-weight: bold; + padding: 0; + margin-bottom: $grid-size-small; + } +}