@wordpress/block-library 9.27.1-next.46f643fa0.0 → 9.28.1-next.0f6f9d12c.0

package/src/post-excerpt/index.php

@@ -20,18 +20,6 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	/*
-	* The purpose of the excerpt length setting is to limit the length of both
-	* automatically generated and user-created excerpts.
-	* Because the excerpt_length filter only applies to auto generated excerpts,
-	* wp_trim_words is used instead.
-	*/
-	$excerpt_length = $attributes['excerptLength'];
-	$excerpt        = get_the_excerpt( $block->context['postId'] );
-	if ( isset( $excerpt_length ) ) {
-		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
-	}
-
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
 	$filter_excerpt_more = static function ( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
@@ -44,8 +32,24 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	 * So if the block's attribute is not empty override the
 	 * `excerpt_more` filter and return nothing. This will
 	 * result in showing only one `read more` link at a time.
+	 *
+	 * This hook needs to be applied before the excerpt is retrieved with get_the_excerpt.
+	 * Otherwise, the read more link filter from the theme is not removed.
 	 */
 	add_filter( 'excerpt_more', $filter_excerpt_more );
+
+	/*
+	* The purpose of the excerpt length setting is to limit the length of both
+	* automatically generated and user-created excerpts.
+	* Because the excerpt_length filter only applies to auto generated excerpts,
+	* wp_trim_words is used instead.
+	*/
+	$excerpt_length = $attributes['excerptLength'];
+	$excerpt        = get_the_excerpt( $block->context['postId'] );
+	if ( isset( $excerpt_length ) ) {
+		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
+	}
+
 	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];

package/src/post-featured-image/edit.js

@@ -133,12 +133,12 @@ export default function PostFeaturedImageEdit( {
 
 	const { media, postType, postPermalink } = useSelect(
 		( select ) => {
-			const { getMedia, getPostType, getEditedEntityRecord } =
+			const { getEntityRecord, getPostType, getEditedEntityRecord } =
 				select( coreStore );
 			return {
 				media:
 					featuredImage &&
-					getMedia( featuredImage, {
+					getEntityRecord( 'postType', 'attachment', featuredImage, {
 						context: 'view',
 					} ),
 				postType: postTypeSlug && getPostType( postTypeSlug ),

package/src/query-title/block.json

@@ -34,6 +34,7 @@
 			"type": "search"
 		}
 	},
+	"usesContext": [ "query" ],
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/query-title/edit.js

@@ -25,9 +25,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useArchiveLabel } from './use-archive-label';
+import { usePostTypeLabel } from './use-post-type-label';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-const SUPPORTED_TYPES = [ 'archive', 'search' ];
+const SUPPORTED_TYPES = [ 'archive', 'search', 'post-type' ];
 
 export default function QueryTitleEdit( {
 	attributes: {
@@ -39,8 +40,10 @@ export default function QueryTitleEdit( {
 		showSearchTerm,
 	},
 	setAttributes,
+	context: { query },
 } ) {
 	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
+	const { postTypeLabel } = usePostTypeLabel( query?.postType );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const TagName = `h${ level }`;
@@ -174,6 +177,60 @@ export default function QueryTitleEdit( {
 		);
 	}
 
+	if ( type === 'post-type' ) {
+		let title;
+		if ( postTypeLabel ) {
+			if ( showPrefix ) {
+				title = sprintf(
+					/* translators: %s: Singular post type name of the queried object */
+					__( 'Post Type: "%s"' ),
+					postTypeLabel
+				);
+			} else {
+				title = postTypeLabel;
+			}
+		} else {
+			title = showPrefix ? __( 'Post Type: Name' ) : __( 'Name' );
+		}
+
+		titleElement = (
+			<>
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () =>
+							setAttributes( {
+								showPrefix: true,
+							} )
+						}
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							hasValue={ () => ! showPrefix }
+							label={ __( 'Show post type label' ) }
+							onDeselect={ () =>
+								setAttributes( { showPrefix: true } )
+							}
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show post type label' ) }
+								onChange={ () =>
+									setAttributes( {
+										showPrefix: ! showPrefix,
+									} )
+								}
+								checked={ showPrefix }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</InspectorControls>
+				<TagName { ...blockProps }>{ title }</TagName>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<BlockControls group="block">

package/src/query-title/index.php

@@ -7,23 +7,28 @@
 
 /**
  * Renders the `core/query-title` block on the server.
- * For now it only supports Archive title,
+ * For now it supports Archive title, Search title, and Post Type Label,
  * using queried object information
  *
  * @since 5.8.0
  *
- * @param array $attributes Block attributes.
+ * @param array  $attributes Block attributes.
+ * @param array  $_content   Block content.
+ * @param object $block      Block instance.
  *
  * @return string Returns the query title based on the queried object.
  */
-function render_block_core_query_title( $attributes ) {
+function render_block_core_query_title( $attributes, $content, $block ) {
 	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
 	$is_archive = is_archive();
 	$is_search  = is_search();
+	$post_type  = isset( $block->context['query']['postType'] ) ? $block->context['query']['postType'] : get_post_type();
+
 	if ( ! $type ||
 		( 'archive' === $type && ! $is_archive ) ||
-		( 'search' === $type && ! $is_search )
-		) {
+		( 'search' === $type && ! $is_search ) ||
+		( 'post-type' === $type && ! $post_type )
+	) {
 		return '';
 	}
 	$title = '';
@@ -48,6 +53,26 @@ function render_block_core_query_title( $attributes ) {
 			);
 		}
 	}
+	if ( 'post-type' === $type ) {
+		$post_type_object = get_post_type_object( $post_type );
+
+		if ( ! $post_type_object ) {
+			return '';
+		}
+
+		$post_type_name = $post_type_object->labels->singular_name;
+		$show_prefix    = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
+
+		if ( $show_prefix ) {
+			$title = sprintf(
+				/* translators: %s is the post type name. */
+				__( 'Post Type: "%s"' ),
+				$post_type_name
+			);
+		} else {
+			$title = $post_type_name;
+		}
+	}
 
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";

package/src/query-title/use-post-type-label.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Hook to fetch the singular label for the current post type.
+ *
+ * @param {string} contextPostType Context provided post type.
+ */
+export function usePostTypeLabel( contextPostType ) {
+	const currentPostType = useSelect( ( select ) => {
+		// Access core/editor by string to avoid @wordpress/editor dependency.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getCurrentPostType } = select( 'core/editor' );
+		return getCurrentPostType();
+	}, [] );
+
+	// Fetch the post type label from the core data store
+	return useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			const postTypeSlug = contextPostType || currentPostType;
+			const postType = getPostType( postTypeSlug );
+
+			// Return the singular name of the post type
+			return {
+				postTypeLabel: postType ? postType.labels.singular_name : '',
+			};
+		},
+		[ contextPostType, currentPostType ]
+	);
+}

package/src/query-title/variations.js

@@ -30,6 +30,19 @@ const variations = [
 		},
 		scope: [ 'inserter' ],
 	},
+	{
+		isDefault: false,
+		name: 'post-type-label',
+		title: __( 'Post Type Label' ),
+		description: __(
+			'Display the post type label based on the queried object.'
+		),
+		icon: title,
+		attributes: {
+			type: 'post-type',
+		},
+		scope: [ 'inserter' ],
+	},
 ];
 
 /**

package/src/site-logo/edit.js

@@ -38,6 +38,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -73,6 +74,16 @@ const SiteLogo = ( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	// Check if we're in contentOnly mode
+	const blockEditingMode = useBlockEditingMode();
+	const isNavigationMode = useSelect(
+		( select ) => select( blockEditorStore ).isNavigationMode(),
+		[]
+	);
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
+	const isContentOnlyWriteMode = isNavigationMode && isContentOnlyMode;
+
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -205,8 +216,12 @@ const SiteLogo = ( {
 	const canEditImage =
 		logoId && naturalWidth && naturalHeight && imageEditing;
 
-	const imgEdit =
-		canEditImage && isEditingImage ? (
+	// Hide crop and dimensions editing in write mode
+	const shouldShowCropAndDimensions = ! isContentOnlyWriteMode;
+
+	let imgEdit;
+	if ( canEditImage && isEditingImage ) {
+		imgEdit = (
 			<ImageEditor
 				id={ logoId }
 				url={ logoUrl }
@@ -221,13 +236,16 @@ const SiteLogo = ( {
 					setIsEditingImage( false );
 				} }
 			/>
-		) : (
+		);
+	} else {
+		// Always render ResizableBox but disable resize functionality in contentOnly mode
+		imgEdit = (
 			<ResizableBox
 				size={ {
 					width: currentWidth,
 					height: currentHeight,
 				} }
-				showHandle={ isSelected }
+				showHandle={ isSelected && shouldShowCropAndDimensions }
 				minWidth={ minWidth }
 				maxWidth={ maxWidthBuffer }
 				minHeight={ minHeight }
@@ -251,6 +269,7 @@ const SiteLogo = ( {
 				{ imgWrapper }
 			</ResizableBox>
 		);
+	}
 
 	// Support the previous location for the Site Icon settings. To be removed
 	// when the required WP core version for Gutenberg is >= 6.5.0.
@@ -371,15 +390,17 @@ const SiteLogo = ( {
 					) }
 				</ToolsPanel>
 			</InspectorControls>
-			<BlockControls group="block">
-				{ canEditImage && ! isEditingImage && (
-					<ToolbarButton
-						onClick={ () => setIsEditingImage( true ) }
-						icon={ crop }
-						label={ __( 'Crop' ) }
-					/>
+			{ canEditImage &&
+				! isEditingImage &&
+				shouldShowCropAndDimensions && (
+					<BlockControls group="block">
+						<ToolbarButton
+							onClick={ () => setIsEditingImage( true ) }
+							icon={ crop }
+							label={ __( 'Crop' ) }
+						/>
+					</BlockControls>
 				) }
-			</BlockControls>
 			{ imgEdit }
 		</>
 	);
@@ -454,12 +475,19 @@ export default function LogoEdit( {
 		const _siteIconId = siteSettings?.site_icon;
 		const mediaItem =
 			_siteLogoId &&
-			select( coreStore ).getMedia( _siteLogoId, {
-				context: 'view',
-			} );
+			select( coreStore ).getEntityRecord(
+				'postType',
+				'attachment',
+				_siteLogoId,
+				{
+					context: 'view',
+				}
+			);
 		const _isRequestingMediaItem =
 			!! _siteLogoId &&
-			! select( coreStore ).hasFinishedResolution( 'getMedia', [
+			! select( coreStore ).hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				'attachment',
 				_siteLogoId,
 				{ context: 'view' },
 			] );

package/src/site-title/edit.js

@@ -16,6 +16,8 @@ import {
 	BlockControls,
 	useBlockProps,
 	HeadingLevelDropdown,
+	useBlockEditingMode,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -36,9 +38,11 @@ export default function SiteTitleEdit( {
 	insertBlocksAfter,
 } ) {
 	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
-	const { canUserEdit, title } = useSelect( ( select ) => {
+	const { canUserEdit, title, isNavigationMode } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
+		const { isNavigationMode: _isNavigationMode } =
+			select( blockEditorStore );
 		const canEdit = canUser( 'update', {
 			kind: 'root',
 			name: 'site',
@@ -49,10 +53,12 @@ export default function SiteTitleEdit( {
 		return {
 			canUserEdit: canEdit,
 			title: canEdit ? settings?.title : readOnlySettings?.name,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 	const { editEntityRecord } = useDispatch( coreStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const blockEditingMode = useBlockEditingMode();
 
 	function setTitle( newTitle ) {
 		editEntityRecord( 'root', 'site', undefined, {
@@ -103,21 +109,23 @@ export default function SiteTitleEdit( {
 	);
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					value={ level }
-					options={ levelOptions }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ ! isNavigationMode && blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						value={ level }
+						options={ levelOptions }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/social-link/icons/tiktok.js

@@ -4,7 +4,7 @@
 import { Path, SVG } from '@wordpress/primitives';
 
 export const TiktokIcon = () => (
-	<SVG width="24" height="24" viewBox="0 0 32 32" version="1.1">
-		<Path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" />
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M12.4044 3.01519C13.4086 3 14.4072 3.009 15.4045 3C15.465 4.14812 15.8874 5.31762 16.7472 6.12935C17.6053 6.96134 18.819 7.34217 20 7.47099V10.4912C18.8933 10.4558 17.7814 10.2308 16.7771 9.76499C16.3397 9.57148 15.9323 9.32227 15.5334 9.06745C15.5283 11.2591 15.5426 13.4479 15.5191 15.6305C15.4592 16.679 15.1053 17.7225 14.4814 18.5866C13.4777 20.025 11.7356 20.9627 9.94635 20.992C8.84885 21.0533 7.7525 20.7608 6.81729 20.2219C5.26743 19.3286 4.17683 17.6933 4.01799 15.9382C3.99957 15.563 3.99324 15.1883 4.00878 14.8221C4.14691 13.395 4.86917 12.0297 5.99027 11.101C7.26101 10.0192 9.04107 9.50397 10.7078 9.80886C10.7233 10.9199 10.6778 12.0297 10.6778 13.1407C9.91643 12.9 9.02668 12.9675 8.36139 13.4192C7.87566 13.7269 7.50675 14.1983 7.31453 14.7316C7.15569 15.1118 7.20116 15.5343 7.21036 15.9382C7.3928 17.169 8.60368 18.2035 9.89628 18.0916C10.7532 18.0826 11.5745 17.5965 12.0211 16.8849C12.1655 16.6357 12.3273 16.3809 12.3359 16.0878C12.4113 14.7462 12.3814 13.4102 12.3906 12.0685C12.3969 9.04495 12.3814 6.02979 12.4049 3.01575L12.4044 3.01519Z" />
 	</SVG>
 );

package/src/social-link/index.php

@@ -274,7 +274,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.065,2a5.526,5.526,0,0,1,3.132.892A5.854,5.854,0,0,1,17.326,5.4a5.821,5.821,0,0,1,.351,2.33q0,.612-.117,2.487a.809.809,0,0,0,.365.091,1.93,1.93,0,0,0,.664-.176,1.93,1.93,0,0,1,.664-.176,1.3,1.3,0,0,1,.729.234.7.7,0,0,1,.351.6.839.839,0,0,1-.41.7,2.732,2.732,0,0,1-.9.41,3.192,3.192,0,0,0-.9.378.728.728,0,0,0-.41.618,1.575,1.575,0,0,0,.156.56,6.9,6.9,0,0,0,1.334,1.953,5.6,5.6,0,0,0,1.881,1.315,5.875,5.875,0,0,0,1.042.3.42.42,0,0,1,.365.456q0,.911-2.852,1.341a1.379,1.379,0,0,0-.143.507,1.8,1.8,0,0,1-.182.605.451.451,0,0,1-.429.241,5.878,5.878,0,0,1-.807-.085,5.917,5.917,0,0,0-.833-.085,4.217,4.217,0,0,0-.807.065,2.42,2.42,0,0,0-.82.293,6.682,6.682,0,0,0-.755.5q-.351.267-.755.527a3.886,3.886,0,0,1-.989.436A4.471,4.471,0,0,1,11.831,22a4.307,4.307,0,0,1-1.256-.176,3.784,3.784,0,0,1-.976-.436q-.4-.26-.749-.527a6.682,6.682,0,0,0-.755-.5,2.422,2.422,0,0,0-.807-.293,4.432,4.432,0,0,0-.82-.065,5.089,5.089,0,0,0-.853.1,5,5,0,0,1-.762.1.474.474,0,0,1-.456-.241,1.819,1.819,0,0,1-.182-.618,1.411,1.411,0,0,0-.143-.521q-2.852-.429-2.852-1.341a.42.42,0,0,1,.365-.456,5.793,5.793,0,0,0,1.042-.3,5.524,5.524,0,0,0,1.881-1.315,6.789,6.789,0,0,0,1.334-1.953A1.575,1.575,0,0,0,6,12.9a.728.728,0,0,0-.41-.618,3.323,3.323,0,0,0-.9-.384,2.912,2.912,0,0,1-.9-.41.814.814,0,0,1-.41-.684.71.71,0,0,1,.338-.593,1.208,1.208,0,0,1,.716-.241,1.976,1.976,0,0,1,.625.169,2.008,2.008,0,0,0,.69.169.919.919,0,0,0,.416-.091q-.117-1.849-.117-2.474A5.861,5.861,0,0,1,6.385,5.4,5.516,5.516,0,0,1,8.625,2.819,7.075,7.075,0,0,1,12.062,2Z"></path></svg>',
 		),
 		'soundcloud'    => array(
-			'name' => _x( 'Soundcloud', 'social link block variation name' ),
+			'name' => _x( 'SoundCloud', 'social link block variation name' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z"></path></svg>',
 		),
 		'spotify'       => array(

package/src/style.scss

@@ -1,3 +1,4 @@
+@import "./accordions/style.scss";
 @import "./archives/style.scss";
 @import "./avatar/style.scss";
 @import "./audio/style.scss";

package/src/utils/poster-image.js

@@ -6,26 +6,73 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	MediaUpload,
+	MediaUploadCheck,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
 import {
 	Button,
 	BaseControl,
+	DropZone,
+	Spinner,
 	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { isBlobURL } from '@wordpress/blob';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 function PosterImage( { poster, onChange } ) {
 	const posterButtonRef = useRef();
+	const [ isLoading, setIsLoading ] = useState( false );
 	const descriptionId = useInstanceId(
 		PosterImage,
 		'block-library-poster-image-description'
 	);
 
+	const { getSettings } = useSelect( blockEditorStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const onDropFiles = ( filesList ) => {
+		getSettings().mediaUpload( {
+			allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
+			filesList,
+			onFileChange: ( [ image ] ) => {
+				if ( isBlobURL( image?.url ) ) {
+					setIsLoading( true );
+					return;
+				}
+
+				if ( image ) {
+					onChange( image );
+				}
+				setIsLoading( false );
+			},
+			onError: ( message ) => {
+				createErrorNotice( message, {
+					id: 'poster-image-upload-notice',
+					type: 'snackbar',
+				} );
+				setIsLoading( false );
+			},
+			multiple: false,
+		} );
+	};
+
+	const getPosterButtonContent = () => {
+		if ( ! poster && isLoading ) {
+			return <Spinner />;
+		}
+
+		return ! poster ? __( 'Set poster image' ) : __( 'Replace' );
+	};
+
 	return (
 		<MediaUploadCheck>
 			<ToolsPanelItem
@@ -48,24 +95,19 @@ function PosterImage( { poster, onChange } ) {
 									__next40pxDefaultSize
 									onClick={ open }
 									aria-haspopup="dialog"
-									aria-label={
-										! poster
-											? null
-											: __(
-													'Edit or replace the poster image.'
-											  )
-									}
-									className={
-										poster
-											? 'block-library-poster-image__preview'
-											: 'block-library-poster-image__toggle'
-									}
+									aria-label={ __(
+										'Edit or replace the poster image.'
+									) }
+									className="block-library-poster-image__preview"
+									disabled={ isLoading }
+									accessibleWhenDisabled
 								>
 									<img
 										src={ poster }
 										alt={ __( 'Poster image preview' ) }
 										className="block-library-poster-image__preview-image"
 									/>
+									{ isLoading && <Spinner /> }
 								</Button>
 							) }
 							<HStack
@@ -87,10 +129,10 @@ function PosterImage( { poster, onChange } ) {
 									variant={
 										! poster ? 'secondary' : undefined
 									}
+									disabled={ isLoading }
+									accessibleWhenDisabled
 								>
-									{ ! poster
-										? __( 'Set poster image' )
-										: __( 'Replace' ) }
+									{ getPosterButtonContent() }
 								</Button>
 								<p id={ descriptionId } hidden>
 									{ poster
@@ -115,11 +157,14 @@ function PosterImage( { poster, onChange } ) {
 											posterButtonRef.current.focus();
 										} }
 										className="block-library-poster-image__action"
+										disabled={ isLoading }
+										accessibleWhenDisabled
 									>
 										{ __( 'Remove' ) }
 									</Button>
 								) }
 							</HStack>
+							<DropZone onFilesDrop={ onDropFiles } />
 						</div>
 					) }
 				/>