From 46b52cc906d86e8c12beb3e3067edc795890a86b Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 9 Jul 2021 16:01:39 +0300 Subject: [PATCH] WIP --- packages/block-library/src/columns/block.json | 3 + packages/block-library/src/columns/edit.js | 29 +++++++- .../block-library/src/columns/editor.scss | 15 ---- packages/block-library/src/columns/save.js | 9 ++- packages/block-library/src/columns/style.scss | 70 +------------------ 5 files changed, 40 insertions(+), 86 deletions(-) diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 79b82f4b7a5952..a4b93d58636c9b 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -12,6 +12,9 @@ "isStackedOnMobile": { "type": "boolean", "default": true + }, + "columnMinWidth": { + "type": "string" } }, "supports": { diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 35534d503bb727..62372ed6bf4c3a 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -13,6 +13,7 @@ import { PanelBody, RangeControl, ToggleControl, + __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; import { @@ -22,6 +23,7 @@ import { BlockVerticalAlignmentToolbar, __experimentalBlockVariationPicker, useBlockProps, + __experimentalUnitControl as UnitControl, store as blockEditorStore, } from '@wordpress/block-editor'; import { withDispatch, useDispatch, useSelect } from '@wordpress/data'; @@ -59,7 +61,7 @@ function ColumnsEditContainer( { updateColumns, clientId, } ) { - const { isStackedOnMobile, verticalAlignment } = attributes; + const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes; const { count } = useSelect( ( select ) => { @@ -84,6 +86,10 @@ function ColumnsEditContainer( { renderAppender: false, } ); + const units = useCustomUnits( { + availableUnits: [ '%', 'px', 'em', 'rem', 'vw' ], + } ); + return ( <> @@ -117,6 +123,23 @@ function ColumnsEditContainer( { } ) } /> + { isStackedOnMobile && ( + { + setAttributes( { + columnMinWidth: value, + } ); + } } + value={ columnMinWidth } + units={ units } + /> + ) }
@@ -277,6 +300,10 @@ const ColumnsEdit = ( props ) => { ? ColumnsEditContainerWrapper : Placeholder; + props.style = props?.attributes?.columnMinWidth + ? `--wp--columns-min-width:${ props.attributes.columnMinWidth }` + : null; + return ; }; diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 76ce4d3c97c221..5605e1e70776f3 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -6,21 +6,6 @@ margin-right: 0; } -// To do: remove horizontal margin override by the editor. -@include break-small() { - .editor-styles-wrapper - .block-editor-block-list__block.wp-block-column:nth-child(even) { - margin-left: $grid-unit-20 * 2; - } -} - -@include break-medium() { - .editor-styles-wrapper - .block-editor-block-list__block.wp-block-column:not(:first-child) { - margin-left: $grid-unit-20 * 2; - } -} - // Individual columns do not have top and bottom margins on the frontend. // So we make the editor match that. // Needs specificity. diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 3c80d0edc21f51..8eceb02cd42499 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -9,15 +9,20 @@ import classnames from 'classnames'; import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { isStackedOnMobile, verticalAlignment } = attributes; + const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes; const className = classnames( { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, [ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile, } ); + const styles = + columnMinWidth && isStackedOnMobile + ? `--wp--columns-min-width:${ columnMinWidth };` + : null; + return ( -
+
); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index aba4c99297a191..58f9b6582736f7 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -5,10 +5,7 @@ // Responsiveness: Allow wrapping on mobile. flex-wrap: wrap; - - @include break-medium() { - flex-wrap: nowrap; - } + gap: 1.75em 2em; &.has-background { padding: $block-bg-padding--v $block-bg-padding--h; @@ -30,74 +27,11 @@ } &:not(.is-not-stacked-on-mobile) > .wp-block-column { - @media (max-width: #{ ($break-small - 1) }) { - // Responsiveness: Show at most one columns on mobile. This must be - // important since the Column assigns its own width as an inline style. - flex-basis: 100% !important; - } - - // Between mobile and large viewports, allow 2 columns. - @media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) { - // Only add two column styling if there are two or more columns - &:not(:only-child) { - // As with mobile styles, this must be important since the Column - // assigns its own width as an inline style, which should take effect - // starting at `break-medium`. - flex-basis: calc(50% - 1em) !important; - 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. - &:nth-child(even) { - margin-left: 2em; - } - } - - // At large viewports, show all columns horizontally. - @include break-medium() { - // Available space should be divided equally amongst columns without an - // assigned width. This is achieved by assigning a flex basis that is - // consistent (equal), would not cause the sum total of column widths to - // exceed 100%, and which would cede to a column with an assigned width. - // The `flex-grow` allows columns to maximally and equally occupy space - // remaining after subtracting the space occupied by columns with - // explicit widths (if any exist). - flex-basis: 0; - flex-grow: 1; - - // Columns with an explicitly-assigned width should maintain their - // `flex-basis` width and not grow. - &[style*="flex-basis"] { - flex-grow: 0; - } - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: 2em; - } - } + min-width: var(--wp--columns-min-width, min-content); } &.is-not-stacked-on-mobile { flex-wrap: nowrap; - - > .wp-block-column { - // Available space should be divided equally amongst columns. - flex-basis: 0; - flex-grow: 1; - - // Columns with an explicitly-assigned width should maintain their - // `flex-basis` width and not grow. - &[style*="flex-basis"] { - flex-grow: 0; - } - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: 2em; - } - } } }