@wordpress/block-library 9.2.0 → 9.4.0

package/src/audio/edit.js

@@ -26,6 +26,7 @@ import { __, _x } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,10 +46,10 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
-	const isTemporaryAudio = ! id && isBlobURL( src );
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	useUploadMediaFromBlobURL( {
-		url: src,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectAudio,
 		onError: onUploadError,
@@ -72,7 +73,8 @@ function AudioEdit( {
 				onReplace( embedBlock );
 				return;
 			}
-			setAttributes( { src: newSrc, id: undefined } );
+			setAttributes( { src: newSrc, id: undefined, blob: undefined } );
+			setTemporaryURL();
 		}
 	}
 
@@ -95,27 +97,37 @@ function AudioEdit( {
 				src: undefined,
 				id: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
 			return;
 		}
+
+		if ( isBlobURL( media.url ) ) {
+			setTemporaryURL( media.url );
+			return;
+		}
+
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
 		setAttributes( {
+			blob: undefined,
 			src: media.url,
 			id: media.id,
 			caption: media.caption,
 		} );
+		setTemporaryURL();
 	}
 
 	const classes = clsx( className, {
-		'is-transient': isTemporaryAudio,
+		'is-transient': !! temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
-	if ( ! src ) {
+	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -190,9 +202,9 @@ function AudioEdit( {
 					file or change the position slider when the controls are enabled.
 				*/ }
 				<Disabled isDisabled={ ! isSingleSelected }>
-					<audio controls="controls" src={ src } />
+					<audio controls="controls" src={ src ?? temporaryURL } />
 				</Disabled>
-				{ isTemporaryAudio && <Spinner /> }
+				{ !! temporaryURL && <Spinner /> }
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }

package/src/audio/transforms.js

@@ -20,7 +20,7 @@ const transforms = {
 				// It's already done as part of the `componentDidMount`
 				// in the audio block.
 				const block = createBlock( 'core/audio', {
-					src: createBlobURL( file ),
+					blob: createBlobURL( file ),
 				} );
 
 				return block;

package/src/block/block.json

@@ -12,9 +12,13 @@
 			"type": "number"
 		},
 		"content": {
-			"type": "object"
+			"type": "object",
+			"default": {}
 		}
 	},
+	"providesContext": {
+		"pattern/overrides": "content"
+	},
 	"supports": {
 		"customClassName": false,
 		"html": false,

package/src/block/edit.js

@@ -121,6 +121,51 @@ export default function ReusableBlockEditRecursionWrapper( props ) {
 	);
 }
 
+function ReusableBlockControl( {
+	recordId,
+	canOverrideBlocks,
+	hasContent,
+	handleEditOriginal,
+	resetContent,
+} ) {
+	const canUserEdit = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: 'wp_block',
+				id: recordId,
+			} ),
+		[ recordId ]
+	);
+
+	return (
+		<>
+			{ canUserEdit && !! handleEditOriginal && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton onClick={ handleEditOriginal }>
+							{ __( 'Edit original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+
+			{ canOverrideBlocks && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ resetContent }
+							disabled={ ! hasContent }
+						>
+							{ __( 'Reset' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+		</>
+	);
+}
+
 function ReusableBlockEdit( {
 	name,
 	attributes: { ref, content },
@@ -143,25 +188,20 @@ function ReusableBlockEdit( {
 
 	const {
 		innerBlocks,
-		userCanEdit,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
-			const { canUser } = select( coreStore );
 			const {
 				getBlocks,
 				getSettings,
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const canEdit = canUser( 'update', 'blocks', ref );
-
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
-				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
@@ -171,7 +211,7 @@ function ReusableBlockEdit( {
 				),
 			};
 		},
-		[ patternClientId, ref ]
+		[ patternClientId ]
 	);
 
 	// Sync the editing mode of the pattern block with the inner blocks.
@@ -252,28 +292,18 @@ function ReusableBlockEdit( {
 
 	return (
 		<>
-			{ userCanEdit && onNavigateToEntityRecord && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton onClick={ handleEditOriginal }>
-							{ __( 'Edit original' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-
-			{ canOverrideBlocks && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ resetContent }
-							disabled={ ! content }
-							__experimentalIsFocusable
-						>
-							{ __( 'Reset' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
+			{ hasResolved && (
+				<ReusableBlockControl
+					recordId={ ref }
+					canOverrideBlocks={ canOverrideBlocks }
+					hasContent={ !! content }
+					handleEditOriginal={
+						onNavigateToEntityRecord
+							? handleEditOriginal
+							: undefined
+					}
+					resetContent={ resetContent }
+				/>
 			) }
 
 			{ children === null ? (

package/src/block/test/edit.native.js

@@ -158,7 +158,9 @@ describe( 'Synced patterns', () => {
 			if ( path.startsWith( endpoint ) ) {
 				response = getMockedReusableBlock( id );
 			}
-			return Promise.resolve( response );
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
 		} );
 
 		const screen = await initializeEditor( {
@@ -229,7 +231,9 @@ describe( 'Synced patterns', () => {
 			response.content.raw = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
 <figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->`;
-			return Promise.resolve( response );
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
 		} );
 
 		const screen = await initializeEditor( {

package/src/button/edit.js

@@ -247,7 +247,7 @@ function ButtonEdit( props ) {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue( {
+					! blockBindingsSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: metadata?.bindings?.url?.args,

package/src/button/index.php

@@ -17,7 +17,20 @@
  * @return string The block content.
  */
 function render_block_core_button( $attributes, $content ) {
-	$p = new WP_HTML_Tag_Processor( $content );
+	/*
+	 * The current Gutenberg plugin supports WordPress 6.4, but the next_token()
+	 * method does not exist in WordPress 6.4. Therefore, if Gutenberg is used
+	 * as a plugin, use the Gutenberg class that has the `next_token()` method.
+	 *
+	 * TODO: After the Gutenberg plugin drops support for WordPress 6.4, this
+	 * conditional statement will be removed and the core class `WP_HTML_Tag_Processor`
+	 * should be used.
+	 */
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_7' ) ) {
+		$p = new Gutenberg_HTML_Tag_Processor_6_7( $content );
+	} else {
+		$p = new WP_HTML_Tag_Processor( $content );
+	}
 
 	/*
 	 * The button block can render an `<a>` or `<button>` and also has a

package/src/buttons/block.json

@@ -13,8 +13,16 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalExposeControlsToChildren": true,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"spacing": {
 			"blockGap": true,
+			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
@@ -33,6 +41,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,

package/src/buttons/index.js

@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			layout: {
+				type: 'flex',
+				justifyContent: 'center',
+			},
+		},
 		innerBlocks: [
 			{
 				name: 'core/button',

package/src/categories/block.json

@@ -26,6 +26,14 @@
 		"showEmpty": {
 			"type": "boolean",
 			"default": false
+		},
+		"label": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/categories/edit.js

@@ -14,7 +14,11 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
@@ -27,6 +31,8 @@ export default function CategoriesEdit( {
 		showPostCounts,
 		showOnlyTopLevel,
 		showEmpty,
+		label,
+		showLabel,
 	},
 	setAttributes,
 	className,
@@ -92,9 +98,22 @@ export default function CategoriesEdit( {
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
-				</VisuallyHidden>
+				{ showLabel ? (
+					<RichText
+						className="wp-block-categories__label"
+						aria-label={ __( 'Label text' ) }
+						placeholder={ __( 'Categories' ) }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+					/>
+				) : (
+					<VisuallyHidden as="label" htmlFor={ selectId }>
+						{ label ? label : __( 'Categories' ) }
+					</VisuallyHidden>
+				) }
 				<select id={ selectId }>
 					<option>{ __( 'Select Category' ) }</option>
 					{ categoriesList.map( ( category ) =>
@@ -148,6 +167,15 @@ export default function CategoriesEdit( {
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							className="wp-block-categories__indentation"
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ toggleAttribute( 'showLabel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }

package/src/categories/editor.scss

@@ -10,3 +10,7 @@
 [data-align="center"] .wp-block-categories {
 	text-align: center;
 }
+
+.wp-block-categories__indentation {
+	padding-left: 16px;
+}

package/src/categories/index.php

@@ -34,7 +34,10 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
+		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label            = __( 'Categories' );
+		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 

package/src/categories/style.scss

@@ -14,4 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
+	& .wp-block-categories__label {
+		width: 100%;
+		display: block;
+	}
 }

package/src/columns/index.js

@@ -23,7 +23,7 @@ export const settings = {
 	icon,
 	variations,
 	example: {
-		viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
+		viewportWidth: 782, // Columns collapse "@media (max-width: 781px)".
 		innerBlocks: [
 			{
 				name: 'core/column',

package/src/cover/edit/inspector-controls.js

@@ -260,6 +260,7 @@ export default function CoverInspectorControls( {
 									gradient: undefined,
 									customGradient: undefined,
 								} ),
+								clearable: true,
 							},
 						] }
 						panelId={ clientId }

package/src/embed/embed-preview.js

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { getAuthority } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -73,14 +74,11 @@ class EmbedPreview extends Component {
 		const { interactive } = this.state;
 
 		const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-		const parsedHost = new URL( url ).host.split( '.' );
-		const parsedHostBaseUrl = parsedHost
-			.splice( parsedHost.length - 2, parsedHost.length - 1 )
-			.join( '.' );
+		const embedSourceUrl = getAuthority( url );
 		const iframeTitle = sprintf(
 			// translators: %s: host providing embed content e.g: www.youtube.com
 			__( 'Embedded content from %s' ),
-			parsedHostBaseUrl
+			embedSourceUrl
 		);
 		const sandboxClassnames = clsx(
 			type,
@@ -136,7 +134,7 @@ class EmbedPreview extends Component {
 								__(
 									"Embedded content from %s can't be previewed in the editor."
 								),
-								parsedHostBaseUrl
+								embedSourceUrl
 							) }
 						</p>
 					</Placeholder>

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -106,21 +106,21 @@ exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insertion inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insertion inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 

package/src/embed/test/index.js

@@ -200,7 +200,7 @@ describe( 'utils', () => {
 			expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual(
 				expect.objectContaining( {
 					icon: embedInstagramIcon,
-					title: 'Instagram',
+					title: 'Instagram Embed',
 				} )
 			);
 		} );