Block Library: Add width attribute for resizable Column blocks

lib/compat.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Temporary compatibility shims for features present in Gutenberg, pending
+ * upstream commit to the WordPress core source repository. Functions here
+ * exist only as long as necessary for corresponding WordPress support, and
+ * each should be associated with a Trac ticket.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Filters allowed CSS attributes to include `flex-basis`, included in saved
+ * markup of the Column block.
+ *
+ * @since 5.7.0
+ *
+ * @param string[] $attr Array of allowed CSS attributes.
+ *
+ * @return string[] Filtered array of allowed CSS attributes.
+ */
+function gutenberg_safe_style_css_column_flex_basis( $attr ) {
+ $attr[] = 'flex-basis';
+
+ return $attr;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_style_css_column_flex_basis' );

lib/load.php

@@ -24,6 +24,7 @@
  require dirname( __FILE__ ) . '/rest-api.php';
 }
 
+require dirname( __FILE__ ) . '/compat.php';
 require dirname( __FILE__ ) . '/blocks.php';
 require dirname( __FILE__ ) . '/client-assets.php';
 require dirname( __FILE__ ) . '/demo.php';

packages/block-library/src/column/block.json

@@ -4,6 +4,11 @@
  "attributes": {
  "verticalAlignment": {
  "type": "string"
+ },
+ "width": {
+ "type": "number",
+ "min": 0,
+ "max": 100
  }
  }
 }

packages/block-library/src/column/edit.js

@@ -2,55 +2,132 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { forEach, find, difference } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@wordpress/block-editor';
+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';
 
-const ColumnEdit = ( { attributes, updateAlignment } ) => {
- const { verticalAlignment } = attributes;
+/**
+ * Internal dependencies
+ */
+import {
+ toWidthPrecision,
+ getTotalColumnsWidth,
+ getColumnWidths,
+ getAdjacentBlocks,
+ getRedistributedColumnWidths,
+} from '../columns/utils';
+
+function ColumnEdit( {
+ attributes,
+ updateAlignment,
+ updateWidth,
+ hasChildBlocks,
+} ) {
+ const { verticalAlignment, width } = attributes;
 
  const classes = classnames( 'block-core-columns', {
  [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
  } );
 
- const onChange = ( alignment ) => updateAlignment( alignment );
-
  return (
  <div className={ classes }>
  <BlockControls>
  <BlockVerticalAlignmentToolbar
- onChange={ onChange }
+ onChange={ updateAlignment }
  value={ verticalAlignment }
  />
  </BlockControls>
- <InnerBlocks templateLock={ false } />
+ <InspectorControls>
+ <PanelBody title={ __( 'Column Settings' ) }>
+ <RangeControl
+ label={ __( 'Percentage width' ) }
+ value={ width || '' }
+ onChange={ updateWidth }
+ min={ 0 }
+ max={ 100 }
+ required
+ allowReset
+ />
+ </PanelBody>
+ </InspectorControls>
+ <InnerBlocks
+ templateLock={ false }
+ renderAppender={ (
+ hasChildBlocks ?
+ undefined :
+ () => <InnerBlocks.ButtonBlockAppender />
+ ) }
+ />
  </div>
  );
-};
+}
 
 export default compose(
- withSelect( ( select, { clientId } ) => {
- const { getBlockRootClientId } = select( 'core/editor' );
+ withSelect( ( select, ownProps ) => {
+ const { clientId } = ownProps;
+ const { getBlockOrder } = select( 'core/block-editor' );
 
  return {
- parentColumnsBlockClientId: getBlockRootClientId( clientId ),
+ hasChildBlocks: getBlockOrder( clientId ).length > 0,
  };
  } ),
- withDispatch( ( dispatch, { clientId, parentColumnsBlockClientId } ) => {
+ withDispatch( ( dispatch, ownProps, registry ) => {
  return {
- updateAlignment( alignment ) {
- // Update self...
- dispatch( 'core/editor' ).updateBlockAttributes( clientId, {
- verticalAlignment: alignment,
- } );
+ updateAlignment( verticalAlignment ) {
+ const { clientId, setAttributes } = ownProps;
+ const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+ const { getBlockRootClientId } = registry.select( 'core/block-editor' );
+
+ // Update own alignment.
+ setAttributes( { verticalAlignment } );
 
  // Reset Parent Columns Block
- dispatch( 'core/editor' ).updateBlockAttributes( parentColumnsBlockClientId, {
- verticalAlignment: null,
+ const rootClientId = getBlockRootClientId( clientId );
+ updateBlockAttributes( rootClientId, { verticalAlignment: null } );
+ },
+ updateWidth( width ) {
+ const { clientId } = ownProps;
+ 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 } );
  } );
  },
  };

packages/block-library/src/column/index.js

@@ -25,6 +25,16 @@ export const settings = {
  reusable: false,
  html: false,
  },
+ getEditWrapperProps( attributes ) {
+ const { width } = attributes;
+ if ( Number.isFinite( width ) ) {
+ return {
+ style: {
+ flexBasis: width + '%',
+ },
+ };
+ }
+ },
  edit,
  save,
 };

packages/block-library/src/column/save.js

@@ -9,13 +9,19 @@ import classnames from 'classnames';
 import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
- const { verticalAlignment } = attributes;
+ const { verticalAlignment, width } = attributes;
+
  const wrapperClasses = classnames( {
  [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
  } );
 
+ let style;
+ if ( Number.isFinite( width ) ) {
+ style = { flexBasis: width + '%' };
+ }
+
  return (
- <div className={ wrapperClasses }>
+ <div className={ wrapperClasses } style={ style }>
  <InnerBlocks.Content />
  </div>
  );