@wordpress/block-library 11.0.2-next.v.202609171837.0 → 11.1.0

package/src/image/image.jsx

@@ -6,7 +6,7 @@ import {
 	Spinner,
 	TextareaControl as WCTextareaControl,
 	TextControl,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	ToolbarButton,
 	ToolbarGroup,
 	__experimentalToolsPanel as ToolsPanel,
@@ -73,7 +73,6 @@ import { evalAspectRatio, mediaPosition } from './utils';
 
 const {
 	DimensionsTool,
-	isDefaultBlockStyleState,
 	ResolutionTool,
 	mediaEditKey,
 	mediaSideloadFromUrlKey,
@@ -666,20 +665,23 @@ export default function Image( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	const selectedStyleState = useSelect(
+	const { selectedStyleState, hasSelectedStyleState } = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
-				return undefined;
+				return {
+					selectedStyleState: undefined,
+					hasSelectedStyleState: false,
+				};
 			}
-			const { getSelectedBlockStyleState } = unlock(
-				select( blockEditorStore )
-			);
-			return getSelectedBlockStyleState( clientId );
+			const { getSelectedBlockStyleState, hasSelectedBlockStyleState } =
+				select( blockEditorStore );
+			return {
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+			};
 		},
 		[ clientId, isSingleSelected ]
 	);
-	const hasSelectedStyleState =
-		! isDefaultBlockStyleState( selectedStyleState );
 	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
 	const activeWidth = getActiveDimensionValue( {
 		attributes,
@@ -1043,7 +1045,7 @@ export default function Image( {
 									setAttributes( { isDecorative: false } )
 								}
 							>
-								<CheckboxControl
+								<WCCheckboxControl
 									label={ __( 'Mark as decorative' ) }
 									checked={ !! isDecorative }
 									onChange={ updateIsDecorative }

package/src/image/test/use-open-image-media-editor-modal.jsdom.test.js

@@ -623,6 +623,145 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		} );
 	} );
 
+	it( 'restores the alt text and caption a save overwrote when undoing back to the previous attachment', async () => {
+		const originalAttachment = {
+			id: 1,
+			alt_text: 'Original alt',
+			caption: { raw: 'Original caption' },
+		};
+		const croppedAttachment = {
+			id: 2,
+			alt_text: 'Updated alt',
+			caption: { raw: 'Updated caption' },
+		};
+		const registry = createRegistry( {
+			getEditedEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 1 ? originalAttachment : undefined,
+			resolveGetEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 2 ? croppedAttachment : originalAttachment,
+		} );
+		useRegistry.mockReturnValue( registry );
+		const setAttributes = vi.fn();
+		const openMediaEditorModal = vi.fn();
+		mockMediaEditorModalSetting( openMediaEditorModal );
+		const { result } = renderHook( () =>
+			useOpenImageMediaEditorModal( {
+				attributes: {
+					id: 1,
+					url: 'original.jpg',
+					alt: 'Original alt',
+					caption: 'Original caption',
+				},
+				setAttributes,
+			} )
+		);
+
+		await act( async () => {
+			await result.current();
+		} );
+		const onUpdate = openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUpdate;
+		await act( async () => {
+			await onUpdate( { id: 2, url: 'cropped.jpg' } );
+		} );
+		// The media editor's Undo only reports the previous attachment.
+		await act( async () => {
+			await onUpdate( { id: 1, url: 'original.jpg' } );
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 2 );
+		expect( setAttributes ).toHaveBeenNthCalledWith( 1, {
+			id: 2,
+			url: 'cropped.jpg',
+			alt: 'Updated alt',
+			caption: 'Updated caption',
+		} );
+		expect( setAttributes ).toHaveBeenNthCalledWith( 2, {
+			id: 1,
+			url: 'original.jpg',
+			alt: 'Original alt',
+			caption: 'Original caption',
+		} );
+	} );
+
+	it( 'does not restore overwritten metadata when a later session saves back to the previous attachment', async () => {
+		const originalAttachment = {
+			id: 1,
+			alt_text: 'Original alt',
+			caption: { raw: 'Original caption' },
+		};
+		const croppedAttachment = {
+			id: 2,
+			alt_text: 'Updated alt',
+			caption: { raw: 'Updated caption' },
+		};
+		const registry = createRegistry( {
+			getEditedEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 1 ? originalAttachment : croppedAttachment,
+			resolveGetEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 2
+					? croppedAttachment
+					: {
+							...originalAttachment,
+							alt_text: 'Server alt',
+							caption: { raw: 'Server caption' },
+						},
+		} );
+		useRegistry.mockReturnValue( registry );
+		const setAttributes = vi.fn();
+		const openMediaEditorModal = vi.fn();
+		mockMediaEditorModalSetting( openMediaEditorModal );
+		const { result, rerender } = renderHook(
+			( { attributes } ) =>
+				useOpenImageMediaEditorModal( { attributes, setAttributes } ),
+			{
+				initialProps: {
+					attributes: {
+						id: 1,
+						url: 'original.jpg',
+						alt: 'Original alt',
+						caption: 'Original caption',
+					},
+				},
+			}
+		);
+
+		await act( async () => {
+			await result.current();
+		} );
+		await act( async () => {
+			await openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUpdate( {
+				id: 2,
+				url: 'cropped.jpg',
+			} );
+		} );
+		rerender( {
+			attributes: {
+				id: 2,
+				url: 'cropped.jpg',
+				alt: 'Updated alt',
+				caption: 'Updated caption',
+			},
+		} );
+		// Opening the modal again starts a new session, so a save in it that
+		// happens to return the block to attachment 1 is not the Undo.
+		await act( async () => {
+			await result.current();
+		} );
+		await act( async () => {
+			await openMediaEditorModal.mock.calls[ 1 ][ 0 ].onUpdate( {
+				id: 1,
+				url: 'original.jpg',
+			} );
+		} );
+
+		expect( setAttributes ).toHaveBeenLastCalledWith( {
+			id: 1,
+			url: 'original.jpg',
+			alt: 'Server alt',
+			caption: 'Server caption',
+		} );
+	} );
+
 	it( 'resolves fresh metadata when the new attachment id has an incomplete cached record', async () => {
 		const originalAttachment = {
 			id: 1,

package/src/image/use-open-image-media-editor-modal.js

@@ -268,6 +268,11 @@ export function useOpenImageMediaEditorModal( {
 	// Incremented on every handleMediaUpdate call; stale async continuations
 	// check against this to bail out if a newer update has since started.
 	const mediaEditorMetadataSyncRequestRef = useRef( 0 );
+	// The alt text and caption a save overwrote on the block, and the
+	// attachment it moved the block away from. The media editor's Undo moves
+	// the block back but reports only that attachment's id and url, so this is
+	// what lets the update restore the block's own metadata too.
+	const mediaEditorUndoMetadataRef = useRef();
 
 	useEffect( () => {
 		blockAttributesRef.current = {
@@ -344,6 +349,10 @@ export function useOpenImageMediaEditorModal( {
 			// reuse a stale snapshot.
 			const originalAttachment = mediaEditorMetadataBaselineRef.current;
 			mediaEditorMetadataBaselineRef.current = undefined;
+			// Likewise the metadata the last save overwrote: only the update
+			// straight after that save, its Undo, may restore it.
+			const undoMetadata = mediaEditorUndoMetadataRef.current;
+			mediaEditorUndoMetadataRef.current = undefined;
 			const syncRequest = ++mediaEditorMetadataSyncRequestRef.current;
 			const nextAttributes = {};
 
@@ -413,6 +422,22 @@ export function useOpenImageMediaEditorModal( {
 							nextAttributes,
 							resolvedMetadataAttributes
 						);
+
+						// Only a save to a new attachment offers an Undo, so
+						// only then keep the values being overwritten.
+						if ( isNewAttachment ) {
+							mediaEditorUndoMetadataRef.current = {
+								id: currentBlockAttributes.id,
+								attributes: Object.fromEntries(
+									Object.keys(
+										resolvedMetadataAttributes
+									).map( ( key ) => [
+										key,
+										latestBlockAttributes[ key ],
+									] )
+								),
+							};
+						}
 					}
 				}
 
@@ -444,6 +469,13 @@ export function useOpenImageMediaEditorModal( {
 				}
 			}
 
+			// The media editor's Undo: the block is going back to the
+			// attachment the last save moved it away from, so put back the
+			// alt text and caption that save overwrote.
+			if ( undoMetadata?.id === newId ) {
+				Object.assign( nextAttributes, undoMetadata.attributes );
+			}
+
 			if ( Object.keys( nextAttributes ).length ) {
 				blockAttributesRef.current = {
 					...blockAttributesRef.current,
@@ -465,6 +497,11 @@ export function useOpenImageMediaEditorModal( {
 			return;
 		}
 
+		// A new session starts. Drop any metadata kept for the last save's
+		// Undo, so a save in this session that returns the block to that same
+		// attachment isn't mistaken for it.
+		mediaEditorUndoMetadataRef.current = undefined;
+
 		// Snapshot the attachment's current metadata before the user makes
 		// any changes so handleMediaUpdate can compare against it later. Use
 		// the cached record when it's already present; only resolve when

package/src/latest-comments/README.md

@@ -26,6 +26,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
@@ -33,6 +37,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/latest-comments/block.json

@@ -31,6 +31,15 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -45,6 +54,7 @@
 			"margin": true,
 			"padding": true
 		},
+		"shadow": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/latest-posts/README.md

@@ -40,6 +40,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
@@ -50,6 +54,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/latest-posts/block.json

@@ -79,6 +79,15 @@
 		"align": true,
 		"html": false,
 		"layout": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -123,6 +132,7 @@
 				"style": true
 			}
 		},
+		"shadow": true,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/loginout/README.md

@@ -24,6 +24,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
@@ -35,6 +39,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/loginout/block.json

@@ -23,6 +23,15 @@
 	"supports": {
 		"anchor": true,
 		"className": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"background": true,
 			"text": false,
@@ -56,6 +65,7 @@
 			"width": true,
 			"style": true
 		},
+		"shadow": true,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/math/README.md

@@ -24,8 +24,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/math/block.json

@@ -16,6 +16,15 @@
 			"style": true,
 			"width": true
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"__experimentalDefaultControls": {
@@ -23,6 +32,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/media-text/README.md

@@ -46,6 +46,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/media-text/block.json

@@ -116,6 +116,7 @@
 			"gradients": true,
 			"heading": true,
 			"link": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true

package/src/navigation/edit/index.jsx

@@ -295,10 +295,8 @@ function Navigation( {
 		hasSelectedStyleState,
 	} = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				hasSelectedStyleState: hasSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			const { getSettings, hasSelectedBlockStyleState } =
+				select( blockEditorStore );
 			const settings = getSettings();
 
 			return {

package/src/navigation/style.scss

@@ -123,6 +123,24 @@ $navigation-icon-size: 24px;
 		--navigation-layout-direction: column;
 		--navigation-layout-justify: initial;
 		--navigation-layout-align: flex-start;
+
+		// Align wrapped label text with the item justification. Only vertical
+		// menus need it: a horizontal item is only ever as wide as its own text.
+		text-align: var(--navigation-layout-text-align, inherit);
+
+		// Buttons declare their own text-align, and a directly declared value
+		// beats an inherited one, so opt submenu toggles back in.
+		.wp-block-navigation-item__content {
+			text-align: inherit;
+		}
+
+		// Flyout submenus are separate panels, so they keep their own
+		// alignment rather than following the parent menu's justification.
+		// open-always submenus render inline as part of the same vertical
+		// stack instead, so they should keep following it.
+		.wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
+			text-align: initial;
+		}
 	}
 
 	&.no-wrap {
@@ -132,6 +150,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-center {
 		--navigation-layout-justification-setting: center;
 		--navigation-layout-justify: center;
+		--navigation-layout-text-align: center;
 
 		&.is-vertical {
 			--navigation-layout-align: center;
@@ -141,6 +160,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-right {
 		--navigation-layout-justification-setting: flex-end;
 		--navigation-layout-justify: flex-end;
+		--navigation-layout-text-align: end;
 
 		&.is-vertical {
 			--navigation-layout-align: flex-end;
@@ -248,18 +268,18 @@ $navigation-icon-size: 24px;
 		height: auto;
 	}
 
-	// Show submenus on hover unless they open on click.
+	// Show submenus on hover unless they open on click or are always shown.
 	// Restricted to true-hover devices to prevent sticky touch-hover on mobile.
 	@media (hover: hover) {
-		&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+		&:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
 			@include show-submenu;
 			min-width: 200px;
 		}
 	}
 	// Keep submenus open when focus is within.
-	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+	&:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
+	&:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		@include show-submenu;
 		min-width: 200px;
 	}
@@ -313,6 +333,8 @@ $navigation-icon-size: 24px;
 			border: none;
 			background-color: transparent;
 			color: inherit;
+			// Has to be !important to override the inline instance style.
+			box-shadow: none !important;
 		}
 	}
 }
@@ -607,6 +629,7 @@ button.wp-block-navigation-item__content {
 
 				// Inherit alignment settings from container.
 				align-items: var(--navigation-layout-justification-setting, inherit);
+				text-align: var(--navigation-layout-text-align, inherit);
 
 				// Always align the contents of the menu to the top.
 				&,
@@ -645,11 +668,18 @@ button.wp-block-navigation-item__content {
 				// Apply top padding to nested submenus.
 				.wp-block-navigation__submenu-container {
 					padding-top: var(--wp--style--block-gap, 2em);
+
+					// Unfolded inline here, not shown as a panel, so submenus
+					// follow the menu's justification.
+					text-align: inherit;
 				}
 
 				// A default padding is added to submenu items. It's not appropriate inside the modal.
 				.wp-block-navigation-item__content {
 					padding: 0;
+
+					// See the note on submenu toggles above.
+					text-align: inherit;
 				}
 
 				// Default column display for overlay menu contents.
@@ -673,6 +703,12 @@ button.wp-block-navigation-item__content {
 				background: transparent !important;
 			}
 
+			// Submenus unfold inline here, so drop the dropdown shadow.
+			// Has to be !important to override the inline instance style.
+			.wp-block-navigation-item .wp-block-navigation__submenu-container {
+				box-shadow: none !important;
+			}
+
 			// Override justification dropdown menu positioning rules.
 			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 				right: auto;

package/src/navigation-link/editor.scss

@@ -35,11 +35,16 @@
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
-			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
 			overflow: visible !important;
 		}
+
+		// Always-open submenus are laid out inline rather than as a flyout,
+		// so the flyout minimum width would only make them jump when selected.
+		&:not(.open-always) > .wp-block-navigation__submenu-container {
+			min-width: 200px !important;
+		}
 	}
 }
 

package/src/navigation-link/link-ui/page-creator.jsx

@@ -2,7 +2,7 @@ import {
 	Button,
 	TextControl,
 	Notice,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
@@ -127,7 +127,7 @@ export function LinkUIPageCreator( {
 							value={ title }
 						/>
 
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Publish' ) }
 							help={ __(
 								"Turn off to save as a draft. Drafts won't appear on your site until published."

package/src/navigation-link/shared/controls.jsx

@@ -2,7 +2,7 @@ import {
 	Button,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	TextControl,
 	TextareaControl as WCTextareaControl,
 } from '@wordpress/components';
@@ -214,7 +214,7 @@ export function Controls( {
 						}
 						isShownByDefault
 					>
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Open in new tab' ) }
 							checked={ opensInNewTab }
 							onChange={ ( value ) =>