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

package/src/file/transforms.js

@@ -104,8 +104,8 @@ const transforms = {
 				if ( ! id ) {
 					return false;
 				}
-				const { getMedia } = select( coreStore );
-				const media = getMedia( id );
+				const { getEntityRecord } = select( coreStore );
+				const media = getEntityRecord( 'postType', 'attachment', id );
 				return !! media && media.mime_type.includes( 'audio' );
 			},
 			transform: ( attributes ) => {
@@ -124,8 +124,8 @@ const transforms = {
 				if ( ! id ) {
 					return false;
 				}
-				const { getMedia } = select( coreStore );
-				const media = getMedia( id );
+				const { getEntityRecord } = select( coreStore );
+				const media = getEntityRecord( 'postType', 'attachment', id );
 				return !! media && media.mime_type.includes( 'video' );
 			},
 			transform: ( attributes ) => {
@@ -144,8 +144,8 @@ const transforms = {
 				if ( ! id ) {
 					return false;
 				}
-				const { getMedia } = select( coreStore );
-				const media = getMedia( id );
+				const { getEntityRecord } = select( coreStore );
+				const media = getEntityRecord( 'postType', 'attachment', id );
 				return !! media && media.mime_type.includes( 'image' );
 			},
 			transform: ( attributes ) => {

package/src/file/utils/index.js

@@ -5,6 +5,11 @@
  * @return {boolean} Whether or not the browser supports inline PDFs.
  */
 export const browserSupportsPdfs = () => {
+	// Use native feature detection if available.
+	if ( window.navigator.pdfViewerEnabled ) {
+		return true;
+	}
+
 	// Most mobile devices include "Mobi" in their UA.
 	if ( window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ) {
 		return false;

package/src/form-input/index.php

@@ -19,10 +19,12 @@ function render_block_core_form_input( $attributes, $content ) {
 		$visibility_permissions = $attributes['visibilityPermissions'];
 	}
 
-	if ( 'logged-in' === $visibility_permissions && ! is_user_logged_in() ) {
+	$user_logged_in = is_user_logged_in();
+
+	if ( 'logged-in' === $visibility_permissions && ! $user_logged_in ) {
 		return '';
 	}
-	if ( 'logged-out' === $visibility_permissions && is_user_logged_in() ) {
+	if ( 'logged-out' === $visibility_permissions && $user_logged_in ) {
 		return '';
 	}
 	return $content;

package/src/freeform/edit.js

@@ -188,6 +188,13 @@ function ClassicEdit( {
 				}
 			} );
 
+			editor.on( 'paste', ( event ) => {
+				// TinyMCE selection isn’t synced with the block editor selection store.
+				// This event handler prevents paste from bubbling so the useClipboardHandler
+				// won’t replace the block.
+				event.stopPropagation();
+			} );
+
 			editor.on( 'init', () => {
 				const rootNode = editor.getBody();
 

package/src/gallery/use-get-media.js

@@ -26,11 +26,15 @@ export default function useGetMedia( innerBlockImages ) {
 			}
 
 			return (
-				select( coreStore ).getMediaItems( {
-					include: imageIds.join( ',' ),
-					per_page: -1,
-					orderby: 'include',
-				} ) ?? EMPTY_IMAGE_MEDIA
+				select( coreStore ).getEntityRecords(
+					'postType',
+					'attachment',
+					{
+						include: imageIds.join( ',' ),
+						per_page: -1,
+						orderby: 'include',
+					}
+				) ?? EMPTY_IMAGE_MEDIA
 			);
 		},
 		[ innerBlockImages ]

package/src/gallery/use-get-media.native.js

@@ -32,12 +32,16 @@ export default function useGetMedia( innerBlockImages = [] ) {
 			}
 
 			return (
-				select( coreStore ).getMediaItems( {
-					include: imageIds.join( ',' ),
-					per_page:
-						imageIds.length /* 'hard' limit necessary as unbounded queries aren't supported on native */,
-					orderby: 'include',
-				} ) ?? EMPTY_IMAGE_MEDIA
+				select( coreStore ).getEntityRecords(
+					'postType',
+					'attachment',
+					{
+						include: imageIds.join( ',' ),
+						per_page:
+							imageIds.length /* 'hard' limit necessary as unbounded queries aren't supported on native */,
+						orderby: 'include',
+					}
+				) ?? EMPTY_IMAGE_MEDIA
 			);
 		},
 		[ innerBlockImages ]

package/src/image/edit.native.js

@@ -905,7 +905,7 @@ export class ImageEdit extends Component {
 
 export default compose( [
 	withSelect( ( select, props ) => {
-		const { getMedia } = select( coreStore );
+		const { getEntityRecord } = select( coreStore );
 		const { getSettings, wasBlockJustInserted } =
 			select( blockEditorStore );
 		const { getEditedPostAttribute } = select( 'core/editor' );
@@ -926,7 +926,9 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
-		const image = shouldGetMedia ? getMedia( id ) : null;
+		const image = shouldGetMedia
+			? getEntityRecord( 'postType', 'attachment', id )
+			: null;
 
 		return {
 			image,

package/src/image/image.js

@@ -306,7 +306,12 @@ export default function Image( {
 	const image = useSelect(
 		( select ) =>
 			id && isSingleSelected
-				? select( coreStore ).getMedia( id, { context: 'view' } )
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id,
+						{ context: 'view' }
+				  )
 				: null,
 		[ id, isSingleSelected ]
 	);

package/src/image/index.php

@@ -100,7 +100,7 @@ function render_block_core_image( $attributes, $content, $block ) {
  *
  * @param array $block Block data.
  *
- * @return array Filtered block data.
+ * @return array|null Filtered block data.
  */
 function block_core_image_get_lightbox_settings( $block ) {
 	// Gets the lightbox setting from the block attributes.

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

@@ -42,7 +42,9 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 } );
 
 function mockGetMedia( media ) {
-	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
+	jest.spyOn( select( coreStore ), 'getEntityRecord' ).mockReturnValue(
+		media
+	);
 }
 
 const FETCH_MEDIA = {
@@ -71,8 +73,12 @@ beforeEach( () => {
 	// Mock media fetch requests
 	setupApiFetch( [ FETCH_MEDIA ] );
 
-	// Invalidate `getMedia` resolutions to allow requesting to the API the same media id
-	dispatch( coreStore ).invalidateResolutionForStoreSelector( 'getMedia' );
+	// Invalidate `getEntityRecord` resolutions to allow requesting to the API the same media id
+	dispatch( coreStore ).invalidateResolution( 'getEntityRecord', [
+		'postType',
+		'attachment',
+		1,
+	] );
 } );
 
 afterEach( () => {
@@ -99,7 +105,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -126,7 +132,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -153,7 +159,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -190,7 +196,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -223,7 +229,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is not fetched via `getMedia` due to the presence of query parameters in the URL.
+		// Check that image is not fetched via `getEntityRecord` due to the presence of query parameters in the URL.
 		expect( apiFetch ).not.toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -248,7 +254,7 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
@@ -279,7 +285,7 @@ describe( 'Image Block', () => {
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// Check that image is fetched via `getMedia`
+		// Check that image is fetched via `getEntityRecord`
 		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );

package/src/index.js

@@ -20,6 +20,10 @@ import {
 // production build to make the final bundle smaller.
 //
 // See https://github.com/WordPress/gutenberg/pull/40655 for more context.
+import * as accordions from './accordions';
+import * as accordionItem from './accordion-item';
+import * as accordionHeader from './accordion-header';
+import * as accordionPanel from './accordion-panel';
 import * as archives from './archives';
 import * as avatar from './avatar';
 import * as audio from './audio';
@@ -234,6 +238,14 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
+
+	if ( window?.__experimentalEnableBlockExperiments ) {
+		blocks.push( accordions );
+		blocks.push( accordionItem );
+		blocks.push( accordionHeader );
+		blocks.push( accordionPanel );
+	}
+
 	if ( window?.__experimentalEnableFormBlocks ) {
 		blocks.push( form );
 		blocks.push( formInput );

package/src/list-item/edit.js

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -53,6 +54,7 @@ export function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
+				shortcut={ displayShortcut.shift( 'Tab' ) }
 				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ () => outdentListItem() }
@@ -60,6 +62,7 @@ export function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
+				shortcut="Tab"
 				description={ __( 'Indent list item' ) }
 				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }

package/src/loginout/index.php

@@ -23,14 +23,16 @@ function render_block_core_loginout( $attributes ) {
 	 */
 	$current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
 
-	$classes  = is_user_logged_in() ? 'logged-in' : 'logged-out';
+	$user_logged_in = is_user_logged_in();
+
+	$classes  = $user_logged_in ? 'logged-in' : 'logged-out';
 	$contents = wp_loginout(
 		isset( $attributes['redirectToCurrent'] ) && $attributes['redirectToCurrent'] ? $current_url : '',
 		false
 	);
 
 	// If logged-out and displayLoginAsForm is true, show the login form.
-	if ( ! is_user_logged_in() && ! empty( $attributes['displayLoginAsForm'] ) ) {
+	if ( ! $user_logged_in && ! empty( $attributes['displayLoginAsForm'] ) ) {
 		// Add a class.
 		$classes .= ' has-login-form';
 

package/src/media-text/edit.js

@@ -199,9 +199,14 @@ function MediaTextEdit( {
 			return {
 				featuredImageMedia:
 					featuredImage && useFeaturedImage
-						? select( coreStore ).getMedia( featuredImage, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								featuredImage,
+								{
+									context: 'view',
+								}
+						  )
 						: undefined,
 			};
 		},
@@ -213,9 +218,14 @@ function MediaTextEdit( {
 			return {
 				image:
 					mediaId && isSelected
-						? select( coreStore ).getMedia( mediaId, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								mediaId,
+								{
+									context: 'view',
+								}
+						  )
 						: null,
 			};
 		},

package/src/media-text/media-container.js

@@ -200,6 +200,7 @@ function MediaContainer( props, ref ) {
 					}
 					mediaId={ mediaId }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
+					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }

package/src/media-text/transforms.js

@@ -45,6 +45,7 @@ const transforms = {
 					style,
 					textColor,
 					url,
+					useFeaturedImage,
 				},
 				innerBlocks
 			) => {
@@ -90,6 +91,7 @@ const transforms = {
 						mediaType: backgroundType,
 						mediaUrl: url,
 						textColor,
+						useFeaturedImage,
 						...additionalAttributes,
 					},
 					innerBlocks
@@ -143,6 +145,7 @@ const transforms = {
 					mediaUrl,
 					style,
 					textColor,
+					useFeaturedImage,
 				},
 				innerBlocks
 			) => {
@@ -169,13 +172,14 @@ const transforms = {
 					alt: mediaAlt,
 					anchor,
 					backgroundType: mediaType,
-					dimRatio: !! mediaUrl ? 50 : 100,
+					dimRatio: !! mediaUrl || useFeaturedImage ? 50 : 100,
 					focalPoint,
 					gradient,
 					id: mediaId,
 					overlayColor: backgroundColor,
 					textColor,
 					url: mediaUrl,
+					useFeaturedImage,
 					...additionalAttributes,
 				};
 

package/src/more/edit.js

@@ -7,9 +7,13 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 } from '@wordpress/components';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { ENTER } from '@wordpress/keycodes';
+import {
+	InspectorControls,
+	PlainText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -22,29 +26,6 @@ export default function MoreEdit( {
 	insertBlocksAfter,
 	setAttributes,
 } ) {
-	const onChangeInput = ( event ) => {
-		setAttributes( {
-			customText: event.target.value,
-		} );
-	};
-
-	const onKeyDown = ( { keyCode } ) => {
-		if ( keyCode === ENTER ) {
-			insertBlocksAfter( [ createBlock( getDefaultBlockName() ) ] );
-		}
-	};
-
-	const getHideExcerptHelp = ( checked ) =>
-		checked
-			? __( 'The excerpt is hidden.' )
-			: __( 'The excerpt is visible.' );
-
-	const toggleHideExcerpt = () => setAttributes( { noTeaser: ! noTeaser } );
-
-	const style = {
-		width: `${ ( customText ? customText : DEFAULT_TEXT ).length + 1.2 }em`,
-	};
-
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -73,21 +54,34 @@ export default function MoreEdit( {
 								'Hide the excerpt on the full content page'
 							) }
 							checked={ !! noTeaser }
-							onChange={ toggleHideExcerpt }
-							help={ getHideExcerptHelp }
+							onChange={ () =>
+								setAttributes( { noTeaser: ! noTeaser } )
+							}
+							help={ ( checked ) =>
+								checked
+									? __( 'The excerpt is hidden.' )
+									: __( 'The excerpt is visible.' )
+							}
 						/>
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
-				<input
-					aria-label={ __( '“Read more” link text' ) }
-					type="text"
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( '"Read more" text' ) }
 					value={ customText }
 					placeholder={ DEFAULT_TEXT }
-					onChange={ onChangeInput }
-					onKeyDown={ onKeyDown }
-					style={ style }
+					onChange={ ( value ) =>
+						setAttributes( { customText: value } )
+					}
+					disableLineBreaks
+					__unstableOnSplitAtEnd={ () =>
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
+					}
 				/>
 			</div>
 		</>

package/src/more/editor.scss

@@ -11,27 +11,18 @@
 	white-space: nowrap;
 
 	// Label
-	input[type="text"] {
+	.rich-text {
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
 		font-weight: 600;
 		font-family: $default-font;
 		color: $gray-700;
-		border: none;
-		box-shadow: none;
+		display: inline-flex;
 		white-space: nowrap;
 		text-align: center;
-		margin: 0;
-		border-radius: 4px;
 		background: $white;
-		padding: 6px 8px;
-		height: $button-size-small;
-		max-width: 100%;
-
-		&:focus {
-			box-shadow: none;
-		}
+		padding: 10px 36px;
 	}
 
 	// Dashed line

package/src/post-comments-count/block.json

@@ -12,6 +12,9 @@
 		}
 	},
 	"usesContext": [ "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

package/src/post-comments-link/block.json

@@ -12,6 +12,9 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

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'] ) ) {