Inner Blocks: Fix bug that caused alignment controls to show in Image blocks within a Gallery

packages/block-editor/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Bug Fixes
 
+-   `InnerBlocks`: Resolve the `default` of a block's `layout` support before providing it to inner blocks. A block that declared its layout only as a support default, such as the Gallery, previously handed its children the raw support config, which has no `type`, so the children resolved to the flow layout instead. As a result an Image nested in a Gallery offered left/center/right alignment, which the flex layout does not permit ([#81606](https://github.com/WordPress/gutenberg/pull/81606)).
 -   Never apply Spotlight mode in a preview canvas, which cannot be edited and so rendered most of its content faded ([#81615](https://github.com/WordPress/gutenberg/pull/81615)).
 -   Grid: Keep child layout changes made with the resizer scoped to the selected viewport.
 -   `DimensionsTool`: Reflect aspect ratio and scale values that are updated from outside the component, such as by undo or `updateBlockAttributes`. The scale control no longer displays a stale value, and an aspect ratio that is written differently to its preset, e.g. `1/1` rather than `1`, is displayed as that preset instead of as "Original" ([#80747](https://github.com/WordPress/gutenberg/pull/80747)).

packages/block-editor/src/components/inner-blocks/index.js

@@ -94,7 +94,11 @@ function UncontrolledInnerBlocks( props ) {
 		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
-	const usedLayout = layout || defaultLayoutBlockSupport;
+	// The support is a config object, e.g. `{ allowSwitching: false, default: { type: 'flex' } }`,
+	// so the layout itself lives under `default`. Passing the config through would leave the
+	// context without a `type`, and consumers would resolve it to the flow layout.
+	const usedLayout =
+		layout || defaultLayoutBlockSupport.default || EMPTY_OBJECT;
 
 	const memoedLayout = useMemo(
 		() => ( {

packages/block-library/src/gallery/test/edit.js

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/react';
+import { createBlock } from '@wordpress/blocks';
+import {
+	initializeEditor,
+	selectBlock,
+} from '@wordpress/integration-tests/helpers/integration-test-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const IMAGE_ATTRIBUTES = {
+	id: 1,
+	url: 'https://example.com/image.jpg',
+	alt: 'Example image',
+};
+
+/**
+ * Registers the core blocks up front so inner blocks can be created before the
+ * editor is initialized, then renders the given block.
+ *
+ * @param {Object} block Block to render, created with `createBlock`.
+ */
+async function setup( block ) {
+	return initializeEditor( block, false );
+}
+
+describe( 'Gallery block', () => {
+	beforeEach( () => {
+		registerCoreBlocks();
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'does not offer alignment for an image inside a gallery', async () => {
+			await setup(
+				createBlock( 'core/gallery', {}, [
+					createBlock( 'core/image', IMAGE_ATTRIBUTES ),
+				] )
+			);
+
+			await selectBlock( 'Block: Image' );
+
+			// The gallery lays its images out with the flex layout, which
+			// permits no alignments, so the child image must not offer them.
+			expect(
+				screen.queryByRole( 'button', { name: 'Align block' } )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'offers alignment for an image outside a gallery', async () => {
+			await setup( createBlock( 'core/image', IMAGE_ATTRIBUTES ) );
+
+			await selectBlock( 'Block: Image' );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Align block' } )
+			).toBeInTheDocument();
+		} );
+	} );
+} );