From 7ca0e747798c92642a5c101266f4a2c87b5c0678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 12 Oct 2020 18:30:46 +0300 Subject: [PATCH 1/8] Inner blocks: edit/save symmetry + stabilise API --- packages/block-editor/src/components/index.js | 2 +- .../src/components/inner-blocks/index.js | 8 +++---- packages/block-library/src/buttons/edit.js | 2 +- packages/block-library/src/column/edit.js | 2 +- packages/block-library/src/column/save.js | 19 +++++++-------- packages/block-library/src/columns/edit.js | 2 +- packages/block-library/src/columns/save.js | 11 ++++----- packages/block-library/src/cover/edit.js | 2 +- packages/block-library/src/group/edit.js | 2 +- packages/block-library/src/media-text/edit.js | 2 +- .../src/navigation/edit/inner-blocks.js | 2 +- .../block-library/src/social-links/edit.js | 2 +- .../src/template-part/edit/inner-blocks.js | 2 +- packages/blocks/src/api/index.js | 1 + packages/blocks/src/api/serializer.js | 24 ++++++++++++++++++- 15 files changed, 51 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index fed9e9752194c..48ca597353706 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -56,7 +56,7 @@ export { export { default as __experimentalImageSizeControl } from './image-size-control'; export { default as InnerBlocks, - useInnerBlocksProps as __experimentalUseInnerBlocksProps, + useInnerBlocksProps as useInnerBlocksProps, } from './inner-blocks'; export { default as InspectorControls, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 5a8bc95238fd5..8a75060b434b6 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data'; import { getBlockType, store as blocksStore, - withBlockContentContext, + __unstableGetInnerBlocksProps as getInnerBlocksProps, } from '@wordpress/blocks'; /** @@ -210,13 +210,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) { }; } +useInnerBlocksProps.save = getInnerBlocksProps; + // Expose default appender placeholders as components. ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender; ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender; -ForwardedInnerBlocks.Content = withBlockContentContext( - ( { BlockContent } ) => -); +ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children; /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index a22d8a7296068..348fc7a9eeb92 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { BlockControls, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, JustifyContentControl, store as blockEditorStore, } from '@wordpress/block-editor'; diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index d74fb009c30b1..9d5b7e983a1cf 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -13,7 +13,7 @@ import { InspectorControls, useBlockProps, useSetting, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js index 7f19efe24da3d..9d52ff19d0823 100644 --- a/packages/block-library/src/column/save.js +++ b/packages/block-library/src/column/save.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { verticalAlignment, width } = attributes; @@ -32,14 +32,11 @@ export default function save( { attributes } ) { style = { flexBasis }; } - return ( -
- -
- ); + const blockProps = useBlockProps.save( { + className: wrapperClasses, + style, + } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + + return
; } diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 35534d503bb72..ab74ab527ea31 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -17,7 +17,7 @@ import { import { InspectorControls, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, BlockControls, BlockVerticalAlignmentToolbar, __experimentalBlockVariationPicker, diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 3c80d0edc21f5..0dde559530853 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { isStackedOnMobile, verticalAlignment } = attributes; @@ -16,9 +16,8 @@ export default function save( { attributes } ) { [ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile, } ); - return ( -
- -
- ); + const blockProps = useBlockProps.save( { className } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + + return
; } diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 1d556e874282c..2db1ce2204d1a 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -38,7 +38,7 @@ import { ColorPalette, useBlockProps, useSetting, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, __experimentalUseGradient, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, __experimentalUnitControl as UnitControl, diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index f4d1659fe9234..3209106ff8e80 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -6,7 +6,7 @@ import { InnerBlocks, useBlockProps, InspectorControls, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index bab082b6dedaa..1e6d2e59b8b3f 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -13,7 +13,7 @@ import { useState, useRef } from '@wordpress/element'; import { BlockControls, BlockVerticalAlignmentControl, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, InspectorControls, useBlockProps, __experimentalImageURLInputUI as ImageURLInputUI, diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index 039f379768892..24b4d68e44614 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -3,7 +3,7 @@ */ import { useEntityBlockEditor } from '@wordpress/core-data'; import { - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, __experimentalBlockContentOverlay as BlockContentOverlay, store as blockEditorStore, } from '@wordpress/block-editor'; diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 3b3214be223ff..64bdb26745c38 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -10,7 +10,7 @@ import { getBlockSupport } from '@wordpress/blocks'; import { Fragment, useEffect } from '@wordpress/element'; import { BlockControls, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, useBlockProps, InspectorControls, ContrastChecker, 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 ba07a28e14f19..7d7b74283b441 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -4,7 +4,7 @@ import { useEntityBlockEditor } from '@wordpress/core-data'; import { InnerBlocks, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, __experimentalBlockContentOverlay as BlockContentOverlay, useSetting, store as blockEditorStore, diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index e567cde21e74b..b5ae50093233d 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -62,6 +62,7 @@ export { getSaveElement, getSaveContent, getBlockProps as __unstableGetBlockProps, + getInnerBlocksProps as __unstableGetInnerBlocksProps, __unstableSerializeAndClean, } from './serializer'; diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index a5e8e679b4583..59a37882815e9 100644 --- a/packages/blocks/src/api/serializer.js +++ b/packages/blocks/src/api/serializer.js @@ -6,7 +6,12 @@ import { isEmpty, reduce, isObject, castArray, startsWith } from 'lodash'; /** * WordPress dependencies */ -import { Component, cloneElement, renderToString } from '@wordpress/element'; +import { + Component, + cloneElement, + renderToString, + RawHTML, +} from '@wordpress/element'; import { hasFilter, applyFilters } from '@wordpress/hooks'; import isShallowEqual from '@wordpress/is-shallow-equal'; import { removep } from '@wordpress/autop'; @@ -70,6 +75,7 @@ export function getBlockMenuDefaultClassName( blockName ) { } const blockPropsProvider = {}; +const innerBlocksPropsProvider = {}; /** * Call within a save function to get the props for the block wrapper. @@ -86,6 +92,21 @@ export function getBlockProps( props = {} ) { ); } +/** + * Call within a save function to get the props for the inner blocks wrapper. + * + * @param {Object} props Optional. Props to pass to the element. + */ +export function getInnerBlocksProps( props = {} ) { + const { innerBlocks } = innerBlocksPropsProvider; + // Value is an array of blocks, so defer to block serializer + const html = serialize( innerBlocks, { isInnerBlocks: true } ); + // Use special-cased raw HTML tag to avoid default escaping. + const children = { html }; + + return { ...props, children }; +} + /** * Given a block type containing a save render implementation and attributes, returns the * enhanced element to be saved or string when raw HTML expected. @@ -114,6 +135,7 @@ export function getSaveElement( blockPropsProvider.blockType = blockType; blockPropsProvider.attributes = attributes; + innerBlocksPropsProvider.innerBlocks = innerBlocks; let element = save( { attributes, innerBlocks } ); From b18fa7f91dcf132e9069fe1d5b0865184be45ef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 12 Oct 2020 18:58:28 +0300 Subject: [PATCH 2/8] Use in InnerBlocks.Content internally --- packages/block-library/src/buttons/save.js | 20 +++++++++---------- packages/block-library/src/cover/save.js | 10 ++++++---- packages/block-library/src/group/save.js | 11 +++------- packages/block-library/src/media-text/save.js | 10 ++++++---- packages/blocks/src/api/serializer.js | 10 ++-------- 5 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js index 784833b63ca32..5f590e72d049b 100644 --- a/packages/block-library/src/buttons/save.js +++ b/packages/block-library/src/buttons/save.js @@ -6,21 +6,21 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; export default function save( { attributes: { contentJustification, orientation }, } ) { return (
- -
+ { ...useInnerBlocksProps.save( + useBlockProps.save( { + className: classnames( { + [ `is-content-justification-${ contentJustification }` ]: contentJustification, + 'is-vertical': orientation === 'vertical', + } ), + } ) + ) } + /> ); } diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index c12a316f30ea0..e90f00337a8e5 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { - InnerBlocks, + useInnerBlocksProps, getColorClassName, __experimentalGetGradientClass, useBlockProps, @@ -135,9 +135,11 @@ export default function save( { attributes } ) { data-object-position={ objectPosition } /> ) } -
- -
+
); } diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js index 60e4dbd30a8f5..93815744a2b5c 100644 --- a/packages/block-library/src/group/save.js +++ b/packages/block-library/src/group/save.js @@ -1,13 +1,8 @@ /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes } ) { - const { tagName: Tag } = attributes; - return ( - - - - ); +export default function save( { attributes: { tagName: Tag } } ) { + return ; } diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js index b20daa857752c..91a496ad580b6 100644 --- a/packages/block-library/src/media-text/save.js +++ b/packages/block-library/src/media-text/save.js @@ -7,7 +7,7 @@ import { noop, isEmpty } from 'lodash'; /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies @@ -95,9 +95,11 @@ export default function save( { attributes } ) { > { ( mediaTypeRenders[ mediaType ] || noop )() } -
- -
+
); } diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index 59a37882815e9..ecb97173cf063 100644 --- a/packages/blocks/src/api/serializer.js +++ b/packages/blocks/src/api/serializer.js @@ -25,7 +25,6 @@ import { getUnregisteredTypeHandlerName, } from './registration'; import { isUnmodifiedDefaultBlock, normalizeBlockType } from './utils'; -import BlockContentProvider from '../block-content-provider'; /** * @typedef {Object} WPBlockSerializationOptions Serialization Options. @@ -140,6 +139,7 @@ export function getSaveElement( let element = save( { attributes, innerBlocks } ); if ( + ! blockType.apiVersion && isObject( element ) && hasFilter( 'blocks.getSaveContent.extraProps' ) && ! ( blockType.apiVersion > 1 ) @@ -170,18 +170,12 @@ export function getSaveElement( * @param {WPBlock} blockType Block type definition. * @param {Object} attributes Block attributes. */ - element = applyFilters( + return applyFilters( 'blocks.getSaveElement', element, blockType, attributes ); - - return ( - - { element } - - ); } /** From 2a9090dfc3e7b76018a1eb3c9f8850e8da21d036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 28 Sep 2021 17:01:59 +0300 Subject: [PATCH 3/8] Rebase fixes --- packages/block-editor/README.md | 19 +++++++++++++++++++ .../src/components/index.native.js | 5 +---- packages/block-library/src/block/edit.js | 2 +- packages/block-library/src/gallery/gallery.js | 5 +---- .../src/gallery/gallery.native.js | 5 +---- .../src/navigation-submenu/edit.js | 2 +- .../block-library/src/post-content/edit.js | 2 +- .../block-library/src/post-template/edit.js | 2 +- .../src/query-pagination/edit.js | 2 +- .../block-library/src/query/edit/index.js | 2 +- .../blocks/widget-area/edit/inner-blocks.js | 7 ++----- 11 files changed, 30 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index da2515ead12b0..5c8f30a5802ce 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -680,6 +680,25 @@ _Returns_ - `Object`: Props to pass to the element to mark as a block. +### useInnerBlocksProps + +This hook is used to lightly mark an element as an inner blocks wrapper +element. Call this hook and pass the returned props to the element to mark as +an inner blocks wrapper, automatically rendering inner blocks as children. If +you define a ref for the element, it is important to pass the ref to this +hook, which the hook in turn will pass to the component through the props it +returns. Optionally, you can also pass any other props through this hook, and +they will be merged and returned. + +_Related_ + +- + +_Parameters_ + +- _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. +- _options_ `Object`: Optional. Inner blocks options. + ### useSetting Hook that retrieves the editor setting. diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 995042b7d65cd..ff9456282bd23 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -18,10 +18,7 @@ export * from './colors'; export * from './gradients'; export * from './font-sizes'; export { AlignmentControl, AlignmentToolbar } from './alignment-control'; -export { - default as InnerBlocks, - useInnerBlocksProps as __experimentalUseInnerBlocksProps, -} from './inner-blocks'; +export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks'; export { default as InspectorControls, InspectorAdvancedControls, diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index bf4f933773d6b..ce2bb4c89b90a 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -17,7 +17,7 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, __experimentalBlockContentOverlay as BlockContentOverlay, InnerBlocks, diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index e3ff764fa9ad4..2322055362026 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -6,10 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - RichText, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, -} from '@wordpress/block-editor'; +import { RichText, useInnerBlocksProps } from '@wordpress/block-editor'; import { VisuallyHidden } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 6dc9399747aae..ccdf86f3ea372 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -14,10 +14,7 @@ import styles from './gallery-styles.scss'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { - BlockCaption, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, -} from '@wordpress/block-editor'; +import { BlockCaption, useInnerBlocksProps } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; import { mediaUploadSync } from '@wordpress/react-native-bridge'; import { WIDE_ALIGNMENTS } from '@wordpress/components'; diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index 42a8872ea235f..69fffeb6e996e 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -21,7 +21,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { BlockControls, InnerBlocks, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, InspectorControls, RichText, __experimentalLinkControl as LinkControl, diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 6c04fa2e54fd8..4a0c277a1f5cf 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data'; import { RawHTML } from '@wordpress/element'; import { useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, useSetting, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, store as blockEditorStore, diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 2c8c142c2f4a0..c5d808509d72c 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -13,7 +13,7 @@ import { BlockContextProvider, BlockPreview, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { Spinner } from '@wordpress/components'; diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index f5a57bae9f28c..c4be9970a368e 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index b08bd12eba31b..af62af287c544 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -11,7 +11,7 @@ import { useBlockProps, useSetting, store as blockEditorStore, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, __experimentalBlockPatternSetup as BlockPatternSetup, } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js index 83800d875e62c..ffb04004a3d7c 100644 --- a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js +++ b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js @@ -7,10 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEntityBlockEditor } from '@wordpress/core-data'; -import { - InnerBlocks, - __experimentalUseInnerBlocksProps, -} from '@wordpress/block-editor'; +import { InnerBlocks, useInnerBlocksProps } from '@wordpress/block-editor'; import { useRef } from '@wordpress/element'; /** @@ -27,7 +24,7 @@ export default function WidgetAreaInnerBlocks( { id } ) { const isDraggingWithinInnerBlocks = useIsDraggingWithin( innerBlocksRef ); const shouldHighlightDropZone = isDraggingWithinInnerBlocks; // Using the experimental hook so that we can control the className of the element. - const innerBlocksProps = __experimentalUseInnerBlocksProps( + const innerBlocksProps = useInnerBlocksProps( { ref: innerBlocksRef }, { value: blocks, From 13bf7b848b4d1e238f28db4933e41144b8e26f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 28 Sep 2021 17:41:08 +0300 Subject: [PATCH 4/8] Fix native --- .../src/components/inner-blocks/index.native.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 e1b87087fcbeb..27bfec37adaf5 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { getBlockType, withBlockContentContext } from '@wordpress/blocks'; +import { + getBlockType, + __unstableGetInnerBlocksProps as getInnerBlocksProps, +} from '@wordpress/blocks'; import { useRef } from '@wordpress/element'; /** @@ -189,9 +192,9 @@ const InnerBlocks = ( props ) => { InnerBlocks.DefaultBlockAppender = DefaultBlockAppender; InnerBlocks.ButtonBlockAppender = ButtonBlockAppender; -InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => ( - -) ); +useInnerBlocksProps.save = getInnerBlocksProps; + +InnerBlocks.Content = () => useInnerBlocksProps.save().children; /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md From ed985d412c8ae45e58539b5ee66ffa47bdaf5d11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 11 Oct 2021 17:15:39 +0300 Subject: [PATCH 5/8] Address feedback --- packages/block-editor/src/components/index.js | 5 +---- packages/block-library/src/post-comment/edit.js | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 48ca597353706..dcccb216217e3 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -54,10 +54,7 @@ export { ImageEditingProvider as __experimentalImageEditingProvider, } from './image-editor'; export { default as __experimentalImageSizeControl } from './image-size-control'; -export { - default as InnerBlocks, - useInnerBlocksProps as useInnerBlocksProps, -} from './inner-blocks'; +export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks'; export { default as InspectorControls, InspectorAdvancedControls, diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js index d293a45c1fff6..5f747a4ec1d7d 100644 --- a/packages/block-library/src/post-comment/edit.js +++ b/packages/block-library/src/post-comment/edit.js @@ -5,10 +5,7 @@ import { __, _x } from '@wordpress/i18n'; import { Placeholder, TextControl, Button } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { blockDefault } from '@wordpress/icons'; -import { - useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, -} from '@wordpress/block-editor'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; const ALLOWED_BLOCKS = [ 'core/post-comment-content', From 1c24d37009af7059e48288fac5bae0011614ebd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 12 Oct 2021 11:33:00 +0300 Subject: [PATCH 6/8] Adjust remaning save functions --- packages/block-library/src/buttons/save.js | 20 ++++++++----------- packages/block-library/src/gallery/save.js | 12 ++++++++--- .../block-library/src/post-comment/save.js | 10 ++++------ packages/block-library/src/query/save.js | 10 ++++------ .../block-library/src/social-links/save.js | 10 ++++------ 5 files changed, 29 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js index 5f590e72d049b..0c17b5c3d2bc0 100644 --- a/packages/block-library/src/buttons/save.js +++ b/packages/block-library/src/buttons/save.js @@ -11,16 +11,12 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; export default function save( { attributes: { contentJustification, orientation }, } ) { - return ( -
- ); + const blockProps = useBlockProps.save( { + className: classnames( { + [ `is-content-justification-${ contentJustification }` ]: contentJustification, + 'is-vertical': orientation === 'vertical', + } ), + } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + return
; } diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index 77afff7f27984..781b96d2aedbe 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -6,7 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor'; +import { + RichText, + useBlockProps, + useInnerBlocksProps, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -25,10 +29,12 @@ export default function saveWithInnerBlocks( { attributes } ) { [ `columns-default` ]: columns === undefined, 'is-cropped': imageCrop, } ); + const blockProps = useBlockProps.save( { className } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); return ( -
- +
+ { innerBlocksProps.children } { ! RichText.isEmpty( caption ) && ( - -
- ); + const blockProps = useBlockProps.save(); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + return
; } diff --git a/packages/block-library/src/query/save.js b/packages/block-library/src/query/save.js index bf172ce2a40b4..d8ae9942ed6f1 100644 --- a/packages/block-library/src/query/save.js +++ b/packages/block-library/src/query/save.js @@ -1,12 +1,10 @@ /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) { - return ( - - - - ); + const blockProps = useBlockProps.save(); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + return ; } diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js index 7ed90959cc9cd..69b355a2587dd 100644 --- a/packages/block-library/src/social-links/save.js +++ b/packages/block-library/src/social-links/save.js @@ -6,7 +6,7 @@ import classNames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; export default function save( props ) { const { @@ -17,10 +17,8 @@ export default function save( props ) { 'has-icon-color': iconColorValue, 'has-icon-background-color': iconBackgroundColorValue, } ); + const blockProps = useBlockProps.save( { className } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); - return ( -
    - -
- ); + return
    ; } From 9b4c4616feffc11670a5a483e9de8430584ec621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 12 Oct 2021 11:43:23 +0300 Subject: [PATCH 7/8] Revert apiVersion check --- packages/blocks/src/api/serializer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index ecb97173cf063..a82fbde890cb3 100644 --- a/packages/blocks/src/api/serializer.js +++ b/packages/blocks/src/api/serializer.js @@ -139,7 +139,6 @@ export function getSaveElement( let element = save( { attributes, innerBlocks } ); if ( - ! blockType.apiVersion && isObject( element ) && hasFilter( 'blocks.getSaveContent.extraProps' ) && ! ( blockType.apiVersion > 1 ) From 69ff0aff356478bb8dca85d3d7c871e452a4d3c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 29 Oct 2021 11:28:28 +0300 Subject: [PATCH 8/8] Adjust new instances --- packages/block-library/src/comment-template/edit.js | 2 +- packages/block-library/src/comments-query-loop/edit.js | 2 +- .../src/navigation/edit/unsaved-inner-blocks.js | 5 +---- packages/block-library/src/pattern/edit.js | 2 +- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index a5b544f474923..b5c3f9944f920 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -8,7 +8,7 @@ import { BlockContextProvider, BlockPreview, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { Spinner } from '@wordpress/components'; diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index 4624556158b88..1026736b355da 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -5,7 +5,7 @@ import { BlockControls, InspectorControls, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js index d0411e98a7a49..23dd393dea8f6 100644 --- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - __experimentalUseInnerBlocksProps as useInnerBlocksProps, - Warning, -} from '@wordpress/block-editor'; +import { useInnerBlocksProps, Warning } from '@wordpress/block-editor'; import { serialize } from '@wordpress/blocks'; import { Button, Disabled } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index e0cab9c7b86e4..9b2ede2fd038d 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -6,7 +6,7 @@ import { useEffect } from '@wordpress/element'; import { store as blockEditorStore, useBlockProps, - __experimentalUseInnerBlocksProps as useInnerBlocksProps, + useInnerBlocksProps, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks';