From ab29ee666c0ff07e7bcfff0be9ebffb4346daa06 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 8 Jan 2020 15:16:03 -0500 Subject: [PATCH 01/11] Block Library: Avoid column auto-adjustment when width changes --- packages/block-library/src/column/edit.js | 66 ++----------------- .../block-library/src/columns/test/utils.js | 20 ------ packages/block-library/src/columns/utils.js | 20 +----- 3 files changed, 5 insertions(+), 101 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index f200ba2bd02ec1..71fcd456e65c28 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 @@ -18,22 +17,11 @@ 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, + setAttributes, className, updateAlignment, - updateWidth, hasChildBlocks, } ) { const { verticalAlignment, width } = attributes; @@ -55,7 +43,9 @@ function ColumnEdit( { { + setAttributes( { width: nextWidth } ); + } } min={ 0 } max={ 100 } required @@ -104,54 +94,6 @@ export default compose( 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, - } ); - } - ); - }, }; } ) )( ColumnEdit ); diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js index 67ef6dd0332727..a4d95fa4492e43 100644 --- a/packages/block-library/src/columns/test/utils.js +++ b/packages/block-library/src/columns/test/utils.js @@ -3,7 +3,6 @@ */ import { toWidthPrecision, - getAdjacentBlocks, getEffectiveColumnWidth, getTotalColumnsWidth, getColumnWidths, @@ -25,25 +24,6 @@ describe( 'toWidthPrecision', () => { } ); } ); -describe( 'getAdjacentBlocks', () => { - const blockA = { clientId: 'a' }; - const blockB = { clientId: 'b' }; - const blockC = { clientId: 'c' }; - const blocks = [ blockA, blockB, blockC ]; - - it( 'should return blocks after clientId', () => { - const result = getAdjacentBlocks( blocks, 'b' ); - - expect( result ).toEqual( [ blockC ] ); - } ); - - it( 'should return blocks before clientId if clientId is last', () => { - const result = getAdjacentBlocks( blocks, 'c' ); - - expect( result ).toEqual( [ blockA, blockB ] ); - } ); -} ); - describe( 'getEffectiveColumnWidth', () => { it( 'should return attribute value if set, rounded to precision', () => { const block = { attributes: { width: 50.108 } }; diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js index 0631d59cf9dfb9..618d0438d2218c 100644 --- a/packages/block-library/src/columns/utils.js +++ b/packages/block-library/src/columns/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { findIndex, sumBy, merge, mapValues } from 'lodash'; +import { sumBy, merge, mapValues } from 'lodash'; /** * Returns a column width attribute value rounded to standard precision. @@ -14,24 +14,6 @@ import { findIndex, sumBy, merge, mapValues } from 'lodash'; export const toWidthPrecision = ( value ) => Number.isFinite( value ) ? parseFloat( value.toFixed( 2 ) ) : undefined; -/** - * Returns the considered adjacent to that of the specified `clientId` for - * resizing consideration. Adjacent blocks are those occurring after, except - * when the given block is the last block in the set. For the last block, the - * behavior is reversed. - * - * @param {WPBlock[]} blocks Block objects. - * @param {string} clientId Client ID to consider for adjacent blocks. - * - * @return {WPBlock[]} Adjacent block objects. - */ -export function getAdjacentBlocks( blocks, clientId ) { - const index = findIndex( blocks, { clientId } ); - const isLastBlock = index === blocks.length - 1; - - return isLastBlock ? blocks.slice( 0, index ) : blocks.slice( index + 1 ); -} - /** * Returns an effective width for a given block. An effective width is equal to * its attribute value if set, or a computed value assuming equal distribution. From 7f9dca66914868b3bd95273abbc7921665d5111c Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 8 Jan 2020 15:19:41 -0500 Subject: [PATCH 02/11] Block Library: Column: Add step attribute to column width range input Without this attribute value, if a user would enter a decimal value in the input range, the result of Element#checkValidity (in RangeControl) would be `false`, thus making it difficult/impossible to enter non-whole-number widths (e.g. `33.3`). There's a balance here between the effects of step, where ArrowUp/ArrowDown will now increment/decrement in smaller intervals than previously. This becomes further problematic if we want to support smaller decimal values (e.g. 33.33). A potential alternative would be to change the validation behavior of RangeControl to use a custom validation procedure in place of `Element#checkValidity`. --- packages/block-library/src/column/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 71fcd456e65c28..1d57937bd105a4 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -48,6 +48,7 @@ function ColumnEdit( { } } min={ 0 } max={ 100 } + step={ 0.1 } required allowReset /> From 9f79462713723712257c9710953cff76e463f123 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 6 Feb 2020 19:39:13 -0500 Subject: [PATCH 03/11] Edit Post: Remove horizontal margins from notices rendered in sidebar --- packages/edit-post/src/components/sidebar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 0b36c856082f5b..9478815ce2028a 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -48,6 +48,11 @@ } } + > .components-panel .components-notice { + margin-left: 0; + margin-right: 0; + } + p { margin-top: 0; } From e25b28b5e1393642854888b715c18eb31382aa2f Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 6 Feb 2020 19:40:44 -0500 Subject: [PATCH 04/11] Block Library: Column: Show Notice when total width is not 100% --- packages/block-library/src/column/edit.js | 57 +++++++++++++++++++++-- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 1d57937bd105a4..6d6d0ae92979b4 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -12,12 +12,62 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl } from '@wordpress/components'; -import { withDispatch, withSelect } from '@wordpress/data'; +import { PanelBody, RangeControl, Notice } from '@wordpress/components'; +import { withDispatch, withSelect, useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Component which renders a notice if the sum total width of columns of the + * root block (the Columns parent) are all explicitly assigned and not equal + * to 100%. + * + * @param {Object} props Component props. + * @param {string} props.clientId Client ID of the selected column. + * + * @return {WPElement?} Notice element, if invalid. + */ +function InvalidWidthNotice( { clientId } ) { + const sumWidth = useSelect( + ( select ) => { + const { + getBlockOrder, + getBlockAttributes, + getBlockRootClientId, + } = select( 'core/block-editor' ); + + const columns = getBlockOrder( getBlockRootClientId( clientId ) ); + return columns.reduce( + ( result, columnClientId ) => + result + getBlockAttributes( columnClientId ).width, + 0 + ); + }, + [ clientId ] + ); + + // A value of `NaN` is anticipated when any of the columns do not have an + // explicit width assigned, since `result + undefined` in the `Array#reduce` + // above would taint the numeric result (intended and leveraged here). Round + // sum to allow some tolerance +/- 0.5%, which also ensures that the notice + // message would never display "100%" as an invalid width if e.g. 100.4% + // sum total width. + if ( isNaN( sumWidth ) || Math.round( sumWidth ) === 100 ) { + return null; + } + + return ( + + { sprintf( + __( 'The total width of columns (%d%%) does not equal 100%%.' ), + Math.round( sumWidth ) + ) } + + ); +} function ColumnEdit( { + clientId, attributes, setAttributes, className, @@ -52,6 +102,7 @@ function ColumnEdit( { required allowReset /> + Date: Thu, 6 Feb 2020 20:14:46 -0500 Subject: [PATCH 05/11] Block Library: Show Columns block range control only when "Manual" width --- packages/block-library/src/column/edit.js | 69 ++++++++++++++++++----- 1 file changed, 56 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 6d6d0ae92979b4..9b2dd4e96e0bb6 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -12,11 +12,21 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl, Notice } from '@wordpress/components'; +import { + PanelBody, + RangeControl, + RadioControl, + Notice, +} from '@wordpress/components'; import { withDispatch, withSelect, useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { toWidthPrecision } from '../columns/utils'; + /** * Component which renders a notice if the sum total width of columns of the * root block (the Columns parent) are all explicitly assigned and not equal @@ -73,8 +83,10 @@ function ColumnEdit( { className, updateAlignment, hasChildBlocks, + totalColumns, } ) { const { verticalAlignment, width } = attributes; + const hasExplicitWidth = width !== undefined; const classes = classnames( className, 'block-core-columns', { [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, @@ -90,19 +102,46 @@ function ColumnEdit( { - { - setAttributes( { width: nextWidth } ); + { + setAttributes( { + width: + nextValue === 'manual' + ? toWidthPrecision( 100 / totalColumns ) + : undefined, + } ); } } - min={ 0 } - max={ 100 } - step={ 0.1 } - required - allowReset /> - + { hasExplicitWidth && ( + <> + { + setAttributes( { width: nextWidth } ); + } } + min={ 0 } + max={ 100 } + step={ 0.1 } + required + /> + + + ) } { const { clientId } = ownProps; - const { getBlockOrder } = select( 'core/block-editor' ); + const { getBlockOrder, getBlockRootClientId } = select( + 'core/block-editor' + ); return { hasChildBlocks: getBlockOrder( clientId ).length > 0, + totalColumns: getBlockOrder( getBlockRootClientId( clientId ) ) + .length, }; } ), withDispatch( ( dispatch, ownProps, registry ) => { From 1a4b11ffb27677ffe3274e51c5dd4504563616d8 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Feb 2020 10:17:30 -0500 Subject: [PATCH 06/11] Revert "Block Library: Show Columns block range control only when "Manual" width" This reverts commit 92b8fd4bf2c7bbf57189095f02dfda8798667261. --- packages/block-library/src/column/edit.js | 69 +++++------------------ 1 file changed, 13 insertions(+), 56 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 9b2dd4e96e0bb6..6d6d0ae92979b4 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -12,21 +12,11 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, } from '@wordpress/block-editor'; -import { - PanelBody, - RangeControl, - RadioControl, - Notice, -} from '@wordpress/components'; +import { PanelBody, RangeControl, Notice } from '@wordpress/components'; import { withDispatch, withSelect, useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import { toWidthPrecision } from '../columns/utils'; - /** * Component which renders a notice if the sum total width of columns of the * root block (the Columns parent) are all explicitly assigned and not equal @@ -83,10 +73,8 @@ function ColumnEdit( { className, updateAlignment, hasChildBlocks, - totalColumns, } ) { const { verticalAlignment, width } = attributes; - const hasExplicitWidth = width !== undefined; const classes = classnames( className, 'block-core-columns', { [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, @@ -102,46 +90,19 @@ function ColumnEdit( { - { - setAttributes( { - width: - nextValue === 'manual' - ? toWidthPrecision( 100 / totalColumns ) - : undefined, - } ); + { + setAttributes( { width: nextWidth } ); } } + min={ 0 } + max={ 100 } + step={ 0.1 } + required + allowReset /> - { hasExplicitWidth && ( - <> - { - setAttributes( { width: nextWidth } ); - } } - min={ 0 } - max={ 100 } - step={ 0.1 } - required - /> - - - ) } + { const { clientId } = ownProps; - const { getBlockOrder, getBlockRootClientId } = select( - 'core/block-editor' - ); + const { getBlockOrder } = select( 'core/block-editor' ); return { hasChildBlocks: getBlockOrder( clientId ).length > 0, - totalColumns: getBlockOrder( getBlockRootClientId( clientId ) ) - .length, }; } ), withDispatch( ( dispatch, ownProps, registry ) => { From dce3d053243cc7f0e14d6bbfd9a59a45ca5bea9e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Feb 2020 10:17:32 -0500 Subject: [PATCH 07/11] Revert "Block Library: Column: Show Notice when total width is not 100%" This reverts commit e25b28b5e1393642854888b715c18eb31382aa2f. --- packages/block-library/src/column/edit.js | 57 ++--------------------- 1 file changed, 3 insertions(+), 54 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 6d6d0ae92979b4..1d57937bd105a4 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -12,62 +12,12 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl, Notice } from '@wordpress/components'; -import { withDispatch, withSelect, useSelect } from '@wordpress/data'; +import { PanelBody, RangeControl } from '@wordpress/components'; +import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { __, sprintf } from '@wordpress/i18n'; - -/** - * Component which renders a notice if the sum total width of columns of the - * root block (the Columns parent) are all explicitly assigned and not equal - * to 100%. - * - * @param {Object} props Component props. - * @param {string} props.clientId Client ID of the selected column. - * - * @return {WPElement?} Notice element, if invalid. - */ -function InvalidWidthNotice( { clientId } ) { - const sumWidth = useSelect( - ( select ) => { - const { - getBlockOrder, - getBlockAttributes, - getBlockRootClientId, - } = select( 'core/block-editor' ); - - const columns = getBlockOrder( getBlockRootClientId( clientId ) ); - return columns.reduce( - ( result, columnClientId ) => - result + getBlockAttributes( columnClientId ).width, - 0 - ); - }, - [ clientId ] - ); - - // A value of `NaN` is anticipated when any of the columns do not have an - // explicit width assigned, since `result + undefined` in the `Array#reduce` - // above would taint the numeric result (intended and leveraged here). Round - // sum to allow some tolerance +/- 0.5%, which also ensures that the notice - // message would never display "100%" as an invalid width if e.g. 100.4% - // sum total width. - if ( isNaN( sumWidth ) || Math.round( sumWidth ) === 100 ) { - return null; - } - - return ( - - { sprintf( - __( 'The total width of columns (%d%%) does not equal 100%%.' ), - Math.round( sumWidth ) - ) } - - ); -} +import { __ } from '@wordpress/i18n'; function ColumnEdit( { - clientId, attributes, setAttributes, className, @@ -102,7 +52,6 @@ function ColumnEdit( { required allowReset /> - Date: Fri, 7 Feb 2020 10:17:35 -0500 Subject: [PATCH 08/11] Revert "Edit Post: Remove horizontal margins from notices rendered in sidebar" This reverts commit 9f79462713723712257c9710953cff76e463f123. --- packages/edit-post/src/components/sidebar/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 9478815ce2028a..0b36c856082f5b 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -48,11 +48,6 @@ } } - > .components-panel .components-notice { - margin-left: 0; - margin-right: 0; - } - p { margin-top: 0; } From 457c19c730a9e0dca864b4b1a5b09c640a17d5db Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Feb 2020 10:19:56 -0500 Subject: [PATCH 09/11] Block Library: Column: Add placeholder label for auto width --- packages/block-library/src/column/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 1d57937bd105a4..979d01115c7418 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -51,6 +51,9 @@ function ColumnEdit( { step={ 0.1 } required allowReset + placeholder={ + width === undefined ? __( 'Auto' ) : undefined + } /> From 7997bf66490bab0f6984a114c22ad125f04b9e89 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Feb 2020 11:05:56 -0500 Subject: [PATCH 10/11] Block Library: Columns: Consider explicit only if all blocks Avoid situation where adding or removing a Column in a Columns would forcefully assign width to a block which did not previously have a width. Only opt to redistribute widths to explicit numbers if all blocks already have widths. --- .../block-library/src/columns/test/utils.js | 24 ++++++++++++++++++- packages/block-library/src/columns/utils.js | 2 +- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js index a4d95fa4492e43..96ad53950d6e5a 100644 --- a/packages/block-library/src/columns/test/utils.js +++ b/packages/block-library/src/columns/test/utils.js @@ -166,7 +166,29 @@ describe( 'hasExplicitColumnWidths', () => { } ); it( 'returns true if a block has explicit width', () => { - const blocks = [ { attributes: { width: 10 } } ]; + const blocks = [ { attributes: { width: 100 } } ]; + + const result = hasExplicitColumnWidths( blocks ); + + expect( result ).toBe( true ); + } ); + + it( 'returns false if some, not all blocks have explicit width', () => { + const blocks = [ + { attributes: { width: 10 } }, + { attributes: { width: undefined } }, + ]; + + const result = hasExplicitColumnWidths( blocks ); + + expect( result ).toBe( false ); + } ); + + it( 'returns true if all blocks have explicit width', () => { + const blocks = [ + { attributes: { width: 10 } }, + { attributes: { width: 90 } }, + ]; const result = hasExplicitColumnWidths( blocks ); diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js index 618d0438d2218c..31f0d9f87cfd5b 100644 --- a/packages/block-library/src/columns/utils.js +++ b/packages/block-library/src/columns/utils.js @@ -97,7 +97,7 @@ export function getRedistributedColumnWidths( * @return {boolean} Whether columns have explicit widths. */ export function hasExplicitColumnWidths( blocks ) { - return blocks.some( ( block ) => + return blocks.every( ( block ) => Number.isFinite( block.attributes.width ) ); } From 5d9dff2ef9bfcd903925627f35d9108200809fd6 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Feb 2020 11:10:52 -0500 Subject: [PATCH 11/11] Block Library: Column: Grow to maximally fill space --- packages/block-library/src/column/index.js | 1 + packages/block-library/src/columns/editor.scss | 14 +++++++++++--- packages/block-library/src/columns/style.scss | 10 +++++++--- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index 611a160ed8962d..7ed663db38558a 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -32,6 +32,7 @@ export const settings = { style: { flexBasis: width + '%', }, + 'data-has-explicit-width': true, }; } }, diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 2d77224a917d68..b62b3f62215143 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -66,10 +66,18 @@ // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; - // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: calc(50% - (#{$grid-size-large})); - flex-grow: 0; + flex-grow: 1; + flex-basis: auto; + + // Beyond mobile, allow columns. Columns with an explicitly- + // assigned width should maintain their `flex-basis` width and + // not grow. All other blocks should automatically inherit the + // `flex-grow` to occupy the available space. + &[data-has-explicit-width] { + flex-grow: 0; + } + margin-left: 0; margin-right: 0; } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 899414c24f4071..b32377cc3522eb 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -32,9 +32,13 @@ @include break-small() { - // Beyond mobile, allow 2 columns. - flex-basis: calc(50% - #{$grid-size-large}); - flex-grow: 0; + // Beyond mobile, allow columns. Columns with an explicitly-assigned + // width should maintain their `flex-basis` width and not grow. All + // other blocks should automatically inherit the `flex-grow` to occupy + // the available space. + &[style] { + flex-grow: 0; + } // Add space between the multiple columns. Themes can customize this if they wish to work differently. // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.