diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index a1ed2c33054bc9..faf2649efd13ab 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -513,7 +513,7 @@ In addition to styles at the individual block level and in global styles, there The layout block support is an experimental approach for outputting common layout styles that are shared between blocks that are used for creating layouts. Layout styles are useful for providing common styling for any block that is a container for other blocks. Examples of blocks that depend on these layout styles include Group, Row, Columns, Buttons, and Social Icons. -While the feature is part of WordPress core, it is still flagged as experimental in the sense that the features and output are still undergoing active development. It is therefore not yet a stable feature from the perspective of 3rd party blocks, as the API is likely to change. The feature is enabled in core blocks via the `__experimentalLayout` setting under `supports` in a block's `block.json` file. +While the feature is part of WordPress core, it is still flagged as experimental in the sense that the features and output are still undergoing active development. It is therefore not yet a stable feature from the perspective of 3rd party blocks, as the API is likely to change. The feature is enabled in core blocks via the `layout` setting under `supports` in a block's `block.json` file. There are two primary places where Layout styles are output: diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3bb44274996a8c..dec943d4bb7905 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt - **Name:** core/buttons - **Category:** design -- **Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** ## Calendar @@ -98,7 +98,7 @@ A single column within a columns block. ([Source](https://github.com/WordPress/g - **Name:** core/column - **Category:** design - **Parent:** core/columns -- **Supports:** anchor, color (background, gradients, link, text), spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** anchor, color (background, gradients, link, text), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** allowedBlocks, templateLock, verticalAlignment, width ## Columns @@ -107,7 +107,7 @@ Display content in multiple columns, with blocks added to each column. ([Source] - **Name:** core/columns - **Category:** design -- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** isStackedOnMobile, templateLock, verticalAlignment ## Comment Author Avatar (deprecated) @@ -191,7 +191,7 @@ Displays a paginated navigation to next/previous set of comments, when applicabl - **Name:** core/comments-pagination - **Category:** theme - **Parent:** core/comments -- **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** paginationArrow ## Comments Next Page @@ -239,7 +239,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media -- **Supports:** align, anchor, color (text, ~~background~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, anchor, color (text, ~~background~~), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage ## Details @@ -284,7 +284,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres - **Name:** core/gallery - **Category:** media -- **Supports:** align, anchor, color (background, gradients, ~~text~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~ +- **Supports:** align, anchor, color (background, gradients, ~~text~~), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~ - **Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug ## Group @@ -293,7 +293,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute - **Name:** core/group - **Category:** design -- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** allowedBlocks, tagName, templateLock ## Heading @@ -412,7 +412,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Name:** core/navigation - **Category:** theme -- **Supports:** align (full, wide), inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), inserter, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link @@ -554,7 +554,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme -- **Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), dimensions (minHeight), layout, typography (fontSize, lineHeight), ~~html~~ - **Attributes:** ## Post Date @@ -600,7 +600,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Parent:** core/query -- **Supports:** align (full, wide), color (background, gradients, link, text), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** align (full, wide), color (background, gradients, link, text), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** ## Post Terms @@ -655,7 +655,7 @@ An advanced block that allows displaying post types based on different query par - **Name:** core/query - **Category:** theme -- **Supports:** align (full, wide), ~~html~~ +- **Supports:** align (full, wide), layout, ~~html~~ - **Attributes:** namespace, query, queryId, tagName ## No results @@ -675,7 +675,7 @@ Displays a paginated navigation to next/previous set of posts, when applicable. - **Name:** core/query-pagination - **Category:** theme - **Parent:** core/query -- **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** paginationArrow, showLabel ## Next Page @@ -814,7 +814,7 @@ Display icons linking to your social media profiles or sites. ([Source](https:// - **Name:** core/social-links - **Category:** widgets -- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (blockGap, margin, padding, units) +- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), layout (default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, margin, padding, units) - **Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size ## Spacer diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 3840d030e06e15..d61a09f4e8927e 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -194,7 +194,7 @@ function gutenberg_get_layout_definitions() { * @param WP_Block_Type $block_type Block Type. */ function gutenberg_register_layout_support( $block_type ) { - $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); + $support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false ); if ( $support_layout ) { if ( ! $block_type->attributes ) { $block_type->attributes = array(); @@ -530,7 +530,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support */ function gutenberg_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); + $support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false ); $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ); if ( ! $support_layout @@ -584,7 +584,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } $global_settings = gutenberg_get_global_settings(); - $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); + $fallback_layout = ! empty( _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) ) ? _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); + $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout; $class_names = array(); $layout_definitions = gutenberg_get_layout_definitions(); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 236be5345c362b..2e372fc32c1702 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1265,7 +1265,7 @@ protected function get_layout_styles( $block_metadata ) { if ( isset( $block_metadata['name'] ) ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] ); - if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) { + if ( ! block_has_support( $block_type, array( 'layout' ), false ) && ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) { return $block_rules; } } diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index d24f8301c85fb8..6faefbc6261929 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -29,11 +29,9 @@ export default function BlockEdit( props ) { __unstableLayoutClassNames, } = props; const { layout = null } = attributes; - const layoutSupport = hasBlockSupport( - name, - '__experimentalLayout', - false - ); + const layoutSupport = + hasBlockSupport( name, 'layout', false ) || + hasBlockSupport( name, '__experimentalLayout', false ); const context = { name, isSelected, diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 2193cedcf1c108..6df09478931a2f 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -142,7 +142,7 @@ function Items( { rootClientId, renderAppender, __experimentalAppenderTagName, - __experimentalLayout: layout = defaultLayout, + layout = defaultLayout, } ) { const { order, selectedBlocks, visibleBlocks } = useSelect( ( select ) => { diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index df3a7c174e6466..13bad1844d3d04 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -101,18 +101,14 @@ export default memo( BlockPreview ); * returns. Optionally, you can also pass any other props through this hook, and * they will be merged and returned. * - * @param {Object} options Preview options. - * @param {WPBlock[]} options.blocks Block objects. - * @param {Object} options.props Optional. Props to pass to the element. Must contain - * the ref if one is defined. - * @param {Object} options.__experimentalLayout Layout settings to be used in the preview. + * @param {Object} options Preview options. + * @param {WPBlock[]} options.blocks Block objects. + * @param {Object} options.props Optional. Props to pass to the element. Must contain + * the ref if one is defined. + * @param {Object} options.layout Layout settings to be used in the preview. * */ -export function useBlockPreview( { - blocks, - props = {}, - __experimentalLayout, -} ) { +export function useBlockPreview( { blocks, props = {}, layout } ) { const originalSettings = useSelect( ( select ) => select( blockEditorStore ).getSettings(), [] @@ -133,10 +129,7 @@ export function useBlockPreview( { value={ renderedBlocks } settings={ settings } > - + ); diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 7fa25c58cc93d0..cea3fe9b9b73b8 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -1030,7 +1030,9 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => { duotoneSupport && scopeSelector( rootSelector, duotoneSupport ); } - const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout; + const hasLayoutSupport = + !! blockType?.supports?.layout || + !! blockType?.supports?.__experimentalLayout; const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index f113ad3b05f630..fff793b1c5938e 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -110,7 +110,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas'; export { default as BlockInspector } from './block-inspector'; export { default as BlockList } from './block-list'; export { useBlockProps } from './block-list/use-block-props'; -export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout'; export { default as BlockMover } from './block-mover'; export { default as BlockPreview, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index bf33abad4864f3..e1513b9008374c 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -88,7 +88,9 @@ function UncontrolledInnerBlocks( props ) { ); const defaultLayoutBlockSupport = - getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT; + getBlockSupport( name, 'layout' ) || + getBlockSupport( name, '__experimentalLayout' ) || + EMPTY_OBJECT; const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; @@ -116,7 +118,7 @@ function UncontrolledInnerBlocks( props ) { rootClientId={ clientId } renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } - __experimentalLayout={ memoedLayout } + layout={ memoedLayout } wrapperRef={ wrapperRef } placeholder={ placeholder } /> diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 54e168f8ee43f4..8af05521e9f036 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -93,7 +93,7 @@ function UncontrolledInnerBlocks( props ) { horizontalAlignment, filterInnerBlocks, blockWidth, - __experimentalLayout: layout = defaultLayout, + layout = defaultLayout, gridProperties, } = props; diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 78a2c3b542c4e7..c8f9648c2f6349 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -32,7 +32,14 @@ import { getLayoutType, getLayoutTypes } from '../layouts'; import { useBlockEditingMode } from '../components/block-editing-mode'; import { LAYOUT_DEFINITIONS } from '../layouts/definitions'; -const layoutBlockSupportKey = '__experimentalLayout'; +const layoutBlockSupportKey = 'layout'; + +function hasLayoutBlockSupport( blockName ) { + return ( + hasBlockSupport( blockName, 'layout' ) || + hasBlockSupport( blockName, '__experimentalLayout' ) + ); +} /** * Generates the utility classnames for the given block's layout attributes. @@ -295,7 +302,7 @@ export function addAttribute( settings ) { if ( 'type' in ( settings.attributes?.layout ?? {} ) ) { return settings; } - if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) { + if ( hasLayoutBlockSupport( settings ) ) { settings.attributes = { ...settings.attributes, layout: { @@ -317,10 +324,7 @@ export function addAttribute( settings ) { export const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const { name: blockName } = props; - const supportLayout = hasBlockSupport( - blockName, - layoutBlockSupportKey - ); + const supportLayout = hasLayoutBlockSupport( blockName ); const blockEditingMode = useBlockEditingMode(); return [ @@ -343,16 +347,13 @@ export const withInspectorControls = createHigherOrderComponent( export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; - const hasLayoutBlockSupport = hasBlockSupport( - name, - layoutBlockSupportKey - ); + const blockSupportsLayout = hasLayoutBlockSupport( name ); const disableLayoutStyles = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return !! getSettings().disableLayoutStyles; } ); const shouldRenderLayoutStyles = - hasLayoutBlockSupport && ! disableLayoutStyles; + blockSupportsLayout && ! disableLayoutStyles; const id = useInstanceId( BlockListBlock ); const element = useContext( BlockList.__unstableElementContext ); const { layout } = attributes; @@ -362,7 +363,7 @@ export const withLayoutStyles = createHigherOrderComponent( layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; - const layoutClasses = hasLayoutBlockSupport + const layoutClasses = blockSupportsLayout ? useLayoutClasses( attributes, name ) : null; // Higher specificity to override defaults from theme.json. diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 7c4906e1d54efb..ead8ca89aa47d6 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -40,7 +40,7 @@ const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform'; * e.g. settings found in `block.json`. */ const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing'; -const LAYOUT_SUPPORT_KEY = '__experimentalLayout'; +const LAYOUT_SUPPORT_KEY = 'layout'; const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, FONT_SIZE_SUPPORT_KEY, diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index e272043c7ebab5..1dbc4501e92180 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -12,8 +12,6 @@ export { getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, getGapCSSValue as __experimentalGetGapCSSValue, useCachedTruthy, - useLayoutClasses as __experimentaluseLayoutClasses, - useLayoutStyles as __experimentaluseLayoutStyles, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 00bce45892ccd8..b9ec71fc1a786d 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -12,6 +12,8 @@ import { useShouldContextualToolbarShow } from './utils/use-should-contextual-to import { cleanEmptyObject } from './hooks/utils'; import { useBlockEditingMode } from './components/block-editing-mode'; import BlockQuickNavigation from './components/block-quick-navigation'; +import { LayoutStyle } from './components/block-list/layout'; +import { useLayoutClasses, useLayoutStyles } from './hooks'; /** * Private @wordpress/block-editor APIs. @@ -28,4 +30,7 @@ lock( privateApis, { cleanEmptyObject, useBlockEditingMode, BlockQuickNavigation, + LayoutStyle, + useLayoutClasses, + useLayoutStyles, } ); diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 26bce09b178404..4dc420bd418855 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -32,7 +32,7 @@ "fontSize": true } }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "default": { diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 54b0e10a631b32..bb73d085a8f481 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -45,7 +45,7 @@ export default function ButtonsEdit( { const { marginLeft: spacing } = styles.spacing; // Extract attributes from block layout - const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' ); + const layoutBlockSupport = getBlockSupport( name, 'layout' ); const defaultBlockLayout = layoutBlockSupport?.default; const usedLayout = layout || defaultBlockLayout || {}; const { justifyContent } = usedLayout; @@ -168,7 +168,7 @@ export default function ButtonsEdit( { parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to. marginHorizontal={ spacing } marginVertical={ spacing } - __experimentalLayout={ layoutProp } + layout={ layoutProp } templateInsertUpdatesSelection blockWidth={ blockWidth } /> diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index 1ff0bb8935167c..31ad66cb6b1911 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -65,6 +65,6 @@ "fontSize": true } }, - "__experimentalLayout": true + "layout": true } } diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 91230ef739eb9d..a99fd020ca8d22 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -43,7 +43,7 @@ "blockGap": true } }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "allowEditing": false, diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json index e50fad3dee3c97..a11decd201e94f 100644 --- a/packages/block-library/src/comments-pagination/block.json +++ b/packages/block-library/src/comments-pagination/block.json @@ -29,7 +29,7 @@ "link": true } }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "default": { diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 8b4c706a332cc0..39ee6978025480 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -125,7 +125,7 @@ "fontSize": true } }, - "__experimentalLayout": { + "layout": { "allowJustification": false } }, diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index d352acd2833b85..07425e1037402d 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -123,7 +123,7 @@ "background": true, "gradients": true }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "allowEditing": false, diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index a5174d0215c424..e5a042385c160c 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -66,7 +66,7 @@ export const Gallery = ( props ) => { numColumns: displayedColumns, marginHorizontal: TILE_SPACING, marginVertical: TILE_SPACING, - __experimentalLayout: { type: 'default', alignments: [] }, + layout: { type: 'default', alignments: [] }, gridProperties: { numColumns: displayedColumns, }, diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 9a2d61056fb304..6eaf78586285eb 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -75,7 +75,7 @@ "fontSize": true } }, - "__experimentalLayout": { + "layout": { "allowSizingOnChildren": true } }, diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js index af52b14c7c5e6e..4a98de433c5298 100644 --- a/packages/block-library/src/group/deprecated.js +++ b/packages/block-library/src/group/deprecated.js @@ -101,7 +101,7 @@ const deprecated = [ fontSize: true, }, }, - __experimentalLayout: true, + layout: true, }, save( { attributes: { tagName: Tag } } ) { return ( diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 9c9c0de9014cbd..135e7fd1f75d3d 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -114,7 +114,7 @@ "blockGap": true } }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "allowVerticalAlignment": false, diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js index c2b1a2fd3bf48d..6f29ab224a4405 100644 --- a/packages/block-library/src/navigation/deprecated.js +++ b/packages/block-library/src/navigation/deprecated.js @@ -121,7 +121,7 @@ const v6 = { blockGap: true, }, }, - __experimentalLayout: { + layout: { allowSwitching: false, allowInheriting: false, default: { diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index a6364dd1e1c709..044ca5768bf8db 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -10,7 +10,7 @@ "supports": { "align": [ "wide", "full" ], "html": false, - "__experimentalLayout": true, + "layout": true, "dimensions": { "minHeight": true }, diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index d382a4f687e770..1f0d4677e67278 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -19,7 +19,7 @@ "reusable": false, "html": false, "align": [ "wide", "full" ], - "__experimentalLayout": true, + "layout": true, "color": { "gradients": true, "link": true, diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index fcd6e7eec5eb14..e32a9ba9b495ff 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/packages/block-library/src/query-pagination/block.json @@ -35,7 +35,7 @@ "link": true } }, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "default": { diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index ff0d06710df0aa..e4b78b585be0e5 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -44,7 +44,7 @@ "supports": { "align": [ "wide", "full" ], "html": false, - "__experimentalLayout": true + "layout": true }, "editorStyle": "wp-block-query-editor" } diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index c821421cd35bbd..6ec50198973ca6 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -296,7 +296,7 @@ const v2 = { gradients: true, link: true, }, - __experimentalLayout: true, + layout: true, }, isEligible: ( { query: { categoryIds, tagIds } = {} } ) => categoryIds || tagIds, @@ -369,7 +369,7 @@ const v3 = { text: true, }, }, - __experimentalLayout: true, + layout: true, }, isEligible( attributes ) { const { style, backgroundColor, gradient, textColor } = attributes; @@ -448,7 +448,7 @@ const v4 = { text: true, }, }, - __experimentalLayout: true, + layout: true, }, save( { attributes: { tagName: Tag = 'div' } } ) { const blockProps = useBlockProps.save(); @@ -509,7 +509,7 @@ const v5 = { align: [ 'wide', 'full' ], anchor: true, html: false, - __experimentalLayout: true, + layout: true, }, save( { attributes: { tagName: Tag = 'div' } } ) { const blockProps = useBlockProps.save(); diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 3b1500ab8e70df..064b077b5e9ed9 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -50,7 +50,7 @@ "align": [ "left", "center", "right" ], "anchor": true, "__experimentalExposeControlsToChildren": true, - "__experimentalLayout": { + "layout": { "allowSwitching": false, "allowInheriting": false, "allowVerticalAlignment": false, diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index 19e79dca27e5ca..b17428bbdbb40e 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -37,7 +37,7 @@ export default function TemplatePartInnerBlocks( { renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender, - __experimentalLayout: themeSupportsLayout ? usedLayout : undefined, + layout: themeSupportsLayout ? usedLayout : undefined, } ); return ; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 4f4794be59c3bd..29e6e15da4579f 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -23,12 +23,10 @@ import { __experimentalUseResizeCanvas as useResizeCanvas, __unstableEditorStyles as EditorStyles, useSetting, - __experimentalLayoutStyle as LayoutStyle, __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset, __unstableIframe as Iframe, __experimentalRecursionProvider as RecursionProvider, - __experimentaluseLayoutClasses as useLayoutClasses, - __experimentaluseLayoutStyles as useLayoutStyles, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useEffect, useRef, useMemo } from '@wordpress/element'; import { __unstableMotion as motion } from '@wordpress/components'; @@ -41,6 +39,11 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { store as editPostStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +const { LayoutStyle, useLayoutClasses, useLayoutStyles } = unlock( + blockEditorPrivateApis +); const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false; @@ -415,7 +418,7 @@ export default function VisualEditor( { styles } ) { ? 'wp-site-blocks' : `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules. } - __experimentalLayout={ blockListLayout } + layout={ blockListLayout } /> diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 71f1ee93097e28..9184913e5840ff 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -213,7 +213,7 @@ export default function BlockEditor() { { resizeObserver }