@wordpress/block-library 9.28.0 → 9.28.1-next.0f6f9d12c.0

package/src/accordions/style.scss

@@ -0,0 +1,91 @@
+.wp-block-accordion-item {
+	display: grid;
+	grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+	grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+	margin-block-start: 0;
+	margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	text-decoration: inherit;
+	word-spacing: inherit;
+	background: none;
+	border: none;
+	color: inherit;
+	padding: var(--wp--preset--spacing--20, 1em) 0;
+	cursor: pointer;
+	outline: none;
+	display: flex;
+	align-items: center;
+	text-align: inherit;
+	position: relative;
+	width: 100%;
+}
+
+.accordion-item__toggle > span {
+	width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+	overflow: hidden;
+	margin: 0;
+}
+
+.accordion-panel__wrapper {
+	padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+	background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+	flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir="rtl"] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+	flex-direction: row-reverse;
+}
+
+[dir="rtl"] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+	flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+	outline: 2px solid -webkit-focus-ring-color;
+	outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	.wp-block-accordion-item .accordion-item__toggle-icon {
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.wp-block-accordion-item {
+		transition: grid-template-rows 0.3s ease-out;
+	}
+}
+
+.is-open {
+	.accordion-item__toggle-icon.has-icon-plus {
+		transform: rotate(45deg);
+	}
+}

package/src/accordions/view.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'core/accordion', {
+	state: {
+		get isOpen() {
+			const { isOpen, id } = getContext();
+			return isOpen.includes( id );
+		},
+	},
+	actions: {
+		toggle: () => {
+			const context = getContext();
+			const { id, autoclose } = context;
+
+			if ( autoclose ) {
+				context.isOpen = state.isOpen ? [] : [ id ];
+			} else if ( state.isOpen ) {
+				context.isOpen = context.isOpen.filter(
+					( item ) => item !== id
+				);
+			} else {
+				context.isOpen.push( id );
+			}
+		},
+	},
+	callbacks: {
+		initIsOpen: () => {
+			const context = getContext();
+			const { id, openByDefault } = context;
+			if ( openByDefault ) {
+				context.isOpen.push( id );
+			}
+		},
+	},
+} );

package/src/block/index.php

@@ -88,20 +88,22 @@ function render_block_core_block( $attributes, $content, $block_instance ) {
 		$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
-				);
+		if ( ! class_exists( 'WP_Block_Cloner' ) ) {
+			// 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 );

package/src/cover/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"useFeaturedImage": {
 			"type": "boolean",

package/src/file/index.php

@@ -16,33 +16,39 @@
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content ) {
+	if ( empty( $attributes['displayPreview'] ) ) {
+		return $content;
+	}
+
 	// If it's interactive, enqueue the script module and add the directives.
-	if ( ! empty( $attributes['displayPreview'] ) ) {
-		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
+	wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
-		$processor = new WP_HTML_Tag_Processor( $content );
-		$processor->next_tag();
+	$processor = new WP_HTML_Tag_Processor( $content );
+	if ( $processor->next_tag() ) {
 		$processor->set_attribute( 'data-wp-interactive', 'core/file' );
-		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
-		$processor->set_attribute( 'hidden', true );
-
-		$filename     = $processor->get_attribute( 'aria-label' );
-		$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
-		$label        = $has_filename ? sprintf(
-			/* translators: %s: filename. */
-			__( 'Embed of %s.' ),
-			$filename
-		) : __( 'PDF embed' );
-
-		// Update object's aria-label attribute if present in block HTML.
-		// Match an aria-label attribute from an object tag.
-		$processor->set_attribute( 'aria-label', $label );
-
-		return $processor->get_updated_html();
 	}
 
-	return $content;
+	// If there are no OBJECT elements, something might have already modified the block.
+	if ( ! $processor->next_tag( 'OBJECT' ) ) {
+		return $content;
+	}
+
+	$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
+	$processor->set_attribute( 'hidden', true );
+
+	$filename     = $processor->get_attribute( 'aria-label' );
+	$has_filename = is_string( $filename ) && ! empty( $filename ) && 'PDF embed' !== $filename;
+	$label        = $has_filename ? sprintf(
+		/* translators: %s: filename. */
+		__( 'Embed of %s.' ),
+		$filename
+	) : __( 'PDF embed' );
+
+	// Update object's aria-label attribute if present in block HTML.
+	// Match an aria-label attribute from an object tag.
+	$processor->set_attribute( 'aria-label', $label );
+
+	return $processor->get_updated_html();
 }
 
 /**

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/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/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/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/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 }
 		</>
 	);