@wordpress/block-library 9.4.0 → 9.6.0

package/src/navigation/index.php

@@ -241,13 +241,11 @@ class WP_Navigation_Block_Renderer {
 			// it encounters whitespace. This code strips it.
 			$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
-			if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-				// Run Block Hooks algorithm to inject hooked blocks.
-				$markup         = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post );
-				$root_nav_block = parse_blocks( $markup )[0];
+			// Run Block Hooks algorithm to inject hooked blocks.
+			$markup         = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post );
+			$root_nav_block = parse_blocks( $markup )[0];
 
-				$blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks;
-			}
+			$blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks;
 
 			// TODO - this uses the full navigation block attributes for the
 			// context which could be refined.
@@ -1083,15 +1081,13 @@ function block_core_navigation_get_fallback_blocks() {
 		// In this case default to the (Page List) fallback.
 		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 
-		if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-			// Run Block Hooks algorithm to inject hooked blocks.
-			// We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks.
-			$markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post );
-			$blocks = parse_blocks( $markup );
+		// Run Block Hooks algorithm to inject hooked blocks.
+		// We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks.
+		$markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post );
+		$blocks = parse_blocks( $markup );
 
-			if ( isset( $blocks[0]['innerBlocks'] ) ) {
-				$fallback_blocks = $blocks[0]['innerBlocks'];
-			}
+		if ( isset( $blocks[0]['innerBlocks'] ) ) {
+			$fallback_blocks = $blocks[0]['innerBlocks'];
 		}
 	}
 
@@ -1621,26 +1617,15 @@ $rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ig
 /*
  * Do not add the `block_core_navigation_update_ignore_hooked_blocks_meta` filter in the following cases:
  * - If Core has added the `update_ignored_hooked_blocks_postmeta` filter already (WP >= 6.6);
- * - or if the `set_ignored_hooked_blocks_metadata` function is unavailable (which is required for the filter to work. It was introduced by WP 6.5 but is not present in Gutenberg's WP 6.5 compatibility layer);
  * - or if the `$rest_insert_wp_navigation_core_callback` filter has already been added.
  */
 if (
 	! has_filter( 'rest_pre_insert_wp_navigation', 'update_ignored_hooked_blocks_postmeta' ) &&
-	function_exists( 'set_ignored_hooked_blocks_metadata' ) &&
 	! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback )
 ) {
 	add_filter( 'rest_pre_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta' );
 }
 
-/*
- * Previous versions of Gutenberg were attaching the block_core_navigation_update_ignore_hooked_blocks_meta
- * function to the `rest_insert_wp_navigation` _action_ (rather than the `rest_pre_insert_wp_navigation` _filter_).
- * To avoid collisions, we need to remove the filter from that action if it's present.
- */
-if ( has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
-	remove_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback );
-}
-
 /**
  * Hooks into the REST API response for the core/navigation block and adds the first and last inner blocks.
  *
@@ -1678,12 +1663,10 @@ $rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_h
 /*
  * Do not add the `block_core_navigation_insert_hooked_blocks_into_rest_response` filter in the following cases:
  * - If Core has added the `insert_hooked_blocks_into_rest_response` filter already (WP >= 6.6);
- * - or if the `set_ignored_hooked_blocks_metadata` function is unavailable (which is required for the filter to work. It was introduced by WP 6.5 but is not present in Gutenberg's WP 6.5 compatibility layer);
  * - or if the `$rest_prepare_wp_navigation_core_callback` filter has already been added.
  */
 if (
 	! has_filter( 'rest_prepare_wp_navigation', 'insert_hooked_blocks_into_rest_response' ) &&
-	function_exists( 'set_ignored_hooked_blocks_metadata' ) &&
 	! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback )
 ) {
 	add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );

package/src/navigation-link/editor.scss

@@ -87,9 +87,6 @@
 		$stop2: 64%;
 
 		--wp-underline-color: var(--wp-admin-theme-color);
-		.is-dark-theme & {
-			--wp-underline-color: #{ $dark-theme-focus };
-		}
 
 		background-image:
 			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),

package/src/post-author/block.json

@@ -64,7 +64,20 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
+	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"
 }

package/src/post-author/edit.js

@@ -18,6 +18,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -100,72 +101,82 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ showAuthorControl &&
-						( ( showCombobox && (
-							<ComboboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								options={ authorOptions }
-								value={ authorId }
-								onChange={ handleSelect }
-								allowReset={ false }
-							/>
-						) ) || (
+					<VStack
+						spacing={ 4 }
+						className="wp-block-post-author__inspector-settings"
+					>
+						{ showAuthorControl &&
+							( ( showCombobox && (
+								<ComboboxControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									options={ authorOptions }
+									value={ authorId }
+									onChange={ handleSelect }
+									allowReset={ false }
+								/>
+							) ) || (
+								<SelectControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									value={ authorId }
+									options={ authorOptions }
+									onChange={ handleSelect }
+								/>
+							) ) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show avatar' ) }
+							checked={ showAvatar }
+							onChange={ () =>
+								setAttributes( { showAvatar: ! showAvatar } )
+							}
+						/>
+						{ showAvatar && (
 							<SelectControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								value={ authorId }
-								options={ authorOptions }
-								onChange={ handleSelect }
+								label={ __( 'Avatar size' ) }
+								value={ attributes.avatarSize }
+								options={ avatarSizes }
+								onChange={ ( size ) => {
+									setAttributes( {
+										avatarSize: Number( size ),
+									} );
+								} }
 							/>
-						) ) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show avatar' ) }
-						checked={ showAvatar }
-						onChange={ () =>
-							setAttributes( { showAvatar: ! showAvatar } )
-						}
-					/>
-					{ showAvatar && (
-						<SelectControl
+						) }
+						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Avatar size' ) }
-							value={ attributes.avatarSize }
-							options={ avatarSizes }
-							onChange={ ( size ) => {
-								setAttributes( {
-									avatarSize: Number( size ),
-								} );
-							} }
+							label={ __( 'Show bio' ) }
+							checked={ showBio }
+							onChange={ () =>
+								setAttributes( { showBio: ! showBio } )
+							}
 						/>
-					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show bio' ) }
-						checked={ showBio }
-						onChange={ () =>
-							setAttributes( { showBio: ! showBio } )
-						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link author name to author page' ) }
-						checked={ isLink }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					/>
-					{ isLink && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link author name to author page' ) }
+							checked={ isLink }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
 						/>
-					) }
+						{ isLink && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						) }
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 

package/src/post-author/editor.scss

@@ -0,0 +1,7 @@
+.wp-block-post-author__inspector-settings {
+	// Counteract the margin added by the block inspector.
+	.components-base-control,
+	.components-base-control:last-child {
+		margin-bottom: 0;
+	}
+}

package/src/post-author/style.scss

@@ -1,6 +1,7 @@
 .wp-block-post-author {
 	display: flex;
 	flex-wrap: wrap;
+	box-sizing: border-box;
 
 	&__byline {
 		width: 100%;

package/src/post-author-biography/block.json

@@ -43,6 +43,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-biography"
 }

package/src/post-author-biography/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-author-biography {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/post-author-name/block.json

@@ -53,6 +53,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-name"
 }

package/src/post-author-name/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-author-name {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/post-comment/edit.js

@@ -34,6 +34,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
@@ -42,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					/>
 
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
 							setAttributes( { commentId: commentIdInput } );

package/src/post-comments-form/block.json

@@ -37,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",

package/src/post-content/block.json

@@ -54,5 +54,6 @@
 			}
 		}
 	},
+	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
 }

package/src/post-content/style.scss

@@ -0,0 +1,5 @@
+.wp-block-post-content::after {
+	content: "";
+	display: table;
+	clear: both;
+}

package/src/post-date/block.json

@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	}
 }

package/src/post-excerpt/block.json

@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",

package/src/post-excerpt/edit.js

@@ -231,6 +231,7 @@ export default function PostExcerptEditor( {
 						}
 					/>
 					<RangeControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Max number of words' ) }
 						value={ excerptLength }

package/src/post-excerpt/style.scss

@@ -1,5 +1,8 @@
 // Lowest specificity on wrapper margins to avoid overriding layout styles.
 :where(.wp-block-post-excerpt) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

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

@@ -134,6 +134,8 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<SelectControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
@@ -203,6 +205,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ scaleLabel }
 						value={ scale }
@@ -232,6 +235,8 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }

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

@@ -230,6 +230,7 @@ export default function PostFeaturedImageEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }

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

@@ -49,8 +49,11 @@ export default function PostNavigationLinkEdit( {
 	const displayArrow = arrowMap[ arrow ];
 
 	if ( showTitle ) {
-		/* translators: Label before for next and previous post. There is a space after the colon. */
-		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
+		placeholder = isNext
+			? /* translators: Label before for next and previous post. There is a space after the colon. */
+			  __( 'Next: ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
+			: /* translators: Label before for next and previous post. There is a space after the colon. */
+			  __( 'Previous: ' ); // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
 	}
 
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
@@ -120,6 +123,7 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
@@ -157,6 +161,8 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

package/src/post-terms/block.json

@@ -60,6 +60,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

package/src/post-terms/edit.js

@@ -83,6 +83,7 @@ export default function PostTermsEdit( {
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }

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

@@ -45,6 +45,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	}
 }

package/src/post-title/block.json

@@ -15,6 +15,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false
@@ -63,6 +66,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"

package/src/post-title/edit.js

@@ -22,7 +22,7 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
-	attributes: { level, textAlign, isLink, rel, linkTarget },
+	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
@@ -73,7 +73,7 @@ export default function PostTitleEdit( {
 		titleElement = userCanEdit ? (
 			<PlainText
 				tagName={ TagName }
-				placeholder={ __( 'No Title' ) }
+				placeholder={ __( 'No title' ) }
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
@@ -96,7 +96,7 @@ export default function PostTitleEdit( {
 					href={ link }
 					target={ linkTarget }
 					rel={ rel }
-					placeholder={ ! rawTitle.length ? __( 'No Title' ) : null }
+					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
@@ -125,6 +125,7 @@ export default function PostTitleEdit( {
 					<BlockControls group="block">
 						<HeadingLevelDropdown
 							value={ level }
+							options={ levelOptions }
 							onChange={ ( newLevel ) =>
 								setAttributes( { level: newLevel } )
 							}
@@ -161,6 +162,7 @@ export default function PostTitleEdit( {
 										checked={ linkTarget === '_blank' }
 									/>
 									<TextControl
+										__next40pxDefaultSize
 										__nextHasNoMarginBottom
 										label={ __( 'Link rel' ) }
 										value={ rel }

package/src/preformatted/block.json

@@ -43,6 +43,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-preformatted"

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Force page reload' ) }
 				help={ help }
 				checked={