@wordpress/block-library 9.8.7 → 9.10.0

package/src/comments-pagination-numbers/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comments-pagination-previous/block.json

@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-title/index.js

@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/common.scss

@@ -75,8 +75,6 @@
 
 .screen-reader-text {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;
@@ -89,7 +87,6 @@
 
 .screen-reader-text:focus {
 	background-color: $gray-300;
-	clip: auto !important;
 	clip-path: none;
 	color: #444;
 	display: block;

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

@@ -5,12 +5,12 @@ import { useMemo } from '@wordpress/element';
 import {
 	ExternalLink,
 	FocalPointPicker,
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -31,6 +31,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -160,72 +161,130 @@ export default function CoverInspectorControls( {
 		),
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								hasParallax: false,
+								focalPoint: undefined,
+								isRepeated: false,
+								alt: '',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isImageBackground && (
 							<>
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+									isShownByDefault
+									hasValue={ () => hasParallax }
+									onDeselect={ () =>
+										setAttributes( {
+											hasParallax: false,
+											focalPoint: undefined,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Fixed background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								</ToolsPanelItem>
 
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Repeated background' ) }
-									checked={ isRepeated }
-									onChange={ toggleIsRepeated }
-								/>
+									isShownByDefault
+									hasValue={ () => isRepeated }
+									onDeselect={ () =>
+										setAttributes( {
+											isRepeated: false,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Repeated background' ) }
+										checked={ isRepeated }
+										onChange={ toggleIsRepeated }
+									/>
+								</ToolsPanelItem>
 							</>
 						) }
 						{ showFocalPointPicker && (
-							<FocalPointPicker
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
+								isShownByDefault
+								hasValue={ () => !! focalPoint }
+								onDeselect={ () =>
 									setAttributes( {
-										focalPoint: newFocalPoint,
+										focalPoint: undefined,
 									} )
 								}
-							/>
+							>
+								<FocalPointPicker
+									__nextHasNoMarginBottom
+									label={ __( 'Focal point' ) }
+									url={ url }
+									value={ focalPoint }
+									onDragStart={ imperativeFocalPointPreview }
+									onDrag={ imperativeFocalPointPreview }
+									onChange={ ( newFocalPoint ) =>
+										setAttributes( {
+											focalPoint: newFocalPoint,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
 						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
-							<TextareaControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt }
-								onChange={ ( newAlt ) =>
-									setAttributes( { alt: newAlt } )
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: '' } )
 								}
-								help={
-									<>
-										<ExternalLink
-											href={
-												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-												__(
-													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-												)
-											}
-										>
+							>
+								<TextareaControl
+									__nextHasNoMarginBottom
+									label={ __( 'Alternative text' ) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
+												{ __(
+													'Describe the purpose of the image.'
+												) }
+											</ExternalLink>
+											<br />
 											{ __(
-												'Describe the purpose of the image.'
+												'Leave empty if decorative.'
 											) }
-										</ExternalLink>
-										<br />
-										{ __( 'Leave empty if decorative.' ) }
-									</>
-								}
-							/>
+										</>
+									}
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (

package/src/cover/editor.scss

@@ -42,6 +42,7 @@
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
+		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions

package/src/cover/index.php

@@ -20,29 +20,22 @@ function render_block_core_cover( $attributes, $content ) {
 		return $content;
 	}
 
+	$object_position = isset( $attributes['focalPoint'] )
+		? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'
+		: null;
+
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {
 		$attr = array(
 			'class'           => 'wp-block-cover__image-background',
 			'data-object-fit' => 'cover',
 		);
 
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+		if ( $object_position ) {
 			$attr['data-object-position'] = $object_position;
-			$attr['style']                = 'object-position: ' . $object_position;
+			$attr['style']                = 'object-position:' . $object_position . ';';
 		}
 
 		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
-
-		/*
-		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
-		 * and removes eventual whitespace characters between the two (typically introduced at template level)
-		 */
-		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
-		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
-			$offset  = $matches[0][1];
-			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
-		}
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
@@ -52,15 +45,41 @@ function render_block_core_cover( $attributes, $content ) {
 			return $content;
 		}
 
-		$processor = new WP_HTML_Tag_Processor( $content );
+		$current_thumbnail_id = get_post_thumbnail_id();
+
+		$processor = new WP_HTML_Tag_Processor( '<div></div>' );
 		$processor->next_tag();
 
-		$styles         = $processor->get_attribute( 'style' );
-		$merged_styles  = ! empty( $styles ) ? $styles . ';' : '';
-		$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+		$current_alt = trim( strip_tags( get_post_meta( $current_thumbnail_id, '_wp_attachment_image_alt', true ) ) );
+		if ( $current_alt ) {
+			$processor->set_attribute( 'role', 'img' );
+			$processor->set_attribute( 'aria-label', $current_alt );
+		}
+
+		$processor->add_class( 'wp-block-cover__image-background' );
+		$processor->add_class( 'wp-image-' . $current_thumbnail_id );
+		if ( $attributes['hasParallax'] ) {
+			$processor->add_class( 'has-parallax' );
+		}
+		if ( $attributes['isRepeated'] ) {
+			$processor->add_class( 'is-repeated' );
+		}
+
+		$styles  = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';';
+		$styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+		$processor->set_attribute( 'style', $styles );
+
+		$image = $processor->get_updated_html();
+	}
 
-		$processor->set_attribute( 'style', $merged_styles );
-		$content = $processor->get_updated_html();
+	/*
+	 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+	 * and removes eventual whitespace characters between the two (typically introduced at template level)
+	 */
+	$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+	if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+		$offset  = $matches[0][1];
+		$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
 	}
 
 	return $content;

package/src/cover/style.scss

@@ -95,8 +95,8 @@
 	}
 
 	.wp-block-cover__inner-container {
-		position: relative;
 		width: 100%;
+		z-index: z-index(".wp-block-cover__inner-container");
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */

package/src/cover/test/edit.js

@@ -190,7 +190,7 @@ describe( 'Cover block', () => {
 			test( 'does not display media settings panel if url is not set', async () => {
 				await setup();
 				expect(
-					screen.queryByRole( 'button', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -202,7 +202,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'button', {
+					screen.getByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).toBeInTheDocument();

package/src/editor.scss

@@ -55,7 +55,6 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
-@import "./post-content/editor.scss";
 @import "./editor-elements.scss";
 
 :root .editor-styles-wrapper {

package/src/embed/edit.js

@@ -30,6 +30,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 import { getAuthority } from '@wordpress/url';
+import { Caption } from '../utils/caption';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -261,7 +262,15 @@ const EmbedEdit = ( props ) => {
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>
-			<View { ...blockProps }>
+			<figure
+				{ ...blockProps }
+				className={ clsx( blockProps.className, className, {
+					[ `is-type-${ type }` ]: type,
+					[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+					[ `wp-block-embed-${ providerNameSlug }` ]:
+						providerNameSlug,
+				} ) }
+			>
 				<EmbedPreview
 					preview={ preview }
 					previewable={ previewable }
@@ -279,7 +288,15 @@ const EmbedEdit = ( props ) => {
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>
-			</View>
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
+			</figure>
 		</>
 	);
 };

package/src/embed/embed-preview.js

@@ -21,7 +21,6 @@ import { getAuthority } from '@wordpress/url';
  * Internal dependencies
  */
 import WpEmbedPreview from './wp-embed-preview';
-import { Caption } from '../utils/caption';
 
 export default function EmbedPreview( {
 	preview,
@@ -32,9 +31,6 @@ export default function EmbedPreview( {
 	className,
 	icon,
 	label,
-	insertBlocksAfter,
-	attributes,
-	setAttributes,
 } ) {
 	const [ interactive, setInteractive ] = useState( false );
 
@@ -96,11 +92,7 @@ export default function EmbedPreview( {
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
 	return (
-		<figure
-			className={ clsx( className, 'wp-block-embed', {
-				'is-type-video': 'video' === type,
-			} ) }
-		>
+		<>
 			{ previewable ? (
 				embedWrapper
 			) : (
@@ -122,14 +114,6 @@ export default function EmbedPreview( {
 					</p>
 				</Placeholder>
 			) }
-			<Caption
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				label={ __( 'Embed caption text' ) }
-				showToolbarButton={ isSelected }
-			/>
-		</figure>
+		</>
 	);
 }

package/src/file/block.json

@@ -16,7 +16,8 @@
 			"role": "local"
 		},
 		"href": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"fileId": {
 			"type": "string",
@@ -27,13 +28,15 @@
 		"fileName": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a:not([download])"
+			"selector": "a:not([download])",
+			"role": "content"
 		},
 		"textLinkHref": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a:not([download])",
-			"attribute": "href"
+			"attribute": "href",
+			"role": "content"
 		},
 		"textLinkTarget": {
 			"type": "string",
@@ -48,7 +51,8 @@
 		"downloadButtonText": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a[download]"
+			"selector": "a[download]",
+			"role": "content"
 		},
 		"displayPreview": {
 			"type": "boolean"

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

@@ -34,6 +34,12 @@
 			"default": ""
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Next post",
+			"arrow": "arrow"
+		}
+	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,

package/src/post-navigation-link/variations.js

@@ -15,6 +15,12 @@ const variations = [
 		icon: next,
 		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Next post',
+				arrow: 'arrow',
+			},
+		},
 	},
 	{
 		name: 'post-previous',
@@ -25,6 +31,12 @@ const variations = [
 		icon: previous,
 		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Previous post',
+				arrow: 'arrow',
+			},
+		},
 	},
 ];
 

package/src/post-terms/index.php

@@ -24,11 +24,6 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
-	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
-		return '';
-	}
-
 	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
@@ -51,13 +46,19 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
 	}
 
-	return get_the_term_list(
+	$post_terms = get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
 		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		wp_kses_post( $suffix )
 	);
+
+	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
+		return '';
+	}
+
+	return $post_terms;
 }
 
 /**

package/src/post-time-to-read/index.js

@@ -12,6 +12,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/query/block.json

@@ -5,6 +5,7 @@
 	"title": "Query Loop",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.",
+	"keywords": [ "posts", "list", "blog", "blogs", "custom post types" ],
 	"textdomain": "default",
 	"attributes": {
 		"queryId": {

package/src/query/edit/inspector-controls/index.js

@@ -62,7 +62,7 @@ export default function QueryInspectorControls( props ) {
 		format,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
-	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
+	const showSticky = postType === 'post';
 	const {
 		postTypesTaxonomiesMap,
 		postTypesSelectOptions,
@@ -70,9 +70,6 @@ export default function QueryInspectorControls( props ) {
 	} = usePostTypes();
 	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
-	useEffect( () => {
-		setShowSticky( postType === 'post' );
-	}, [ postType ] );
 	const onPostTypeChange = ( newValue ) => {
 		const updateQuery = { postType: newValue };
 		// We need to dynamically update the `taxQuery` property,
@@ -208,7 +205,7 @@ export default function QueryInspectorControls( props ) {
 							label={ __( 'Query type' ) }
 							isBlock
 							onChange={ ( value ) => {
-								setQuery( { inherit: !! value } );
+								setQuery( { inherit: value === 'default' } );
 							} }
 							help={
 								inherit
@@ -219,14 +216,14 @@ export default function QueryInspectorControls( props ) {
 											'Display a list of posts or custom post types based on specific criteria.'
 									  )
 							}
-							value={ !! inherit }
+							value={ !! inherit ? 'default' : 'custom' }
 						>
 							<ToggleGroupControlOption
-								value
+								value="default"
 								label={ __( 'Default' ) }
 							/>
 							<ToggleGroupControlOption
-								value={ false }
+								value="custom"
 								label={ __( 'Custom' ) }
 							/>
 						</ToggleGroupControl>
@@ -318,7 +315,7 @@ export default function QueryInspectorControls( props ) {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Items' ) }
+						label={ __( 'Items per page' ) }
 						hasValue={ () => perPage > 0 }
 					>
 						<PerPageControl
@@ -338,7 +335,7 @@ export default function QueryInspectorControls( props ) {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						label={ __( 'Max Pages to Show' ) }
+						label={ __( 'Max pages to show' ) }
 						hasValue={ () => pages > 0 }
 						onDeselect={ () => setQuery( { pages: 0 } ) }
 					>

package/src/query/edit/inspector-controls/pages-control.js

@@ -8,7 +8,7 @@ export const PagesControl = ( { pages, onChange } ) => {
 	return (
 		<NumberControl
 			__next40pxDefaultSize
-			label={ __( 'Max pages' ) }
+			label={ __( 'Max pages to show' ) }
 			value={ pages }
 			min={ 0 }
 			onChange={ ( newPages ) => {

package/src/query/edit/inspector-controls/per-page-control.js

@@ -12,7 +12,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
 		<RangeControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
-			label={ __( 'Posts per page' ) }
+			label={ __( 'Items per page' ) }
 			min={ MIN_POSTS_PER_PAGE }
 			max={ MAX_POSTS_PER_PAGE }
 			onChange={ ( newPerPage ) => {