@wordpress/block-library 9.28.0 → 9.29.0

package/src/accordion-panel/block.json

@@ -0,0 +1,74 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-panel",
+	"version": "0.1.0",
+	"title": "Accordion Panel",
+	"category": "design",
+	"description": "Displays an accordion panel.",
+	"example": {},
+	"__experimental": true,
+	"parent": [ "core/accordion-content" ],
+	"supports": {
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"shadow": true
+	},
+	"attributes": {
+		"allowedBlocks": {
+			"type": "array"
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ],
+			"default": false
+		},
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"isSelected": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"textdomain": "default"
+}

package/src/accordion-panel/edit.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+} from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export default function Edit( { attributes } ) {
+	const { allowedBlocks, templateLock, openByDefault, isSelected } =
+		attributes;
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'accordion-content__wrapper',
+			style: {
+				...spacingProps.style,
+			},
+		},
+		{
+			allowedBlocks,
+			template: [ [ 'core/paragraph', {} ] ],
+			templateLock,
+		}
+	);
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+			aria-hidden={ ! isSelected && ! openByDefault }
+		>
+			<div { ...innerBlocksProps } />
+		</div>
+	);
+}

package/src/accordion-panel/icon.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8.10417 6.00024H6.5C5.39543 6.00024 4.5 6.89567 4.5 8.00024V10.3336H6V8.00024C6 7.7241 6.22386 7.50024 6.5 7.50024H8.10417V6.00024ZM4.5 13.6669V16.0002C4.5 17.1048 5.39543 18.0002 6.5 18.0002H8.10417V16.5002H6.5C6.22386 16.5002 6 16.2764 6 16.0002V13.6669H4.5ZM10.3958 6.00024V7.50024H13.6042V6.00024H10.3958ZM15.8958 6.00024V7.50024H17.5C17.7761 7.50024 18 7.7241 18 8.00024V10.3336H19.5V8.00024C19.5 6.89567 18.6046 6.00024 17.5 6.00024H15.8958ZM19.5 13.6669H18V16.0002C18 16.2764 17.7761 16.5002 17.5 16.5002H15.8958V18.0002H17.5C18.6046 18.0002 19.5 17.1048 19.5 16.0002V13.6669ZM13.6042 18.0002V16.5002H10.3958V18.0002H13.6042Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);

package/src/accordion-panel/index.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import initBlock from '../utils/init-block';
+import icon from './icon';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	example: {},
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/accordion-panel/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/accordion-panel/save.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+} from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+		>
+			<div
+				className="accordion-content__wrapper"
+				style={ {
+					...spacingProps.style,
+				} }
+			>
+				<InnerBlocks.Content />
+			</div>
+		</div>
+	);
+}

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 accordion from './accordion';
+import * as accordionContent from './accordion-content';
+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( accordion );
+		blocks.push( accordionContent );
+		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/navigation/edit/test/navigation-menu-selector.js

@@ -295,7 +295,7 @@ describe( 'NavigationMenuSelector', () => {
 					screen.queryByRole( 'menuitem', {
 						name: 'Create new Menu',
 					} )
-				).toBeDisabled();
+				).toHaveAttribute( 'aria-disabled', 'true' );
 
 				// once the menu is created
 				// no more network activity to wait on
@@ -619,7 +619,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check all menu items are present but disabled.
 				screen.getAllByRole( 'menuitem' ).forEach( ( item ) => {
 					// // Check all menu items are present but disabled.
-					expect( item ).toBeDisabled();
+					expect( item ).toHaveAttribute( 'aria-disabled', 'true' );
 				} );
 
 				// once the menu is imported

package/src/post-comments-link/edit.js

@@ -60,7 +60,13 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 	);
 
 	if ( ! post ) {
-		return null;
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Post Comments Link block: post not found.' ) }
+				</Warning>
+			</div>
+		);
 	}
 
 	const { link } = post;

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']}";