Fix Template Part Alignments behavior

WordPress · Mar 23, 2021 · 4eefda0 · 4eefda0
1 parent d7e2137
commit 4eefda0
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 65 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -68,6 +68,10 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
+		if ( ! ref.current ) {
+			return;
+		}
+
 		const { ownerDocument } = ref.current;
 
 		// Focus is captured by the wrapper node, so while focus transition

diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -14,13 +14,11 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
-import { store as blockEditorStore } from '../store';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
 
 /**
@@ -166,10 +164,6 @@ export const withDataAlign = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { align } = attributes;
-		const hasWideEnabled = useSelect(
-			( select ) => !! select( blockEditorStore ).getSettings().alignWide,
-			[]
-		);
 
 		// If an alignment is not assigned, there's no need to go through the
 		// effort to validate or assign its value.
@@ -179,8 +173,7 @@ export const withDataAlign = createHigherOrderComponent(
 
 		const validAlignments = getValidAlignments(
 			getBlockSupport( name, 'align' ),
-			hasBlockSupport( name, 'alignWide', true ),
-			hasWideEnabled
+			hasBlockSupport( name, 'alignWide', true )
 		);
 
 		let wrapperProps = props.wrapperProps;

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -114,51 +114,57 @@ export default function TemplatePartEdit( {
 				isEntityAvailable={ isEntityAvailable }
 				templatePartId={ templatePartId }
 			/>
-			<TagName { ...blockProps }>
-				{ isPlaceholder && (
+			{ isPlaceholder && (
+				<TagName { ...blockProps }>
 					<TemplatePartPlaceholder
 						area={ attributes.area }
 						setAttributes={ setAttributes }
 						innerBlocks={ innerBlocks }
 					/>
-				) }
-				{ isEntityAvailable && (
-					<BlockControls>
-						<ToolbarGroup className="wp-block-template-part__block-control-group">
-							<Dropdown
-								className="wp-block-template-part__preview-dropdown-button"
-								contentClassName="wp-block-template-part__preview-dropdown-content"
-								position="bottom right left"
-								renderToggle={ ( { isOpen, onToggle } ) => (
-									<ToolbarButton
-										aria-expanded={ isOpen }
-										onClick={ onToggle }
-										// Disable when open to prevent odd FireFox bug causing reopening.
-										// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
-										disabled={ isOpen }
-									>
-										{ __( 'Replace' ) }
-									</ToolbarButton>
-								) }
-								renderContent={ ( { onClose } ) => (
-									<TemplatePartSelection
-										setAttributes={ setAttributes }
-										onClose={ onClose }
-									/>
-								) }
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
-				{ isEntityAvailable && (
-					<TemplatePartInnerBlocks
-						postId={ templatePartId }
-						hasInnerBlocks={ innerBlocks.length > 0 }
-						layout={ layout }
-					/>
-				) }
-				{ ! isPlaceholder && ! isResolved && <Spinner /> }
-			</TagName>
+				</TagName>
+			) }
+			{ isEntityAvailable && (
+				<BlockControls>
+					<ToolbarGroup className="wp-block-template-part__block-control-group">
+						<Dropdown
+							className="wp-block-template-part__preview-dropdown-button"
+							contentClassName="wp-block-template-part__preview-dropdown-content"
+							position="bottom right left"
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<ToolbarButton
+									aria-expanded={ isOpen }
+									onClick={ onToggle }
+									// Disable when open to prevent odd FireFox bug causing reopening.
+									// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
+									disabled={ isOpen }
+								>
+									{ __( 'Replace' ) }
+								</ToolbarButton>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<TemplatePartSelection
+									setAttributes={ setAttributes }
+									onClose={ onClose }
+								/>
+							) }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			{ isEntityAvailable && (
+				<TemplatePartInnerBlocks
+					tagName={ TagName }
+					blockProps={ blockProps }
+					postId={ templatePartId }
+					hasInnerBlocks={ innerBlocks.length > 0 }
+					layout={ layout }
+				/>
+			) }
+			{ ! isPlaceholder && ! isResolved && (
+				<TagName { ...blockProps }>
+					<Spinner />
+				</TagName>
+			) }
 		</RecursionProvider>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -14,6 +14,8 @@ export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
 	layout,
+	tagName: TagName,
+	blockProps,
 } ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -31,21 +33,18 @@ export default function TemplatePartInnerBlocks( {
 		'wp_template_part',
 		{ id }
 	);
-	const innerBlocksProps = useInnerBlocksProps(
-		{},
-		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: {
-				type: 'default',
-				// Find a way to inject this in the support flag code (hooks).
-				alignments: themeSupportsLayout ? alignments : undefined,
-			},
-		}
-	);
-	return <div { ...innerBlocksProps } />;
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+		__experimentalLayout: {
+			type: 'default',
+			// Find a way to inject this in the support flag code (hooks).
+			alignments: themeSupportsLayout ? alignments : undefined,
+		},
+	} );
+	return <TagName { ...innerBlocksProps } />;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,6 +68,10 @@ export function useFocusFirstElement( clientId ) { @@
     			return;
     		}
+    		if ( ! ref.current ) {
+    			return;
+    		}
     		const { ownerDocument } = ref.current;
     		// Focus is captured by the wrapper node, so while focus transition
@@ Expand Down @@