diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index cf17da4da1b20f..4fe3ea077acfde 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -51,7 +51,7 @@ Prompt visitors to take action with a group of button-style links. - **Name:** core/buttons - **Category:** design - **Supports:** align (full, wide), anchor, spacing (blockGap, margin) -- **Attributes:** +- **Attributes:** ## Calendar @@ -96,7 +96,7 @@ Display content in multiple columns, with blocks added to each column. - **Name:** core/columns - **Category:** design - **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~ -- **Attributes:** isStackedOnMobile, verticalAlignment +- **Attributes:** isStackedOnMobile, verticalAlignment, verticalAlignment ## Comment Author Avatar @@ -159,7 +159,7 @@ Contains the block elements used to render a comment, like the title, date, auth - **Name:** core/comment-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments Pagination @@ -186,7 +186,7 @@ Displays a list of page numbers for comments pagination. - **Name:** core/comments-pagination-numbers - **Category:** theme - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments Query Loop @@ -393,7 +393,7 @@ Separate your content into a multi-page experience. - **Name:** core/nextpage - **Category:** design - **Supports:** ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** +- **Attributes:** ## Page List @@ -483,7 +483,7 @@ Displays the contents of a post or page. - **Name:** core/post-content - **Category:** theme - **Supports:** align (full, wide), ~~html~~ -- **Attributes:** +- **Attributes:** ## Post Date @@ -528,7 +528,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Post Terms @@ -600,7 +600,7 @@ Displays a list of page numbers for pagination - **Name:** core/query-pagination-numbers - **Category:** design - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index dfbfb24e2251b0..885d5f105ef0cb 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -13,6 +13,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 ab74ab527ea31c..95eaa030765378 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -13,6 +13,8 @@ import { PanelBody, RangeControl, ToggleControl, + __experimentalUnitControl as UnitControl, + __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; import { @@ -59,7 +61,7 @@ function ColumnsEditContainer( { updateColumns, clientId, } ) { - const { isStackedOnMobile, verticalAlignment } = attributes; + const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes; const { count } = useSelect( ( select ) => { @@ -83,6 +85,9 @@ function ColumnsEditContainer( { orientation: 'horizontal', renderAppender: false, } ); + const units = useCustomUnits( { + availableUnits: [ '%', 'px', 'em', 'rem', 'vw' ], + } ); return ( <> @@ -117,6 +122,23 @@ function ColumnsEditContainer( { } ) } /> + { isStackedOnMobile && ( + { + setAttributes( { + columnMinWidth: value, + } ); + } } + value={ columnMinWidth } + units={ units } + /> + ) }
@@ -276,8 +298,15 @@ const ColumnsEdit = ( props ) => { const Component = hasInnerBlocks ? ColumnsEditContainerWrapper : Placeholder; + const style = `--wp--columns-min-width:${ + props?.attributes?.columnMinWidth || '200px' + }`; + const propsWithStyle = { + ...props, + style, + }; - return ; + return ; }; export default ColumnsEdit; diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 66a0bd337175e5..c34e65576e4f48 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -8,21 +8,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: var(--wp--style--block-gap, 2em); - } -} - -@include break-medium() { - .editor-styles-wrapper - .block-editor-block-list__block.wp-block-column:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); - } -} - // Individual columns do not have top and bottom margins on the frontend. // So we make the editor match that. // We use :where to provide minimum specificity, so that intentional margins, diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 0dde5595308536..6a3de3be0b2244 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { useInnerBlocksProps, 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, @@ -18,6 +18,9 @@ export default function save( { attributes } ) { const blockProps = useBlockProps.save( { className } ); const innerBlocksProps = useInnerBlocksProps.save( blockProps ); - - return
; + 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 8a120282f0da09..95c3adc40b5d7f 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; /** * All Columns Alignment @@ -26,53 +23,7 @@ } &: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% - calc(var(--wp--style--block-gap, 2em) / 2)) !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: var(--wp--style--block-gap, 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: var(--wp--style--block-gap, 2em); - } - } + min-width: var(--wp--columns-min-width, min-content); } &.is-not-stacked-on-mobile {