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

package/src/block/index.php

@@ -1,4 +1,4 @@
-<?php
+<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName // Needed for WP_Block_Cloner helper class.
 /**
  * Server-side rendering of the `core/block` block.
  *
@@ -16,7 +16,7 @@
  *
  * @return string Rendered HTML of the referenced block.
  */
-function render_block_core_block( $attributes ) {
+function render_block_core_block( $attributes, $content, $block_instance ) {
 	static $seen_refs = array();
 
 	if ( empty( $attributes['ref'] ) ) {
@@ -73,30 +73,43 @@ function render_block_core_block( $attributes ) {
 		$attributes['content'] = $attributes['overrides'];
 	}
 
+	// Apply Block Hooks.
+	$content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block );
+
 	/**
-	 * We set the `pattern/overrides` context through the `render_block_context`
-	 * filter so that it is available when a pattern's inner blocks are
-	 * rendering via do_blocks given it only receives the inner content.
+	 * We attach the blocks from $content as inner blocks to the Synced Pattern block instance.
+	 * This ensures that block context available to the Synced Pattern block instance is provided to
+	 * those blocks.
 	 */
-	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
-	if ( $has_pattern_overrides ) {
-		$filter_block_context = static function ( $context ) use ( $attributes ) {
-			$context['pattern/overrides'] = $attributes['content'];
-			return $context;
-		};
-		add_filter( 'render_block_context', $filter_block_context, 1 );
+	$block_instance->parsed_block['innerBlocks']  = parse_blocks( $content );
+	$block_instance->parsed_block['innerContent'] = array_fill( 0, count( $block_instance->parsed_block['innerBlocks'] ), null );
+	if ( method_exists( $block_instance, 'refresh_context_dependents' ) ) {
+		// WP_Block::refresh_context_dependents() was introduced in WordPress 6.8.
+		$block_instance->refresh_context_dependents();
+	} else {
+		// This branch can be removed once Gutenberg requires WordPress 6.8 or later.
+		// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingClassSinceTag
+		class WP_Block_Cloner extends WP_Block {
+			/**
+			 * Static methods of subclasses have access to protected properties
+			 * of instances of the parent class.
+			 * In this case, this gives us access to `available_context` and `registry`.
+			 */
+			// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingMethodSinceTag
+			public static function clone_instance( $instance ) {
+				return new WP_Block(
+					$instance->parsed_block,
+					$instance->available_context,
+					$instance->registry
+				);
+			}
+		}
+		$block_instance = WP_Block_Cloner::clone_instance( $block_instance );
 	}
 
-	// Apply Block Hooks.
-	$content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block );
-
-	$content = do_blocks( $content );
+	$content = $block_instance->render( array( 'dynamic' => false ) );
 	unset( $seen_refs[ $attributes['ref'] ] );
 
-	if ( $has_pattern_overrides ) {
-		remove_filter( 'render_block_context', $filter_block_context, 1 );
-	}
-
 	return $content;
 }
 

package/src/cover/edit/index.js

@@ -120,9 +120,14 @@ function CoverEdit( {
 			return {
 				media:
 					featuredImage && useFeaturedImage
-						? select( coreStore ).getMedia( featuredImage, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								featuredImage,
+								{
+									context: 'view',
+								}
+						  )
 						: undefined,
 			};
 		},

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

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

package/src/file/edit.js

@@ -80,7 +80,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			media:
 				id === undefined
 					? undefined
-					: select( coreStore ).getMedia( id ),
+					: select( coreStore ).getEntityRecord(
+							'postType',
+							'attachment',
+							id
+					  ),
 		} ),
 		[ id ]
 	);
@@ -128,9 +132,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			return;
 		}
 
-		const isPdf = getFilename( newMedia.url )
-			.toLowerCase()
-			.endsWith( '.pdf' );
+		const isPdf =
+			// Media Library and REST API use different properties for mime type.
+			( newMedia.mime || newMedia.mime_type ) === 'application/pdf' ||
+			getFilename( newMedia.url ).toLowerCase().endsWith( '.pdf' );
 		const pdfAttributes = {
 			displayPreview: isPdf
 				? attributes.displayPreview ?? true

package/src/file/edit.native.js

@@ -583,7 +583,11 @@ export default compose( [
 		const isNotFileHref = id && getProtocol( href ) !== 'file:';
 		return {
 			media: isNotFileHref
-				? select( coreStore ).getMedia( id )
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id
+				  )
 				: undefined,
 			isSidebarOpened: isSelected && isEditorSidebarOpened(),
 			wasBlockJustInserted: select(

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/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/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/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": {