@wordpress/block-library 9.12.0 → 9.13.0

package/build-style/editor.css

@@ -2411,13 +2411,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   font-size: inherit;
   color: currentColor;
   height: auto;
+  font-weight: inherit;
+  font-family: inherit;
   opacity: 1;
   padding: 0.25em;
 }
-.wp-block-social-link-anchor:focus:not(:disabled) {
-  border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 3px solid transparent;
+.wp-block-social-link-anchor:hover {
+  transform: none;
 }
 
 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
@@ -2429,6 +2429,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 0;
 }
 
+.wp-block-social-link__toolbar_content_text {
+  width: 250px;
+}
+
 .wp-block-social-links div.block-editor-url-input {
   display: inline-block;
   margin-left: 8px;
@@ -2706,6 +2710,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   max-width: 240px;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
   margin-top: 4px;
   color: #757575;
@@ -2724,6 +2729,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 0;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message {
+  padding: 8px;
+}
+.block-library-video-tracks-editor__tracks-informative-message-description {
+  margin-bottom: 0;
+}
+
 .editor-styles-wrapper ul.wp-block-post-template {
   padding-left: 0;
   margin-left: 0;
@@ -2737,10 +2749,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-bottom: 8px;
 }
 
-.wp-block-query__create-new-link {
-  padding: 0 16px 16px 52px;
-}
-
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

package/build-style/navigation/style-rtl.css

@@ -448,7 +448,7 @@ button.wp-block-navigation-item__content {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-  padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+  padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
   overflow: auto;
   z-index: 100000;
 }

package/build-style/navigation/style.css

@@ -448,7 +448,7 @@ button.wp-block-navigation-item__content {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-  padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+  padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
   overflow: auto;
   z-index: 100000;
 }

package/build-style/page-list/style-rtl.css

@@ -108,4 +108,8 @@
 }
 .wp-block-navigation .wp-block-navigation-item {
   background-color: inherit;
+}
+
+.wp-block-page-list {
+  box-sizing: border-box;
 }

package/build-style/page-list/style.css

@@ -108,4 +108,8 @@
 }
 .wp-block-navigation .wp-block-navigation-item {
   background-color: inherit;
+}
+
+.wp-block-page-list {
+  box-sizing: border-box;
 }

package/build-style/query/editor-rtl.css

@@ -105,10 +105,6 @@
   margin-bottom: 8px;
 }
 
-.wp-block-query__create-new-link {
-  padding: 0 52px 16px 16px;
-}
-
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

package/build-style/query/editor.css

@@ -105,10 +105,6 @@
   margin-bottom: 8px;
 }
 
-.wp-block-query__create-new-link {
-  padding: 0 16px 16px 52px;
-}
-
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

package/build-style/search/style-rtl.css

@@ -145,9 +145,9 @@
   margin-right: 0;
   flex-shrink: 0;
   max-width: 100%;
-}
-.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
-  max-width: calc(100% - 100px);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
 }
 .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   transition-property: width;

package/build-style/search/style.css

@@ -145,9 +145,9 @@
   margin-left: 0;
   flex-shrink: 0;
   max-width: 100%;
-}
-.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
-  max-width: calc(100% - 100px);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
 }
 .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   transition-property: width;

package/build-style/social-link/editor-rtl.css

@@ -112,13 +112,13 @@
   font-size: inherit;
   color: currentColor;
   height: auto;
+  font-weight: inherit;
+  font-family: inherit;
   opacity: 1;
   padding: 0.25em;
 }
-.wp-block-social-link-anchor:focus:not(:disabled) {
-  border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 3px solid transparent;
+.wp-block-social-link-anchor:hover {
+  transform: none;
 }
 
 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
@@ -128,4 +128,8 @@
 
 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
   padding: 0;
+}
+
+.wp-block-social-link__toolbar_content_text {
+  width: 250px;
 }

package/build-style/social-link/editor.css

@@ -112,13 +112,13 @@
   font-size: inherit;
   color: currentColor;
   height: auto;
+  font-weight: inherit;
+  font-family: inherit;
   opacity: 1;
   padding: 0.25em;
 }
-.wp-block-social-link-anchor:focus:not(:disabled) {
-  border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 3px solid transparent;
+.wp-block-social-link-anchor:hover {
+  transform: none;
 }
 
 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
@@ -128,4 +128,8 @@
 
 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
   padding: 0;
+}
+
+.wp-block-social-link__toolbar_content_text {
+  width: 250px;
 }

package/build-style/style-rtl.css

@@ -2558,7 +2558,7 @@ button.wp-block-navigation-item__content {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-  padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+  padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
   overflow: auto;
   z-index: 100000;
 }
@@ -2767,6 +2767,10 @@ html.has-modal-open {
   background-color: inherit;
 }
 
+.wp-block-page-list {
+  box-sizing: border-box;
+}
+
 .is-small-text {
   font-size: 0.875em;
 }
@@ -3342,9 +3346,9 @@ ul.wp-block-rss.is-grid li {
   margin-right: 0;
   flex-shrink: 0;
   max-width: 100%;
-}
-.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
-  max-width: calc(100% - 100px);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
 }
 .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   transition-property: width;

package/build-style/style.css

@@ -2590,7 +2590,7 @@ button.wp-block-navigation-item__content {
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-  padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+  padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
   overflow: auto;
   z-index: 100000;
 }
@@ -2799,6 +2799,10 @@ html.has-modal-open {
   background-color: inherit;
 }
 
+.wp-block-page-list {
+  box-sizing: border-box;
+}
+
 .is-small-text {
   font-size: 0.875em;
 }
@@ -3376,9 +3380,9 @@ ul.wp-block-rss.is-grid li {
   margin-left: 0;
   flex-shrink: 0;
   max-width: 100%;
-}
-.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded=true] {
-  max-width: calc(100% - 100px);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
 }
 .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
   transition-property: width;

package/build-style/video/editor-rtl.css

@@ -132,6 +132,7 @@
   max-width: 240px;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
   margin-top: 4px;
   color: #757575;
@@ -148,4 +149,11 @@
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
   padding: 0;
+}
+
+.block-library-video-tracks-editor__tracks-informative-message {
+  padding: 8px;
+}
+.block-library-video-tracks-editor__tracks-informative-message-description {
+  margin-bottom: 0;
 }

package/build-style/video/editor.css

@@ -132,6 +132,7 @@
   max-width: 240px;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
   margin-top: 4px;
   color: #757575;
@@ -148,4 +149,11 @@
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
   padding: 0;
+}
+
+.block-library-video-tracks-editor__tracks-informative-message {
+  padding: 8px;
+}
+.block-library-video-tracks-editor__tracks-informative-message-description {
+  margin-bottom: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.12.0",
+	"version": "9.13.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
+	"gitHead": "cce81c13739c2a8b53d91df90c4f037cb68c2665"
 }

package/src/block-keyboard-shortcuts/index.js

@@ -90,22 +90,36 @@ function BlockKeyboardShortcuts() {
 				},
 			} );
 		} );
-	}, [] );
+	}, [ registerShortcut ] );
 
 	useShortcut(
 		'core/block-editor/transform-heading-to-paragraph',
 		( event ) => handleTransformHeadingAndParagraph( event, 0 )
 	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/block-editor/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTransformHeadingAndParagraph( event, level )
-		);
-	} );
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-1',
+		( event ) => handleTransformHeadingAndParagraph( event, 1 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-2',
+		( event ) => handleTransformHeadingAndParagraph( event, 2 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-3',
+		( event ) => handleTransformHeadingAndParagraph( event, 3 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-4',
+		( event ) => handleTransformHeadingAndParagraph( event, 4 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-5',
+		( event ) => handleTransformHeadingAndParagraph( event, 5 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-6',
+		( event ) => handleTransformHeadingAndParagraph( event, 6 )
+	);
 
 	return null;
 }

package/src/cover/edit/index.js

@@ -201,7 +201,7 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
-		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) {
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes?.id ) {
 			const { imageDefaultSize } = getSettings();
 
 			// Try to use the previous selected image size if it's available

package/src/cover/index.js

@@ -26,6 +26,14 @@ export const settings = {
 			customOverlayColor: '#065174',
 			dimRatio: 40,
 			url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
+			style: {
+				typography: {
+					fontSize: 48,
+				},
+				color: {
+					text: 'white',
+				},
+			},
 		},
 		innerBlocks: [
 			{
@@ -33,14 +41,6 @@ export const settings = {
 				attributes: {
 					content: __( '<strong>Snow Patrol</strong>' ),
 					align: 'center',
-					style: {
-						typography: {
-							fontSize: 48,
-						},
-						color: {
-							text: 'white',
-						},
-					},
 				},
 			},
 		],

package/src/cover/shared.js

@@ -35,7 +35,7 @@ export function dimRatioToClass( ratio ) {
 }
 
 export function attributesFromMedia( media ) {
-	if ( ! media || ! media.url ) {
+	if ( ! media || ( ! media.url && ! media.src ) ) {
 		return {
 			url: undefined,
 			id: undefined,
@@ -52,23 +52,23 @@ export function attributesFromMedia( media ) {
 		if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
 			mediaType = IMAGE_BACKGROUND_TYPE;
 		} else {
-			// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+			// Only images and videos are accepted so if the media_type is not an image we can assume it is a video.
 			// Videos contain the media type of 'file' in the object returned from the rest api.
 			mediaType = VIDEO_BACKGROUND_TYPE;
 		}
-	} else {
 		// For media selections originated from existing files in the media library.
-		if (
-			media.type !== IMAGE_BACKGROUND_TYPE &&
-			media.type !== VIDEO_BACKGROUND_TYPE
-		) {
-			return;
-		}
+	} else if (
+		media.type &&
+		( media.type === IMAGE_BACKGROUND_TYPE ||
+			media.type === VIDEO_BACKGROUND_TYPE )
+	) {
 		mediaType = media.type;
+	} else {
+		return;
 	}
 
 	return {
-		url: media.url,
+		url: media.url || media.src,
 		id: media.id,
 		alt: media?.alt,
 		backgroundType: mediaType,

package/src/cover/test/edit.js

@@ -337,7 +337,7 @@ describe( 'Cover block', () => {
 			describe( 'when colors are disabled', () => {
 				test( 'does not render overlay control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);
@@ -350,7 +350,7 @@ describe( 'Cover block', () => {
 				} );
 				test( 'does not render opacity control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);

package/src/details/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { details as icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,6 +34,28 @@ export const settings = {
 			},
 		],
 	},
+	__experimentalLabel( attributes, { context } ) {
+		const { summary } = attributes;
+
+		const customName = attributes?.metadata?.name;
+		const hasSummary = summary?.trim().length > 0;
+
+		// In the list view, use the block's summary as the label.
+		// If the summary is empty, fall back to the default label.
+		if ( context === 'list-view' && ( customName || hasSummary ) ) {
+			return customName || summary;
+		}
+
+		if ( context === 'accessibility' ) {
+			return ! hasSummary
+				? __( 'Details. Empty.' )
+				: sprintf(
+						/* translators: accessibility text; summary title. */
+						__( 'Details. %s' ),
+						summary
+				  );
+		}
+	},
 	save,
 	edit,
 	transforms,

package/src/file/edit.js

@@ -128,15 +128,21 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 
 		const isPdf = newMedia.url.endsWith( '.pdf' );
+		const pdfAttributes = {
+			displayPreview: isPdf
+				? attributes.displayPreview ?? true
+				: undefined,
+			previewHeight: isPdf ? attributes.previewHeight ?? 600 : undefined,
+		};
+
 		setAttributes( {
 			href: newMedia.url,
 			fileName: newMedia.title,
 			textLinkHref: newMedia.url,
 			id: newMedia.id,
-			displayPreview: isPdf ? true : undefined,
-			previewHeight: isPdf ? 600 : undefined,
 			fileId: `wp-block-file--media-${ clientId }`,
 			blob: undefined,
+			...pdfAttributes,
 		} );
 		setTemporaryURL();
 	}

package/src/freeform/modal.js

@@ -25,7 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
-			size="small"
+			size="compact"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }

package/src/heading/block.json

@@ -37,13 +37,7 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true,
-			"__experimentalDefaultControls": {
-				"color": true,
-				"radius": true,
-				"style": true,
-				"width": true
-			}
+			"width": true
 		},
 		"color": {
 			"gradients": true,

package/src/home-link/edit.js

@@ -6,15 +6,10 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 
 const preventDefault = ( event ) => event.preventDefault();
 
@@ -24,8 +19,6 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
 			?.home;
 	}, [] );
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
@@ -41,42 +34,31 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 		},
 	} );
 
-	const { label } = attributes;
-
-	useEffect( () => {
-		if ( label === undefined ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { label: __( 'Home' ) } );
-		}
-	}, [ label ] );
-
 	return (
-		<>
-			<div { ...blockProps }>
-				<a
-					className="wp-block-home-link__content wp-block-navigation-item__content"
-					href={ homeUrl }
-					onClick={ preventDefault }
-				>
-					<RichText
-						identifier="label"
-						className="wp-block-home-link__label"
-						value={ label }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						aria-label={ __( 'Home link text' ) }
-						placeholder={ __( 'Add home link' ) }
-						withoutInteractiveFormatting
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
-					/>
-				</a>
-			</div>
-		</>
+		<div { ...blockProps }>
+			<a
+				className="wp-block-home-link__content wp-block-navigation-item__content"
+				href={ homeUrl }
+				onClick={ preventDefault }
+			>
+				<RichText
+					identifier="label"
+					className="wp-block-home-link__label"
+					value={ attributes.label ?? __( 'Home' ) }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					aria-label={ __( 'Home link text' ) }
+					placeholder={ __( 'Add home link' ) }
+					withoutInteractiveFormatting
+					allowedFormats={ [
+						'core/bold',
+						'core/italic',
+						'core/image',
+						'core/strikethrough',
+					] }
+				/>
+			</a>
+		</div>
 	);
 }