@wordpress/block-library 8.29.0 → 8.31.0

package/build-style/editor.css

@@ -594,6 +594,9 @@ html :where(.wp-block-column) {
 .wp-block[data-align=left] > .wp-block-file, .wp-block[data-align=right] > .wp-block-file {
   height: auto;
 }
+.wp-block[data-align=center] > .wp-block-file {
+  text-align: center;
+}
 .wp-block-file .components-resizable-box__container {
   margin-bottom: 1em;
 }
@@ -1256,7 +1259,6 @@ figure.wp-block-gallery .components-spinner {
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -1283,6 +1285,7 @@ figure.wp-block-gallery .components-spinner {
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
@@ -1518,7 +1521,8 @@ figure.wp-block-image:not(.wp-block) {
   width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
   height: 100% !important;
 }
 
@@ -1526,6 +1530,11 @@ figure.wp-block-image:not(.wp-block) {
   max-width: unset;
 }
 
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+  min-height: 205px;
+}
+
 .block-editor-block-list__block[data-type="core/more"] {
   max-width: 100%;
   text-align: center;

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

@@ -96,6 +96,9 @@
 .wp-block[data-align=left] > .wp-block-file, .wp-block[data-align=right] > .wp-block-file {
   height: auto;
 }
+.wp-block[data-align=center] > .wp-block-file {
+  text-align: center;
+}
 .wp-block-file .components-resizable-box__container {
   margin-bottom: 1em;
 }

package/build-style/file/editor.css

@@ -96,6 +96,9 @@
 .wp-block[data-align=left] > .wp-block-file, .wp-block[data-align=right] > .wp-block-file {
   height: auto;
 }
+.wp-block[data-align=center] > .wp-block-file {
+  text-align: center;
+}
 .wp-block-file .components-resizable-box__container {
   margin-bottom: 1em;
 }

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

@@ -150,7 +150,6 @@
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -177,6 +176,7 @@
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {

package/build-style/group/editor.css

@@ -150,7 +150,6 @@
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -177,6 +176,7 @@
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {

package/build-style/media-text/editor-rtl.css

@@ -109,10 +109,16 @@
   width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
   height: 100% !important;
 }
 
 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
   max-width: unset;
+}
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+  min-height: 205px;
 }

package/build-style/media-text/editor.css

@@ -109,10 +109,16 @@
   width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
   height: 100% !important;
 }
 
 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
   max-width: unset;
+}
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+  min-height: 205px;
 }

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

@@ -96,6 +96,8 @@
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }

package/build-style/search/style.css

@@ -96,6 +96,8 @@
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }

package/build-style/social-links/style-rtl.css

@@ -250,7 +250,7 @@
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
-  background-color: #02ab6c;
+  background-color: #000;
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
@@ -414,7 +414,7 @@
   color: #3288d4;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-medium {
-  color: #02ab6c;
+  color: #000;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
   color: #f6405f;

package/build-style/social-links/style.css

@@ -250,7 +250,7 @@
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
-  background-color: #02ab6c;
+  background-color: #000;
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
@@ -414,7 +414,7 @@
   color: #3288d4;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-medium {
-  color: #02ab6c;
+  color: #000;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
   color: #f6405f;

package/build-style/style-rtl.css

@@ -613,7 +613,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow-x: clip;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another
@@ -3252,6 +3253,8 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }
@@ -3562,7 +3565,7 @@ ul.wp-block-rss.is-grid li {
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
-  background-color: #02ab6c;
+  background-color: #000;
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
@@ -3726,7 +3729,7 @@ ul.wp-block-rss.is-grid li {
   color: #3288d4;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-medium {
-  color: #02ab6c;
+  color: #000;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
   color: #f6405f;

package/build-style/style.css

@@ -618,7 +618,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow-x: clip;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -3286,6 +3287,8 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }
@@ -3597,7 +3600,7 @@ ul.wp-block-rss.is-grid li {
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
-  background-color: #02ab6c;
+  background-color: #000;
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
@@ -3761,7 +3764,7 @@ ul.wp-block-rss.is-grid li {
   color: #3288d4;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-medium {
-  color: #02ab6c;
+  color: #000;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
   color: #f6405f;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.29.0",
+	"version": "8.31.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.52.0",
-		"@wordpress/api-fetch": "^6.49.0",
-		"@wordpress/autop": "^3.52.0",
-		"@wordpress/blob": "^3.52.0",
-		"@wordpress/block-editor": "^12.20.0",
-		"@wordpress/blocks": "^12.29.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/compose": "^6.29.0",
-		"@wordpress/core-data": "^6.29.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/date": "^4.52.0",
-		"@wordpress/deprecated": "^3.52.0",
-		"@wordpress/dom": "^3.52.0",
-		"@wordpress/element": "^5.29.0",
-		"@wordpress/escape-html": "^2.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/html-entities": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/icons": "^9.43.0",
-		"@wordpress/interactivity": "^5.1.0",
-		"@wordpress/interactivity-router": "^1.2.0",
-		"@wordpress/keycodes": "^3.52.0",
-		"@wordpress/notices": "^4.20.0",
-		"@wordpress/patterns": "^1.13.0",
-		"@wordpress/primitives": "^3.50.0",
-		"@wordpress/private-apis": "^0.34.0",
-		"@wordpress/reusable-blocks": "^4.29.0",
-		"@wordpress/rich-text": "^6.29.0",
-		"@wordpress/server-side-render": "^4.29.0",
-		"@wordpress/url": "^3.53.0",
-		"@wordpress/viewport": "^5.29.0",
-		"@wordpress/wordcount": "^3.52.0",
+		"@wordpress/a11y": "^3.54.0",
+		"@wordpress/api-fetch": "^6.51.0",
+		"@wordpress/autop": "^3.54.0",
+		"@wordpress/blob": "^3.54.0",
+		"@wordpress/block-editor": "^12.22.0",
+		"@wordpress/blocks": "^12.31.0",
+		"@wordpress/components": "^27.2.0",
+		"@wordpress/compose": "^6.31.0",
+		"@wordpress/core-data": "^6.31.0",
+		"@wordpress/data": "^9.24.0",
+		"@wordpress/date": "^4.54.0",
+		"@wordpress/deprecated": "^3.54.0",
+		"@wordpress/dom": "^3.54.0",
+		"@wordpress/element": "^5.31.0",
+		"@wordpress/escape-html": "^2.54.0",
+		"@wordpress/hooks": "^3.54.0",
+		"@wordpress/html-entities": "^3.54.0",
+		"@wordpress/i18n": "^4.54.0",
+		"@wordpress/icons": "^9.45.0",
+		"@wordpress/interactivity": "^5.3.0",
+		"@wordpress/interactivity-router": "^1.4.0",
+		"@wordpress/keycodes": "^3.54.0",
+		"@wordpress/notices": "^4.22.0",
+		"@wordpress/patterns": "^1.15.0",
+		"@wordpress/primitives": "^3.52.0",
+		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/reusable-blocks": "^4.31.0",
+		"@wordpress/rich-text": "^6.31.0",
+		"@wordpress/server-side-render": "^4.31.0",
+		"@wordpress/url": "^3.55.0",
+		"@wordpress/viewport": "^5.31.0",
+		"@wordpress/wordcount": "^3.54.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -80,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
 }

package/src/archives/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/archives` block on server.
  *
+ * @since 5.0.0
+ *
  * @see WP_Widget_Archives
  *
  * @param array $attributes The block attributes.
@@ -106,6 +108,8 @@ function render_block_core_archives( $attributes ) {
 
 /**
  * Register archives block.
+ *
+ * @since 5.0.0
  */
 function register_block_core_archives() {
 	register_block_type_from_metadata(

package/src/audio/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
 	PanelBody,
@@ -21,11 +21,9 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -33,6 +31,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
@@ -47,22 +46,13 @@ function AudioEdit( {
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
 	const isTemporaryAudio = ! id && isBlobURL( src );
-	const { getSettings } = useSelect( blockEditorStore );
 
-	useEffect( () => {
-		if ( ! id && isBlobURL( src ) ) {
-			const file = getBlobByURL( src );
-
-			if ( file ) {
-				getSettings().mediaUpload( {
-					filesList: [ file ],
-					onFileChange: ( [ media ] ) => onSelectAudio( media ),
-					onError: ( e ) => onUploadError( e ),
-					allowedTypes: ALLOWED_MEDIA_TYPES,
-				} );
-			}
-		}
-	}, [] );
+	useUploadMediaFromBlobURL( {
+		url: src,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectAudio,
+		onError: onUploadError,
+	} );
 
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {

package/src/audio/edit.native.js

@@ -212,13 +212,13 @@ function AudioEdit( {
 									label: _x( 'None', '"Preload" value' ),
 								},
 							] }
-							hideCancelButton={ true }
+							hideCancelButton
 						/>
 					</PanelBody>
 				</InspectorControls>
 				<MediaUpload
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ onSelectAudio }
 					onSelectURL={ onSelectURL }
 					render={ ( { open, getMediaOptions } ) => {
@@ -226,7 +226,7 @@ function AudioEdit( {
 					} }
 				/>
 				<BlockCaption
-					accessible={ true }
+					accessible
 					accessibilityLabelCreator={ ( caption ) =>
 						RichText.isEmpty( caption )
 							? /* translators: accessibility text. Empty Audio caption. */

package/src/avatar/edit.js

@@ -187,7 +187,7 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	return (
 		<>
 			<AvatarInspectorControls
-				selectUser={ true }
+				selectUser
 				attributes={ attributes }
 				avatar={ avatar }
 				setAttributes={ setAttributes }

package/src/avatar/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/avatar` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -99,6 +101,8 @@ function render_block_core_avatar( $attributes, $content, $block ) {
  * Generates class names and styles to apply the border support styles for
  * the Avatar block.
  *
+ * @since 6.3.0
+ *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */
@@ -149,6 +153,8 @@ function get_block_core_avatar_border_attributes( $attributes ) {
 
 /**
  * Registers the `core/avatar` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_avatar() {
 	register_block_type_from_metadata(

package/src/block/deprecated.js

@@ -1,4 +1,75 @@
-// v1: Migrate and rename the `overrides` attribute to the `content` attribute.
+const isObject = ( obj ) =>
+	typeof obj === 'object' && ! Array.isArray( obj ) && obj !== null;
+
+// v2: Migrate to a more condensed version of the 'content' attribute attribute.
+const v2 = {
+	attributes: {
+		ref: {
+			type: 'number',
+		},
+		content: {
+			type: 'object',
+		},
+	},
+	supports: {
+		customClassName: false,
+		html: false,
+		inserter: false,
+		renaming: false,
+	},
+	// Force this deprecation to run whenever there's a values sub-property that's an object.
+	//
+	// This could fail in the future if a block ever has binding to a `values` attribute.
+	// Some extra protection is added to ensure `values` is an object, but this only reduces
+	// the likelihood, it doesn't solve it completely.
+	isEligible( { content } ) {
+		return (
+			!! content &&
+			Object.keys( content ).every(
+				( contentKey ) =>
+					content[ contentKey ].values &&
+					isObject( content[ contentKey ].values )
+			)
+		);
+	},
+	/*
+	 * Old attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 * 	   		// The attribute values are now stored as a 'values' sub-property.
+	 *         values: { content: 'My content value' },
+	 * 	       // ... additional metadata, like the block name can be stored here.
+	 *     }
+	 * }
+	 *
+	 * New attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 *         content: 'My content value',
+	 *     }
+	 * }
+	 */
+	migrate( attributes ) {
+		const { content, ...retainedAttributes } = attributes;
+
+		if ( content && Object.keys( content ).length ) {
+			const updatedContent = { ...content };
+
+			for ( const contentKey in content ) {
+				updatedContent[ contentKey ] = content[ contentKey ].values;
+			}
+
+			return {
+				...retainedAttributes,
+				content: updatedContent,
+			};
+		}
+
+		return attributes;
+	},
+};
+
+// v1: Rename the `overrides` attribute to the `content` attribute.
 const v1 = {
 	attributes: {
 		ref: {
@@ -23,16 +94,12 @@ const v1 = {
 	 * overrides: {
 	 *     // An key is an id that represents a block.
 	 *     // The values are the attribute values of the block.
-	 *     "V98q_x": { content: 'dwefwefwefwe' }
+	 *     "V98q_x": { content: 'My content value' }
 	 * }
 	 *
 	 * New attribute format:
 	 * content: {
-	 *     "V98q_x": {
-	 * 	   		// The attribute values are now stored as a 'values' sub-property.
-	 *         values: { content: 'dwefwefwefwe' },
-	 * 	       // ... additional metadata, like the block name can be stored here.
-	 *     }
+	 *     "V98q_x": { content: 'My content value' }
 	 * }
 	 *
 	 */
@@ -42,9 +109,7 @@ const v1 = {
 		const content = {};
 
 		Object.keys( overrides ).forEach( ( id ) => {
-			content[ id ] = {
-				values: overrides[ id ],
-			};
+			content[ id ] = overrides[ id ];
 		} );
 
 		return {
@@ -54,4 +119,4 @@ const v1 = {
 	},
 };
 
-export default [ v1 ];
+export default [ v2, v1 ];