Block API: deprecate experimental Block.* component (#25515)

* Block API: deprecate experimental Block.* component

* Revert complex innerblock case

* Address feedback

* Adjust group block

* Fix innerblocks issue

* Fix template part block

* Add spinner

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -18,6 +18,7 @@ import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -286,14 +287,11 @@ export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) {
 }
 
 const BlockComponent = forwardRef(
- (
- { children, tagName: TagName = 'div', __unstableIsHtml, ...props },
- ref
- ) => {
- const blockWrapperProps = useBlockWrapperProps(
- { ...props, ref },
- { __unstableIsHtml }
- );
+ ( { children, tagName: TagName = 'div', ...props }, ref ) => {
+ deprecated( 'wp.blockEditor.__experimentalBlock', {
+ alternative: 'wp.blockEditor.__experimentalUseBlockWrapperProps',
+ } );
+ const blockWrapperProps = useBlockWrapperProps( { ...props, ref } );
  return <TagName { ...blockWrapperProps }>{ children }</TagName>;
  }
 );

packages/block-editor/src/components/block-list/block.js

@@ -40,7 +40,7 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
-import { Block } from './block-wrapper';
+import { useBlockWrapperProps } from './block-wrapper';
 
 export const BlockListBlockContext = createContext();
 
@@ -68,6 +68,14 @@ function mergeWrapperProps( propsA, propsB ) {
  return newProps;
 }
 
+function Block( { children, isHtml, ...props } ) {
+ return (
+ <div { ...useBlockWrapperProps( props, { __unstableIsHtml: isHtml } ) }>
+ { children }
+ </div>
+ );
+}
+
 function BlockListBlock( {
  mode,
  isFocusMode,
@@ -219,26 +227,26 @@ function BlockListBlock( {
 
  if ( ! isValid ) {
  block = (
- <Block.div>
+ <Block>
  <BlockInvalidWarning clientId={ clientId } />
  <div>{ getSaveElement( blockType, attributes ) }</div>
- </Block.div>
+ </Block>
  );
  } else if ( mode === 'html' ) {
  // Render blockEdit so the inspector controls don't disappear.
  // See #8969.
  block = (
  <>
  <div style={ { display: 'none' } }>{ blockEdit }</div>
- <Block.div __unstableIsHtml>
+ <Block isHtml>
  <BlockHtml clientId={ clientId } />
- </Block.div>
+ </Block>
  </>
  );
  } else if ( lightBlockWrapper ) {
  block = blockEdit;
  } else {
- block = <Block.div { ...wrapperProps }>{ blockEdit }</Block.div>;
+ block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
  }
 
  return (
@@ -247,9 +255,9 @@ function BlockListBlock( {
  { block }
  </BlockCrashBoundary>
  { !! hasError && (
- <Block.div>
+ <Block>
  <BlockCrashWarning />
- </Block.div>
+ </Block>
  ) }
  </BlockListBlockContext.Provider>
  );

packages/block-editor/src/components/block-list/index.js

@@ -80,8 +80,8 @@ function BlockList(
 
  return (
  <Container
- { ...__experimentalPassedProps }
  ref={ ref }
+ { ...__experimentalPassedProps }
  className={ classnames(
  'block-editor-block-list__layout',
  className,

packages/block-library/src/column/edit.js

@@ -11,7 +11,7 @@ import {
  BlockControls,
  BlockVerticalAlignmentToolbar,
  InspectorControls,
- __experimentalBlock as Block,
+ __experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { PanelBody, RangeControl } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -52,6 +52,10 @@ function ColumnEdit( {
  };
 
  const hasWidth = Number.isFinite( width );
+ const blockWrapperProps = useBlockWrapperProps( {
+ className: classes,
+ style: hasWidth ? { flexBasis: width + '%' } : undefined,
+ } );
 
  return (
  <>
@@ -83,15 +87,10 @@ function ColumnEdit( {
  <InnerBlocks
  templateLock={ false }
  renderAppender={
- hasChildBlocks
- ? undefined
- : () => <InnerBlocks.ButtonBlockAppender />
+ hasChildBlocks ? undefined : InnerBlocks.ButtonBlockAppender
  }
- __experimentalTagName={ Block.div }
- __experimentalPassedProps={ {
- className: classes,
- style: hasWidth ? { flexBasis: width + '%' } : undefined,
- } }
+ __experimentalTagName="div"
+ __experimentalPassedProps={ blockWrapperProps }
  />
  </>
  );

packages/block-library/src/columns/edit.js

@@ -16,7 +16,7 @@ import {
  BlockControls,
  BlockVerticalAlignmentToolbar,
  __experimentalBlockVariationPicker,
- __experimentalBlock as Block,
+ __experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -63,6 +63,10 @@ function ColumnsEditContainer( {
  [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
  } );
 
+ const blockWrapperProps = useBlockWrapperProps( {
+ className: classes,
+ } );
+
  return (
  <>
  <BlockControls>
@@ -92,10 +96,8 @@ function ColumnsEditContainer( {
  <InnerBlocks
  allowedBlocks={ ALLOWED_BLOCKS }
  orientation="horizontal"
- __experimentalTagName={ Block.div }
- __experimentalPassedProps={ {
- className: classes,
- } }
+ __experimentalTagName="div"
+ __experimentalPassedProps={ blockWrapperProps }
  renderAppender={ false }
  />
  </>
@@ -208,14 +210,8 @@ const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
  );
 };
 
-const ColumnsEdit = ( props ) => {
- const { clientId, name } = props;
- const {
- blockType,
- defaultVariation,
- hasInnerBlocks,
- variations,
- } = useSelect(
+function Placeholder( { clientId, name, setAttributes } ) {
+ const { blockType, defaultVariation, variations } = useSelect(
  ( select ) => {
  const {
  getBlockVariations,
@@ -226,34 +222,27 @@ const ColumnsEdit = ( props ) => {
  return {
  blockType: getBlockType( name ),
  defaultVariation: getDefaultBlockVariation( name, 'block' ),
- hasInnerBlocks:
- select( 'core/block-editor' ).getBlocks( clientId ).length >
- 0,
  variations: getBlockVariations( name, 'block' ),
  };
  },
- [ clientId, name ]
+ [ name ]
  );
-
  const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
-
- if ( hasInnerBlocks ) {
- return <ColumnsEditContainerWrapper { ...props } />;
- }
+ const blockWrapperProps = useBlockWrapperProps();
 
  return (
- <Block.div>
+ <div { ...blockWrapperProps }>
  <__experimentalBlockVariationPicker
  icon={ get( blockType, [ 'icon', 'src' ] ) }
  label={ get( blockType, [ 'title' ] ) }
  variations={ variations }
  onSelect={ ( nextVariation = defaultVariation ) => {
  if ( nextVariation.attributes ) {
- props.setAttributes( nextVariation.attributes );
+ setAttributes( nextVariation.attributes );
  }
  if ( nextVariation.innerBlocks ) {
  replaceInnerBlocks(
- props.clientId,
+ clientId,
  createBlocksFromInnerBlocksTemplate(
  nextVariation.innerBlocks
  )
@@ -262,8 +251,22 @@ const ColumnsEdit = ( props ) => {
  } }
  allowSkip
  />
- </Block.div>
+ </div>
  );
+}
+
+const ColumnsEdit = ( props ) => {
+ const { clientId } = props;
+ const hasInnerBlocks = useSelect(
+ ( select ) =>
+ select( 'core/block-editor' ).getBlocks( clientId ).length > 0,
+ [ clientId ]
+ );
+ const Component = hasInnerBlocks
+ ? ColumnsEditContainerWrapper
+ : Placeholder;
+
+ return <Component { ...props } />;
 };
 
 export default ColumnsEdit;

packages/block-library/src/group/edit.js

@@ -4,12 +4,12 @@
 import { useSelect } from '@wordpress/data';
 import {
  InnerBlocks,
- __experimentalBlock as Block,
+ __experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
-function GroupEdit( { attributes, className, clientId } ) {
+function GroupEdit( { attributes, clientId } ) {
  const hasInnerBlocks = useSelect(
  ( select ) => {
  const { getBlock } = select( 'core/block-editor' );
@@ -18,26 +18,25 @@ function GroupEdit( { attributes, className, clientId } ) {
  },
  [ clientId ]
  );
- const BlockWrapper = Block[ attributes.tagName ];
+ const blockWrapperProps = useBlockWrapperProps();
+ const { tagName: TagName = 'div' } = attributes;
 
  return (
- <BlockWrapper className={ className }>
+ <TagName { ...blockWrapperProps }>
  <BoxControlVisualizer
  values={ attributes.style?.spacing?.padding }
  showValues={ attributes.style?.visualizers?.padding }
  />
  <InnerBlocks
  renderAppender={
- hasInnerBlocks
- ? undefined
- : () => <InnerBlocks.ButtonBlockAppender />
+ hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender
  }
  __experimentalTagName="div"
  __experimentalPassedProps={ {
  className: 'wp-block-group__inner-container',
  } }
  />
- </BlockWrapper>
+ </TagName>
  );
 }
 

packages/block-library/src/heading/edit.js

@@ -12,7 +12,7 @@ import {
  AlignmentToolbar,
  BlockControls,
  RichText,
- __experimentalBlock as Block,
+ __experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 
@@ -30,6 +30,12 @@ function HeadingEdit( {
 } ) {
  const { align, content, level, placeholder } = attributes;
  const tagName = 'h' + level;
+ const blockWrapperProps = useBlockWrapperProps( {
+ className: classnames( {
+ [ `has-text-align-${ align }` ]: align,
+ } ),
+ style: mergedStyle,
+ } );
 
  return (
  <>
@@ -51,7 +57,7 @@ function HeadingEdit( {
  </BlockControls>
  <RichText
  identifier="content"
- tagName={ Block[ tagName ] }
+ tagName={ tagName }
  value={ content }
  onChange={ ( value ) => setAttributes( { content: value } ) }
  onMerge={ mergeBlocks }
@@ -67,12 +73,9 @@ function HeadingEdit( {
  } }
  onReplace={ onReplace }
  onRemove={ () => onReplace( [] ) }
- className={ classnames( {
- [ `has-text-align-${ align }` ]: align,
- } ) }
  placeholder={ placeholder || __( 'Write heading…' ) }
  textAlign={ align }
- style={ mergedStyle }
+ { ...blockWrapperProps }
  />
  </>
  );