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

package/src/post-date/index.php

@@ -9,6 +9,7 @@
  * Renders the `core/post-date` block on the server.
  *
  * @since 5.8.0
+ * @since 6.9.0 Added `datetime` attribute and Block Bindings support.
  *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
@@ -18,44 +19,39 @@
 function render_block_core_post_date( $attributes, $content, $block ) {
 	$classes = array();
 
-	if ( ! isset( $attributes['datetime'] ) ) {
+	if (
+		isset( $attributes['metadata']['bindings']['datetime']['source'] ) &&
+		isset( $attributes['metadata']['bindings']['datetime']['args'] )
+	) {
 		/*
-		 * This can mean two things:
-		 *
-		 * 1. We're dealing with the legacy version of the block that didn't have the `datetime` attribute.
-		 * 2. The `datetime` attribute is bound to a Block Bindings source, but we're on a version of WordPress
-		 *    that doesn't support binding that attribute to a Block Bindings source.
-		 *
-		 * In both cases, we set the `datetime` attribute to its correct value by applying Block Bindings manually.
+		 * We might be running on a version of WordPress that doesn't support binding the block's `datetime` attribute
+		 * to a Block Bindings source. In this case, we need to manually set the `datetime` attribute to its correct value.
+		 * This branch can be removed once the minimum required WordPress version is 6.9 or newer.
 		 */
-		if (
-			isset( $attributes['metadata']['bindings']['datetime']['source'] ) &&
-			isset( $attributes['metadata']['bindings']['datetime']['args'] )
-		) {
-			// We're using a version of WordPress that doesn't support binding the block's `datetime` attribute to a Block Bindings source.
-			// This branch can be removed once the minimum required WordPress version supports the `core/post-data` source.
-			$source      = get_block_bindings_source( $attributes['metadata']['bindings']['datetime']['source'] );
-			$source_args = $attributes['metadata']['bindings']['datetime']['args'];
+		$source      = get_block_bindings_source( $attributes['metadata']['bindings']['datetime']['source'] );
+		$source_args = $attributes['metadata']['bindings']['datetime']['args'];
+
+		$attributes['datetime'] = $source->get_value( $source_args, $block, 'datetime' );
+	} elseif ( ! isset( $attributes['datetime'] ) ) {
+		/*
+		 * This is the legacy version of the block that didn't have the `datetime` attribute.
+		 * This branch needs to be kept for backward compatibility.
+		 */
+		$source = get_block_bindings_source( 'core/post-data' );
+		if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+			$source_args = array(
+				'key' => 'modified',
+			);
 		} else {
-			// This is the legacy version of the block that didn't have the `datetime` attribute.
-			// This branch needs to be kept for backward compatibility.
-			$source = get_block_bindings_source( 'core/post-data' );
-			if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
-				$source_args = array(
-					'key' => 'modified',
-				);
-			} else {
-				$source_args = array(
-					'key' => 'date',
-				);
-			}
+			$source_args = array(
+				'key' => 'date',
+			);
 		}
-
 		$attributes['datetime'] = $source->get_value( $source_args, $block, 'datetime' );
+	}
 
-		if ( isset( $source_args['key'] ) && 'modified' === $source_args['key'] ) {
-			$classes[] = 'wp-block-post-date__modified-date';
-		}
+	if ( isset( $source_args['key'] ) && 'modified' === $source_args['key'] ) {
+		$classes[] = 'wp-block-post-date__modified-date';
 	}
 
 	if ( empty( $attributes['datetime'] ) ) {

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/site-logo/edit.js

@@ -454,12 +454,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/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/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>
 					) }
 				/>

package/src/utils/poster-image.scss

@@ -13,9 +13,31 @@
 		opacity: 1;
 		margin-top: $grid-unit-20;
 	}
+
+	.components-drop-zone__content {
+		border-radius: $radius-small;
+	}
+
+	// Align text and icons horizontally to avoid clipping when the poster image is not set.
+	.components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
+	}
+
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
 }
 
-.block-library-poster-image__toggle,
 .block-library-poster-image__preview {
 	width: 100%;
 	padding: 0;
@@ -25,9 +47,6 @@
 
 	display: flex;
 	justify-content: center;
-}
-
-.block-library-poster-image__preview {
 	height: auto !important;
 	outline: $border-width solid rgba($black, 0.1);
 
@@ -39,18 +58,6 @@
 	}
 }
 
-.block-library-poster-image__toggle {
-	box-shadow: inset 0 0 0 $border-width $gray-400;
-
-	&:focus:not(:disabled) {
-		// Allow smooth transition between focused and unfocused box-shadow states.
-		box-shadow:
-			0 0 0 currentColor inset,
-			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
-	}
-}
-
 .block-library-poster-image__actions {
 	&:not(.block-library-poster-image__actions-select) {
 		bottom: 0;