@wordpress/block-library 9.38.0 → 9.39.0

package/src/image/image.js

@@ -304,16 +304,39 @@ export default function Image( {
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
 
-	const image = useSelect(
-		( select ) =>
-			id && isSingleSelected
-				? select( coreStore ).getEntityRecord(
-						'postType',
-						'attachment',
-						id,
-						{ context: 'view' }
-				  )
-				: null,
+	const { image, canUserEdit } = useSelect(
+		( select ) => {
+			const imageRecord =
+				id && isSingleSelected
+					? select( coreStore ).getEntityRecord(
+							'postType',
+							'attachment',
+							id,
+							{ context: 'view' }
+					  )
+					: null;
+
+			// Check edit permissions. When the media editor experiment is enabled,
+			// use getEntityRecordPermissions which checks via canUser API.
+			// Only check when the image is selected to avoid unnecessary API requests.
+			let canEdit = false;
+			if ( id && isSingleSelected && window?.__experimentalMediaEditor ) {
+				const { getEntityRecordPermissions } = unlock(
+					select( coreStore )
+				);
+				const permissions = getEntityRecordPermissions(
+					'postType',
+					'attachment',
+					id
+				);
+				canEdit = permissions?.update || false;
+			}
+
+			return {
+				image: imageRecord,
+				canUserEdit: canEdit,
+			};
+		},
 		[ id, isSingleSelected ]
 	);
 
@@ -338,6 +361,7 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
+	const onNavigateToEntityRecord = getSettings().onNavigateToEntityRecord;
 
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -355,6 +379,7 @@ export default function Image( {
 	const [ hasImageErrored, setHasImageErrored ] = useState( false );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
+	const showDimensionsControls = allowResize && hasNonContentControls;
 	const isResizable =
 		allowResize &&
 		hasNonContentControls &&
@@ -558,7 +583,7 @@ export default function Image( {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const dimensionsControl =
-		isResizable &&
+		showDimensionsControls &&
 		( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
 			<DimensionsTool
 				panelId={ clientId }
@@ -600,6 +625,11 @@ export default function Image( {
 				defaultAspectRatio="auto"
 				scaleOptions={ scaleOptions }
 				unitsOptions={ dimensionsUnitsOptions }
+				tools={
+					isWideAligned
+						? [ 'aspectRatio', 'scale' ]
+						: [ 'aspectRatio', 'widthHeight', 'scale' ]
+				}
 			/>
 		) );
 
@@ -726,6 +756,27 @@ export default function Image( {
 	const hasDataFormBlockFields =
 		window?.__experimentalContentOnlyInspectorFields;
 
+	const editMediaButton = window?.__experimentalMediaEditor &&
+		id &&
+		isSingleSelected &&
+		canUserEdit &&
+		! isExternalImage( id, url ) &&
+		! isEditingImage &&
+		onNavigateToEntityRecord && (
+			<BlockControls group="other">
+				<ToolbarButton
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: id,
+							postType: 'attachment',
+						} );
+					} }
+				>
+					{ __( 'Edit media' ) }
+				</ToolbarButton>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -1199,6 +1250,7 @@ export default function Image( {
 
 	return (
 		<>
+			{ editMediaButton }
 			{ mediaReplaceFlow }
 			{ controls }
 			{ featuredImageControl }

package/src/image/index.js

@@ -35,7 +35,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/index.js

@@ -133,9 +133,12 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as tab from './tab';
+import * as tabPanels from './tab-panels';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
 import * as tabs from './tabs';
+import * as tabsMenu from './tabs-menu';
+import * as tabsMenuItem from './tabs-menu-item';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termCount from './term-count';
@@ -274,6 +277,9 @@ const getAllBlocks = () => {
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( tab );
 		blocks.push( tabs );
+		blocks.push( tabsMenu );
+		blocks.push( tabsMenuItem );
+		blocks.push( tabPanels );
 	}
 
 	if ( window?.__experimentalEnableFormBlocks ) {

package/src/list-item/index.js

@@ -34,6 +34,22 @@ export const settings = {
 	},
 	transforms,
 	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
+	__experimentalLabel( attributes, { context } ) {
+		const { content } = attributes;
+
+		const customName = attributes?.metadata?.name;
+		const hasContent = content?.trim().length > 0;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && ( customName || hasContent ) ) {
+			return customName || content;
+		}
+
+		if ( context === 'breadcrumb' && customName ) {
+			return customName;
+		}
+	},
 };
 
 if ( window.__experimentalContentOnlyInspectorFields ) {

package/src/media-text/style.scss

@@ -108,6 +108,7 @@
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+	position: relative;
 	height: 100%;
 	min-height: 250px;
 }
@@ -118,6 +119,7 @@
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+	position: absolute;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;

package/src/missing/block.json

@@ -29,6 +29,7 @@
 		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"customCSS": false
 	}
 }

package/src/more/block.json

@@ -26,7 +26,8 @@
 		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"customCSS": false
 	},
 	"editorStyle": "wp-block-more-editor"
 }

package/src/more/index.js

@@ -27,7 +27,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/navigation/block.json

@@ -46,9 +46,10 @@
 			"type": "boolean",
 			"default": true
 		},
-		"openSubmenusOnClick": {
-			"type": "boolean",
-			"default": false
+		"submenuVisibility": {
+			"type": "string",
+			"enum": [ "hover", "click", "always" ],
+			"default": "hover"
 		},
 		"overlayMenu": {
 			"type": "string",
@@ -101,7 +102,7 @@
 		"fontSize": "fontSize",
 		"customFontSize": "customFontSize",
 		"showSubmenuIcon": "showSubmenuIcon",
-		"openSubmenusOnClick": "openSubmenusOnClick",
+		"submenuVisibility": "submenuVisibility",
 		"style": "style",
 		"maxNestingLevel": "maxNestingLevel"
 	},

package/src/navigation/deprecated.js

@@ -46,9 +46,28 @@ const migrateWithLayout = ( attributes ) => {
 	return updatedAttributes;
 };
 
-const v6 = {
+const migrateOpenSubmenusOnClick = ( attributes ) => {
+	const { openSubmenusOnClick, ...restAttributes } = attributes;
+
+	// Don't migrate if openSubmenusOnClick doesn't exist
+	if ( openSubmenusOnClick === null || openSubmenusOnClick === undefined ) {
+		return attributes;
+	}
+
+	// Always remove openSubmenusOnClick
+	// If submenuVisibility already exists, keep it; otherwise set based on openSubmenusOnClick
+	return {
+		...restAttributes,
+		submenuVisibility:
+			restAttributes.submenuVisibility ??
+			( openSubmenusOnClick ? 'click' : 'hover' ),
+	};
+};
+
+// v7: Migrate openSubmenusOnClick to submenuVisibility
+const v7 = {
 	attributes: {
-		navigationMenuId: {
+		ref: {
 			type: 'number',
 		},
 		textColor: {
@@ -81,6 +100,115 @@ const v6 = {
 			type: 'string',
 			default: 'mobile',
 		},
+		icon: {
+			type: 'string',
+			default: 'handle',
+		},
+		hasIcon: {
+			type: 'boolean',
+			default: true,
+		},
+		__unstableLocation: {
+			type: 'string',
+		},
+		overlayBackgroundColor: {
+			type: 'string',
+		},
+		customOverlayBackgroundColor: {
+			type: 'string',
+		},
+		overlayTextColor: {
+			type: 'string',
+		},
+		customOverlayTextColor: {
+			type: 'string',
+		},
+		maxNestingLevel: {
+			type: 'number',
+			default: 5,
+		},
+		templateLock: {
+			type: [ 'string', 'boolean' ],
+			enum: [ 'all', 'insert', 'contentOnly', false ],
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		inserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalTextTransform: true,
+			__experimentalFontFamily: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextDecoration: true,
+			__experimentalSkipSerialization: [ 'textDecoration' ],
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		spacing: {
+			blockGap: true,
+			units: [ 'px', 'em', 'rem', 'vh', 'vw' ],
+			__experimentalDefaultControls: {
+				blockGap: true,
+			},
+		},
+		layout: {
+			allowSwitching: false,
+			allowInheriting: false,
+			allowVerticalAlignment: false,
+			allowSizingOnChildren: true,
+			default: {
+				type: 'flex',
+			},
+		},
+		interactivity: true,
+		renaming: false,
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+	isEligible: ( { openSubmenusOnClick } ) =>
+		openSubmenusOnClick !== null && openSubmenusOnClick !== undefined,
+	migrate: migrateOpenSubmenusOnClick,
+};
+
+const v6 = {
+	attributes: {
+		navigationMenuId: {
+			type: 'number',
+		},
+		textColor: {
+			type: 'string',
+		},
+		customTextColor: {
+			type: 'string',
+		},
+		rgbTextColor: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		rgbBackgroundColor: {
+			type: 'string',
+		},
+		showSubmenuIcon: {
+			type: 'boolean',
+			default: true,
+		},
+		overlayMenu: {
+			type: 'string',
+			default: 'mobile',
+		},
 		__unstableLocation: {
 			type: 'string',
 		},
@@ -224,7 +352,11 @@ const v5 = {
 	},
 	isEligible: ( { itemsJustification, orientation } ) =>
 		!! itemsJustification || !! orientation,
-	migrate: compose( migrateIdToRef, migrateWithLayout ),
+	migrate: compose(
+		migrateIdToRef,
+		migrateWithLayout,
+		migrateOpenSubmenusOnClick
+	),
 };
 
 const v4 = {
@@ -307,7 +439,12 @@ const v4 = {
 	save() {
 		return <InnerBlocks.Content />;
 	},
-	migrate: compose( migrateIdToRef, migrateWithLayout, migrateFontFamily ),
+	migrate: compose(
+		migrateIdToRef,
+		migrateWithLayout,
+		migrateFontFamily,
+		migrateOpenSubmenusOnClick
+	),
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -349,6 +486,7 @@ const migrateTypographyPresets = function ( attributes ) {
 };
 
 const deprecated = [
+	v7,
 	v6,
 	v5,
 	v4,
@@ -430,7 +568,8 @@ const deprecated = [
 			migrateIdToRef,
 			migrateWithLayout,
 			migrateFontFamily,
-			migrateIsResponsive
+			migrateIsResponsive,
+			migrateOpenSubmenusOnClick
 		),
 		save() {
 			return <InnerBlocks.Content />;

package/src/navigation/edit/deleted-overlay-warning.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Warning displayed when a selected overlay template part has been deleted.
+ *
+ * @param {Object}   props            Component props.
+ * @param {Function} props.onClear    Callback to clear the overlay selection.
+ * @param {Function} props.onCreate   Callback to create a new overlay.
+ * @param {boolean}  props.isCreating Whether a new overlay is being created.
+ * @return {JSX.Element} The deleted overlay warning component.
+ */
+function DeletedOverlayWarning( { onClear, onCreate, isCreating = false } ) {
+	const message = createInterpolateElement(
+		__(
+			'The selected overlay template part is missing or has been deleted. <clearButton>Reset to default overlay</clearButton> or <createButton>create a new overlay</createButton>.'
+		),
+		{
+			clearButton: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ onClear }
+					variant="link"
+					disabled={ isCreating }
+					accessibleWhenDisabled
+				/>
+			),
+			createButton: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ onCreate }
+					variant="link"
+					disabled={ isCreating }
+					accessibleWhenDisabled
+					isBusy={ isCreating }
+				/>
+			),
+		}
+	);
+
+	return (
+		<Notice
+			status="warning"
+			isDismissible={ false }
+			className="wp-block-navigation__deleted-overlay-warning"
+		>
+			{ message }
+		</Notice>
+	);
+}
+
+export default DeletedOverlayWarning;