@wordpress/block-library 9.16.0 → 9.18.0

package/src/post-content/index.php

@@ -46,33 +46,10 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		$content .= wp_link_pages( array( 'echo' => 0 ) );
 	}
 
-	$ignored_hooked_blocks = get_post_meta( $post_id, '_wp_ignored_hooked_blocks', true );
-	if ( ! empty( $ignored_hooked_blocks ) ) {
-		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-		$attributes['metadata'] = array(
-			'ignoredHookedBlocks' => $ignored_hooked_blocks,
-		);
-	}
-
-	// Wrap in Post Content block so the Block Hooks algorithm can insert blocks
-	// that are hooked as first or last child of `core/post-content`.
-	$content = get_comment_delimited_block_content(
-		'core/post-content',
-		$attributes,
-		$content
-	);
-
-	// We need to remove the `core/post-content` block wrapper after the Block Hooks algorithm,
-	// but before `do_blocks` runs, as it would otherwise attempt to render the same block again --
-	// thus recursing infinitely.
-	add_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );
 
-	remove_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	if ( empty( $content ) ) {
 		return '';
 	}

package/src/post-date/edit.js

@@ -179,9 +179,7 @@ export default function PostDateEdit( {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						hasValue={ () =>
-							format !== undefined && format !== siteFormat
-						}
+						hasValue={ () => !! format }
 						label={ __( 'Date Format' ) }
 						onDeselect={ () =>
 							setAttributes( { format: undefined } )

package/src/post-featured-image/dimension-controls.js

@@ -10,19 +10,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import {
-	useSettings,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { ResolutionTool } = unlock( blockEditorPrivateApis );
+import { useSettings } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -45,7 +33,6 @@ const SCALE_OPTIONS = (
 );
 
 const DEFAULT_SCALE = 'cover';
-const DEFAULT_SIZE = 'full';
 
 const scaleHelp = {
 	cover: __(
@@ -61,9 +48,8 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { aspectRatio, width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale },
 	setAttributes,
-	media,
 } ) => {
 	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
 		useSettings(
@@ -75,18 +61,6 @@ const DimensionControls = ( {
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
 
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
@@ -230,21 +204,6 @@ const DimensionControls = ( {
 					</ToggleGroupControl>
 				</ToolsPanelItem>
 			) }
-			{ !! imageSizeOptions.length && (
-				<ResolutionTool
-					panelId={ clientId }
-					value={ sizeSlug }
-					defaultValue={ DEFAULT_SIZE }
-					options={ imageSizeOptions }
-					onChange={ ( nextSizeSlug ) =>
-						setAttributes( { sizeSlug: nextSizeSlug } )
-					}
-					isShownByDefault={ false }
-					resetAllFilter={ () => ( {
-						sizeSlug: DEFAULT_SIZE,
-					} ) }
-				/>
-			) }
 		</>
 	);
 };

package/src/post-featured-image/edit.js

@@ -27,6 +27,8 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -40,20 +42,40 @@ import DimensionControls from './dimension-controls';
 import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
+const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+function FeaturedImageResolutionTool( { image, value, onChange } ) {
+	const { imageSizes } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			imageSizes: getSettings().imageSizes,
+		};
+	}, [] );
+
+	if ( ! imageSizes?.length ) {
+		return null;
+	}
+
+	const imageSizeOptions = imageSizes
+		.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
-function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
-		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+		<ResolutionTool
+			value={ value }
+			defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+			options={ imageSizeOptions }
+			onChange={ onChange }
+		/>
 	);
 }
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
-};
-
 export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
@@ -130,7 +152,9 @@ export default function PostFeaturedImageEdit( {
 		[ featuredImage, postTypeSlug, postId ]
 	);
 
-	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+	const mediaUrl =
+		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		media?.source_url;
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
@@ -296,6 +320,13 @@ export default function PostFeaturedImageEdit( {
 							/>
 						</ToolsPanelItem>
 					) }
+					<FeaturedImageResolutionTool
+						image={ media }
+						value={ sizeSlug }
+						onChange={ ( nextSizeSlug ) =>
+							setAttributes( { sizeSlug: nextSizeSlug } )
+						}
+					/>
 				</ToolsPanel>
 			</InspectorControls>
 		</>
@@ -318,11 +349,7 @@ export default function PostFeaturedImageEdit( {
 				{ controls }
 				<div { ...blockProps }>
 					{ !! isLink ? (
-						<a
-							href={ postPermalink }
-							target={ linkTarget }
-							{ ...disabledClickProps }
-						>
+						<a href={ postPermalink } target={ linkTarget }>
 							{ placeholder() }
 						</a>
 					) : (
@@ -430,11 +457,7 @@ export default function PostFeaturedImageEdit( {
 			<figure { ...blockProps }>
 				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
 				{ !! isLink ? (
-					<a
-						href={ postPermalink }
-						target={ linkTarget }
-						{ ...disabledClickProps }
-					>
+					<a href={ postPermalink } target={ linkTarget }>
 						{ image }
 					</a>
 				) : (

package/src/post-featured-image/editor.scss

@@ -100,9 +100,9 @@
 
 	// When the Post Featured Image block is linked,
 	// it's wrapped with a disabled <a /> tag.
-	// Restore cursor style so it doesn't appear 'clickable'.
+	// Ensure that the link is not clickable.
 	> a {
-		cursor: default;
+		pointer-events: none;
 	}
 
 	// When the Post Featured Image block is linked,

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

@@ -8,7 +8,7 @@ const variations = [
 	{
 		isDefault: true,
 		name: 'post-next',
-		title: __( 'Next post' ),
+		title: __( 'Next Post' ),
 		description: __(
 			'Displays the post link that follows the current post.'
 		),
@@ -24,7 +24,7 @@ const variations = [
 	},
 	{
 		name: 'post-previous',
-		title: __( 'Previous post' ),
+		title: __( 'Previous Post' ),
 		description: __(
 			'Displays the post link that precedes the current post.'
 		),

package/src/post-template/edit.js

@@ -177,18 +177,27 @@ export default function PostTemplateEdit( {
 				query.format = format;
 			}
 
-			// If sticky is not set, it will return all posts in the results.
-			// If sticky is set to `only`, it will limit the results to sticky posts only.
-			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
-			if ( sticky ) {
+			/*
+			 * Handle cases where sticky is set to `exclude` or `only`.
+			 * Which works as a `post__in/post__not_in` query for sticky posts.
+			 */
+			if ( sticky && sticky !== 'ignore' ) {
 				query.sticky = sticky === 'only';
 			}
+
+			if ( sticky === 'ignore' ) {
+				// Remove any leftover sticky query parameter.
+				delete query.sticky;
+				query.ignore_sticky = true;
+			}
+
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.
+			let currentPostType = postType;
 			if ( inherit ) {
 				// Change the post-type if needed.
 				if ( templateSlug?.startsWith( 'archive-' ) ) {
 					query.postType = templateSlug.replace( 'archive-', '' );
-					postType = query.postType;
+					currentPostType = query.postType;
 				} else if ( templateCategory ) {
 					query.categories = templateCategory[ 0 ]?.id;
 				} else if ( templateTag ) {
@@ -205,7 +214,7 @@ export default function PostTemplateEdit( {
 			}
 			// When we preview Query Loop blocks we should prefer the current
 			// block's postType, which is passed through block context.
-			const usedPostType = previewPostType || postType;
+			const usedPostType = previewPostType || currentPostType;
 			return {
 				posts: getEntityRecords( 'postType', usedPostType, {
 					...query,

package/src/post-terms/edit.js

@@ -122,6 +122,7 @@ export default function PostTermsEdit( {
 								key={ postTerm.id }
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
+								rel="tag"
 							>
 								{ decodeEntities( postTerm.name ) }
 							</a>

package/src/post-time-to-read/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/post-time-to-read",
-	"title": "Time To Read",
+	"title": "Time to Read",
 	"category": "theme",
 	"description": "Show minutes required to finish reading the post.",
 	"textdomain": "default",

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

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 const stickyOptions = [
 	{ label: __( 'Include' ), value: '' },
+	{ label: __( 'Ignore' ), value: 'ignore' },
 	{ label: __( 'Exclude' ), value: 'exclude' },
 	{ label: __( 'Only' ), value: 'only' },
 ];

package/src/query/edit/query-content.js

@@ -23,6 +23,7 @@ import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
 import QueryToolbar from './query-toolbar';
+import { htmlElementMessages } from '../../utils/messages';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -132,17 +133,6 @@ export default function QueryContent( {
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
-	const htmlElementMessages = {
-		main: __(
-			'The <main> element should be used for the primary content of your document only.'
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-	};
 
 	return (
 		<>

package/src/query-no-results/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/query-no-results",
-	"title": "No results",
+	"title": "No Results",
 	"category": "theme",
 	"description": "Contains the block elements used to render content when no query results are found.",
 	"ancestor": [ "core/query" ],

package/src/query-pagination-numbers/edit.js

@@ -67,7 +67,7 @@ export default function QueryPaginationNumbersEdit( {
 				>
 					<ToolsPanelItem
 						label={ __( 'Number of links' ) }
-						hasValue={ () => midSize !== undefined }
+						hasValue={ () => midSize !== 2 }
 						onDeselect={ () => setAttributes( { midSize: 2 } ) }
 						isShownByDefault
 					>

package/src/query-title/edit.js

@@ -141,6 +141,7 @@ export default function QueryTitleEdit( {
 								showSearchTerm: true,
 							} )
 						}
+						dropdownMenuProps={ dropdownMenuProps }
 					>
 						<ToolsPanelItem
 							hasValue={ () => ! showSearchTerm }

package/src/read-more/edit.js

@@ -6,31 +6,55 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ReadMore( {
 	attributes: { content, linkTarget },
 	setAttributes,
 	insertBlocksAfter,
 } ) {
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => setAttributes( { linkTarget: '_self' } ) }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						onChange={ ( value ) =>
-							setAttributes( {
-								linkTarget: value ? '_blank' : '_self',
-							} )
+						isShownByDefault
+						hasValue={ () => linkTarget !== '_self' }
+						onDeselect={ () =>
+							setAttributes( { linkTarget: '_self' } )
 						}
-						checked={ linkTarget === '_blank' }
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<RichText
 				identifier="content"

package/src/rss/block.json

@@ -47,6 +47,20 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
+		},
 		"color": {
 			"background": true,
 			"text": true,

package/src/rss/edit.js

@@ -119,6 +119,19 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		},
 	];
 
+	/*
+	 * This function merges the existing attributes with additional style properties.
+	 * The `border` and `spacing` properties are set to `undefined` to ensure that
+	 * these styles are reset and not applied on the server side.
+	 */
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+			spacing: undefined,
+		},
+	};
 	return (
 		<>
 			<BlockControls>
@@ -190,7 +203,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<Disabled>
 					<ServerSideRender
 						block="core/rss"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>

package/src/rss/editor.scss

@@ -5,3 +5,10 @@
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
 	flex: 1 1 auto;
 }
+// Reset all styles when skipping block supports while server-side rendering.
+// This prevents issues such as duplicate padding, borders etc.
+.wp-block-rss .wp-block-rss {
+	all: inherit;
+	margin: 0;
+	padding: 0;
+}

package/src/rss/style.scss

@@ -1,11 +1,4 @@
 ul.wp-block-rss { // The ul is needed for specificity to override the reset styles in the editor.
-	list-style: none;
-	padding: 0;
-
-	// This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54
-	&.wp-block-rss {
-		box-sizing: border-box;
-	}
 
 	&.alignleft {
 		/*rtl:ignore*/
@@ -19,7 +12,6 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 		display: flex;
 		flex-wrap: wrap;
 		padding: 0;
-		list-style: none;
 
 		li {
 			margin: 0 1em 1em 0;
@@ -41,3 +33,9 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 	display: block;
 	font-size: 0.8125em;
 }
+.wp-block-rss {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+	list-style: none;
+	padding: 0;
+}