@wordpress/block-library 9.41.1-next.v.202603161435.0 → 9.43.0

package/src/post-date/deprecated.js

@@ -7,6 +7,84 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v4 = {
+	attributes: {
+		datetime: {
+			type: 'string',
+			role: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+};
 
 const v3 = {
 	attributes: {
@@ -87,7 +165,7 @@ const v3 = {
 		...otherAttributes
 	} ) {
 		// Change the block bindings source argument name from "key" to "field".
-		return {
+		return migrateTextAlign( {
 			metadata: {
 				bindings: {
 					datetime: {
@@ -99,7 +177,7 @@ const v3 = {
 				...otherMetadata,
 			},
 			...otherAttributes,
-		};
+		} );
 	},
 	isEligible( attributes ) {
 		return (
@@ -184,7 +262,7 @@ const v2 = {
 				);
 			}
 
-			return {
+			return migrateTextAlign( {
 				...otherAttributes,
 				className,
 				metadata: {
@@ -196,7 +274,7 @@ const v2 = {
 						},
 					},
 				},
-			};
+			} );
 		}
 	},
 	isEligible( attributes ) {
@@ -240,7 +318,9 @@ const v1 = {
 	save() {
 		return null;
 	},
-	migrate: migrateFontFamily,
+	migrate( attributes ) {
+		return migrateTextAlign( migrateFontFamily( attributes ) );
+	},
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -254,4 +334,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1 ];
+export default [ v4, v3, v2, v1 ];

package/src/post-date/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,6 @@ import {
 	getSettings as getDateSettings,
 } from '@wordpress/date';
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	store as blockEditorStore,
@@ -41,19 +35,18 @@ import { store as blocksStore } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-export default function PostDateEdit( {
-	attributes,
-	context: { postType: postTypeSlug, queryId },
-	setAttributes,
-	name,
-} ) {
-	const { datetime, textAlign, format, isLink } = attributes;
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+export default function PostDateEdit( props ) {
+	const {
+		attributes,
+		context: { postType: postTypeSlug, queryId },
+		setAttributes,
+		name,
+	} = props;
+	useDeprecatedTextAlign( props );
+	const { datetime, format, isLink } = attributes;
+	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,71 +119,61 @@ export default function PostDateEdit( {
 	}
 	return (
 		<>
-			{ ( blockEditingMode === 'default' ||
-				! isDescendentOfQueryLoop ) && (
-				<BlockControls group="block">
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-
-					{ activeBlockVariationName !== 'post-date-modified' &&
-						( ! isDescendentOfQueryLoop ||
-							! activeBlockVariationName ) && (
-							<ToolbarGroup>
-								<Dropdown
-									popoverProps={ popoverProps }
-									renderContent={ ( { onClose } ) => (
-										<PublishDateTimePicker
-											title={
-												activeBlockVariationName ===
-												'post-date'
-													? __( 'Publish Date' )
-													: __( 'Date' )
-											}
-											currentDate={ datetime }
-											onChange={ ( newDatetime ) =>
-												setAttributes( {
-													datetime: newDatetime,
-												} )
-											}
-											is12Hour={ is12HourFormat(
-												siteTimeFormat
-											) }
-											onClose={ onClose }
-											dateOrder={
-												/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
-												_x( 'dmy', 'date order' )
-											}
+			{ ( blockEditingMode === 'default' || ! isDescendentOfQueryLoop ) &&
+				activeBlockVariationName !== 'post-date-modified' &&
+				( ! isDescendentOfQueryLoop || ! activeBlockVariationName ) && (
+					<BlockControls group="block">
+						<ToolbarGroup>
+							<Dropdown
+								popoverProps={ popoverProps }
+								renderContent={ ( { onClose } ) => (
+									<PublishDateTimePicker
+										title={
+											activeBlockVariationName ===
+											'post-date'
+												? __( 'Publish Date' )
+												: __( 'Date' )
+										}
+										currentDate={ datetime }
+										onChange={ ( newDatetime ) =>
+											setAttributes( {
+												datetime: newDatetime,
+											} )
+										}
+										is12Hour={ is12HourFormat(
+											siteTimeFormat
+										) }
+										onClose={ onClose }
+										dateOrder={
+											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+											_x( 'dmy', 'date order' )
+										}
+									/>
+								) }
+								renderToggle={ ( { isOpen, onToggle } ) => {
+									const openOnArrowDown = ( event ) => {
+										if (
+											! isOpen &&
+											event.keyCode === DOWN
+										) {
+											event.preventDefault();
+											onToggle();
+										}
+									};
+									return (
+										<ToolbarButton
+											aria-expanded={ isOpen }
+											icon={ pencil }
+											title={ __( 'Change Date' ) }
+											onClick={ onToggle }
+											onKeyDown={ openOnArrowDown }
 										/>
-									) }
-									renderToggle={ ( { isOpen, onToggle } ) => {
-										const openOnArrowDown = ( event ) => {
-											if (
-												! isOpen &&
-												event.keyCode === DOWN
-											) {
-												event.preventDefault();
-												onToggle();
-											}
-										};
-										return (
-											<ToolbarButton
-												aria-expanded={ isOpen }
-												icon={ pencil }
-												title={ __( 'Change Date' ) }
-												onClick={ onToggle }
-												onKeyDown={ openOnArrowDown }
-											/>
-										);
-									} }
-								/>
-							</ToolbarGroup>
-						) }
-				</BlockControls>
-			) }
+									);
+								} }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				) }
 
 			<InspectorControls>
 				<ToolsPanel

package/src/site-logo/edit.js

@@ -35,6 +35,7 @@ import {
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -46,9 +47,11 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { MIN_SIZE } from '../image/constants';
 import { MediaControl, MediaControlPreview } from '../utils/media-control';
+import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const { mediaEditKey } = unlock( blockEditorPrivateApis );
 
 const SiteLogo = ( {
 	alt,
@@ -75,18 +78,22 @@ const SiteLogo = ( {
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
-	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		const siteEntities = select( coreStore ).getEntityRecord(
-			'root',
-			'__unstableBase'
-		);
-		return {
-			title: siteEntities?.name,
-			imageEditing: settings.imageEditing,
-			maxWidth: settings.maxWidth,
-		};
-	}, [] );
+	const { imageEditing, maxWidth, title, editMediaEntity } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			const siteEntities = select( coreStore ).getEntityRecord(
+				'root',
+				'__unstableBase'
+			);
+			return {
+				title: siteEntities?.name,
+				imageEditing: settings.imageEditing,
+				maxWidth: settings.maxWidth,
+				editMediaEntity: settings?.[ mediaEditKey ],
+			};
+		},
+		[]
+	);
 
 	useEffect( () => {
 		// Turn the `Use as site icon` toggle off if it is on but the logo and icon have
@@ -200,7 +207,11 @@ const SiteLogo = ( {
 	/* eslint-enable no-lonely-if */
 
 	const canEditImage =
-		logoId && naturalWidth && naturalHeight && imageEditing;
+		logoId &&
+		naturalWidth &&
+		naturalHeight &&
+		imageEditing &&
+		!! editMediaEntity;
 
 	// Hide crop and dimensions editing in write mode
 	const shouldShowCropAndDimensions = ! isContentOnlyMode;

package/src/site-tagline/deprecated.js

@@ -11,6 +11,7 @@ const v2 = {
 		},
 		level: {
 			type: 'number',
+			default: 0,
 		},
 		levelOptions: {
 			type: 'array',

package/src/site-title/index.js

@@ -20,7 +20,11 @@ export const settings = {
 	example: {
 		viewportWidth: 350,
 		attributes: {
-			textAlign: 'center',
+			style: {
+				typography: {
+					textAlign: 'center',
+				},
+			},
 		},
 	},
 	edit,

package/src/tab/save.js

@@ -3,15 +3,11 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { anchor } = attributes;
-
-	const tabPanelId = anchor;
-
+export default function save() {
 	const blockProps = useBlockProps.save( {
 		role: 'tabpanel',
 	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <section { ...innerBlocksProps } id={ tabPanelId } />;
+	return <section { ...innerBlocksProps } />;
 }

package/src/tabs/save.js

@@ -3,13 +3,9 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { anchor } = attributes;
-
-	const tabsId = anchor;
-
+export default function save() {
 	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <div { ...innerBlocksProps } id={ tabsId } />;
+	return <div { ...innerBlocksProps } />;
 }

package/src/utils/media-control.js

@@ -140,7 +140,9 @@ export function MediaControl( {
 						filename={ filename }
 						className="block-library-utils__media-control__inspector-media-replace-title"
 						label={
-							mediaUrl ? getFilename( filename ) : emptyLabel
+							mediaUrl
+								? getFilename( filename ) || emptyLabel
+								: emptyLabel
 						}
 					/>
 				}