@wordpress/block-library 7.14.2 → 7.14.4

package/build-style/style-rtl.css

@@ -277,6 +277,9 @@
   margin-left: 2em;
 }
 
+.wp-block-code {
+  box-sizing: border-box;
+}
 .wp-block-code code {
   display: block;
   font-family: inherit;

package/build-style/style.css

@@ -280,6 +280,9 @@
   margin-left: 2em;
 }
 
+.wp-block-code {
+  box-sizing: border-box;
+}
 .wp-block-code code {
   display: block;
   font-family: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.14.2",
+	"version": "7.14.4",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,12 +35,12 @@
 		"@wordpress/api-fetch": "^6.14.1",
 		"@wordpress/autop": "^3.17.1",
 		"@wordpress/blob": "^3.17.1",
-		"@wordpress/block-editor": "^10.0.2",
-		"@wordpress/blocks": "^11.16.2",
-		"@wordpress/components": "^21.0.2",
+		"@wordpress/block-editor": "^10.0.4",
+		"@wordpress/blocks": "^11.16.4",
+		"@wordpress/components": "^21.0.4",
 		"@wordpress/compose": "^5.15.2",
-		"@wordpress/core-data": "^5.0.2",
-		"@wordpress/data": "^7.1.2",
+		"@wordpress/core-data": "^5.0.4",
+		"@wordpress/data": "^7.1.3",
 		"@wordpress/date": "^4.17.1",
 		"@wordpress/deprecated": "^3.17.1",
 		"@wordpress/dom": "^3.17.2",
@@ -50,13 +50,13 @@
 		"@wordpress/i18n": "^4.17.1",
 		"@wordpress/icons": "^9.8.1",
 		"@wordpress/keycodes": "^3.17.1",
-		"@wordpress/notices": "^3.17.2",
+		"@wordpress/notices": "^3.17.3",
 		"@wordpress/primitives": "^3.15.1",
-		"@wordpress/reusable-blocks": "^3.15.2",
-		"@wordpress/rich-text": "^5.15.2",
-		"@wordpress/server-side-render": "^3.15.2",
+		"@wordpress/reusable-blocks": "^3.15.4",
+		"@wordpress/rich-text": "^5.15.3",
+		"@wordpress/server-side-render": "^3.15.4",
 		"@wordpress/url": "^3.18.1",
-		"@wordpress/viewport": "^4.15.2",
+		"@wordpress/viewport": "^4.15.3",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6021282457317c7e12dcc3a3f02c9ac28e16a30"
+	"gitHead": "491b4b522dffb4d25aca066ec55500f456ac4aa3"
 }

package/src/classic.scss

@@ -0,0 +1,15 @@
+// These rules are needed for backwards compatibility.
+.wp-block-button__link {
+	color: $white;
+	background-color: #32373c;
+	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
+
+	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	box-shadow: none;
+	text-decoration: none;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+
+	font-size: 1.125em;
+}

package/src/code/style.scss

@@ -1,8 +1,13 @@
-// Provide a minimum of overflow handling and ensure the code markup inherits
-// the font-family set on pre.
-.wp-block-code code {
-	display: block;
-	font-family: inherit;
-	overflow-wrap: break-word;
-	white-space: pre-wrap;
+.wp-block-code {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	// Provide a minimum of overflow handling and ensure the code markup inherits
+	// the font-family set on pre.
+	code {
+		display: block;
+		font-family: inherit;
+		overflow-wrap: break-word;
+		white-space: pre-wrap;
+	}
 }

package/src/comment-template/index.php

@@ -16,6 +16,8 @@
  */
 function block_core_comment_template_render_comments( $comments, $block ) {
 	global $comment_depth;
+	$thread_comments       = get_option( 'thread_comments' );
+	$thread_comments_depth = get_option( 'thread_comments_depth' );
 
 	if ( empty( $comment_depth ) ) {
 		$comment_depth = 1;
@@ -46,14 +48,22 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 		// If the comment has children, recurse to create the HTML for the nested
 		// comments.
-		if ( ! empty( $children ) ) {
-			$comment_depth += 1;
-			$inner_content  = block_core_comment_template_render_comments(
-				$children,
-				$block
-			);
-			$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
-			$comment_depth -= 1;
+		if ( ! empty( $children ) && ! empty( $thread_comments ) ) {
+			if ( $comment_depth < $thread_comments_depth ) {
+				$comment_depth += 1;
+				$inner_content  = block_core_comment_template_render_comments(
+					$children,
+					$block
+				);
+				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
+				$comment_depth -= 1;
+			} else {
+				$inner_content  = block_core_comment_template_render_comments(
+					$children,
+					$block
+				);
+				$block_content .= sprintf( $inner_content );
+			}
 		}
 
 		$content .= sprintf( '<li id="comment-%1$s" %2$s>%3$s</li>', $comment->comment_ID, $comment_classes, $block_content );

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

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-next",
-	"title": "Next Page",
+	"title": "Comments Next Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comment's page link.",

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

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-numbers",
-	"title": "Page Numbers",
+	"title": "Comments Page Numbers",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",

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

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-previous",
-	"title": "Previous Page",
+	"title": "Comments Previous Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the previous comment's page link.",

package/src/gallery/deprecated.js

@@ -659,8 +659,8 @@ const v3 = {
 					attribute: 'data-link',
 				},
 				caption: {
-					type: 'array',
-					source: 'children',
+					type: 'string',
+					source: 'html',
 					selector: 'figcaption',
 				},
 			},
@@ -779,8 +779,8 @@ const v2 = {
 					attribute: 'data-link',
 				},
 				caption: {
-					type: 'array',
-					source: 'children',
+					type: 'string',
+					source: 'html',
 					selector: 'figcaption',
 				},
 			},

package/src/navigation/edit/index.js

@@ -282,16 +282,18 @@ function Navigation( {
 		hasResolvedNavigationMenus &&
 		! hasUncontrolledInnerBlocks;
 
-	if ( isPlaceholder && ! ref ) {
-		/**
-		 *  this fallback only displays (both in editor and on front)
-		 *  the list of pages block if no menu is available as a fallback.
-		 *  We don't want the fallback to request a save,
-		 *  nor to be undoable, hence we mark it non persistent.
-		 */
-		__unstableMarkNextChangeAsNotPersistent();
-		replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-	}
+	useEffect( () => {
+		if ( isPlaceholder && ! ref ) {
+			/**
+			 *  this fallback only displays (both in editor and on front)
+			 *  the list of pages block if no menu is available as a fallback.
+			 *  We don't want the fallback to request a save,
+			 *  nor to be undoable, hence we mark it non persistent.
+			 */
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+		}
+	}, [ clientId, isPlaceholder, ref ] );
 
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;

package/src/navigation/menu-items-to-blocks.js

@@ -29,9 +29,10 @@ export default function menuItemsToBlocks( menuItems ) {
  * A recursive function that maps menu item nodes to blocks.
  *
  * @param {WPNavMenuItem[]} menuItems An array of WPNavMenuItem items.
+ * @param {number}          level     An integer representing the nesting level.
  * @return {Object} Object containing innerBlocks and mapping.
  */
-function mapMenuItemsToBlocks( menuItems ) {
+function mapMenuItemsToBlocks( menuItems, level = 0 ) {
 	let mapping = {};
 
 	// The menuItem should be in menu_order sort order.
@@ -52,14 +53,22 @@ function mapMenuItemsToBlocks( menuItems ) {
 			return block;
 		}
 
-		const attributes = menuItemToBlockAttributes( menuItem );
+		const blockType = menuItem.children?.length
+			? 'core/navigation-submenu'
+			: 'core/navigation-link';
+
+		const attributes = menuItemToBlockAttributes(
+			menuItem,
+			blockType,
+			level
+		);
 
 		// If there are children recurse to build those nested blocks.
 		const {
 			innerBlocks: nestedBlocks = [], // alias to avoid shadowing
 			mapping: nestedMapping = {}, // alias to avoid shadowing
 		} = menuItem.children?.length
-			? mapMenuItemsToBlocks( menuItem.children )
+			? mapMenuItemsToBlocks( menuItem.children, level + 1 )
 			: {};
 
 		// Update parent mapping with nested mapping.
@@ -68,10 +77,6 @@ function mapMenuItemsToBlocks( menuItems ) {
 			...nestedMapping,
 		};
 
-		const blockType = menuItem.children?.length
-			? 'core/navigation-submenu'
-			: 'core/navigation-link';
-
 		// Create block with nested "innerBlocks".
 		const block = createBlock( blockType, attributes, nestedBlocks );
 
@@ -111,23 +116,29 @@ function mapMenuItemsToBlocks( menuItems ) {
 /**
  * Convert block attributes to menu item.
  *
- * @param {WPNavMenuItem} menuItem the menu item to be converted to block attributes.
+ * @param {WPNavMenuItem} menuItem  the menu item to be converted to block attributes.
+ * @param {string}        blockType The block type.
+ * @param {number}        level     An integer representing the nesting level.
  * @return {Object} the block attributes converted from the WPNavMenuItem item.
  */
-function menuItemToBlockAttributes( {
-	title: menuItemTitleField,
-	xfn,
-	classes,
-	// eslint-disable-next-line camelcase
-	attr_title,
-	object,
-	// eslint-disable-next-line camelcase
-	object_id,
-	description,
-	url,
-	type: menuItemTypeField,
-	target,
-} ) {
+function menuItemToBlockAttributes(
+	{
+		title: menuItemTitleField,
+		xfn,
+		classes,
+		// eslint-disable-next-line camelcase
+		attr_title,
+		object,
+		// eslint-disable-next-line camelcase
+		object_id,
+		description,
+		url,
+		type: menuItemTypeField,
+		target,
+	},
+	blockType,
+	level
+) {
 	// For historical reasons, the `core/navigation-link` variation type is `tag`
 	// whereas WP Core expects `post_tag` as the `object` type.
 	// To avoid writing a block migration we perform a conversion here.
@@ -166,6 +177,12 @@ function menuItemToBlockAttributes( {
 		...( target === '_blank' && {
 			opensInNewTab: true,
 		} ),
+		...( blockType === 'core/navigation-submenu' && {
+			isTopLevelItem: level === 0,
+		} ),
+		...( blockType === 'core/navigation-link' && {
+			isTopLevelLink: level === 0,
+		} ),
 	};
 }
 

package/src/navigation/test/menu-items-to-blocks.js

@@ -189,12 +189,14 @@ describe( 'converting menu items to blocks', () => {
 				name: 'core/navigation-submenu',
 				attributes: expect.objectContaining( {
 					label: 'Top Level',
+					isTopLevelItem: true,
 				} ),
 				innerBlocks: [
 					expect.objectContaining( {
 						name: 'core/navigation-link',
 						attributes: expect.objectContaining( {
 							label: 'Child 1',
+							isTopLevelLink: false,
 						} ),
 						innerBlocks: [],
 					} ),
@@ -202,18 +204,21 @@ describe( 'converting menu items to blocks', () => {
 						name: 'core/navigation-submenu',
 						attributes: expect.objectContaining( {
 							label: 'Child 2',
+							isTopLevelItem: false,
 						} ),
 						innerBlocks: [
 							expect.objectContaining( {
 								name: 'core/navigation-submenu',
 								attributes: expect.objectContaining( {
 									label: 'Sub Child',
+									isTopLevelItem: false,
 								} ),
 								innerBlocks: [
 									expect.objectContaining( {
 										name: 'core/navigation-link',
 										attributes: expect.objectContaining( {
 											label: 'Sub Sub Child',
+											isTopLevelLink: false,
 										} ),
 										innerBlocks: [],
 									} ),
@@ -227,6 +232,7 @@ describe( 'converting menu items to blocks', () => {
 				name: 'core/navigation-link',
 				attributes: expect.objectContaining( {
 					label: 'Top Level 2',
+					isTopLevelLink: true,
 				} ),
 				innerBlocks: [],
 			} ),

package/src/navigation-submenu/index.php

@@ -183,7 +183,16 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	if ( ! $open_on_click ) {
 		$item_url = isset( $attributes['url'] ) ? $attributes['url'] : '';
 		// Start appending HTML attributes to anchor tag.
-		$html .= '<a class="wp-block-navigation-item__content" href="' . esc_url( $item_url ) . '"';
+		$html .= '<a class="wp-block-navigation-item__content"';
+
+		// The href attribute on a and area elements is not required;
+		// when those elements do not have href attributes they do not create hyperlinks.
+		// But also The href attribute must have a value that is a valid URL potentially
+		// surrounded by spaces.
+		// see: https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements.
+		if ( ! empty( $item_url ) ) {
+			$html .= ' href="' . esc_url( $item_url ) . '"';
+		}
 
 		if ( $is_active ) {
 			$html .= ' aria-current="page"';

package/src/post-content/edit.js

@@ -46,7 +46,9 @@ function EditableContent( { layout, context = {} } ) {
 		return getSettings()?.supportsLayout;
 	}, [] );
 	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,

package/src/post-featured-image/block.json

@@ -62,7 +62,7 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,

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

@@ -6,87 +6,94 @@
 		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
 	}
 
-	&.wp-block-post-featured-image {
-		// Style the placeholder.
-		.wp-block-post-featured-image__placeholder,
-		.components-placeholder {
-			justify-content: center;
-			align-items: center;
-			padding: 0;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		padding: 0;
 
-			// Hide the upload button, as it's also available in the media library.
-			.components-form-file-upload {
-				display: none;
-			}
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
 
-			// Style the upload button.
-			.components-button.components-button {
-				padding: 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: $grid-unit-60;
-				height: $grid-unit-60;
-				border-radius: 50%;
-				position: relative;
-				background: var(--wp-admin-theme-color);
-				border-color: var(--wp-admin-theme-color);
-				border-style: solid;
-				color: $white;
+		// Style the upload button.
+		.components-button {
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
+			color: $white;
 
-				> svg {
-					color: inherit;
-				}
+			> svg {
+				color: inherit;
 			}
+		}
 
-			// Show default placeholder height when not resized.
-			min-height: 200px;
-
-			// The following override the default placeholder styles that remove
-			// its border so that a user selection for border color or width displays
-			// a visual border.
-			&:where(.has-border-color) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-color"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-color"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-color"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-color"]) {
-				border-left-style: solid;
-			}
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
 
-			&:where([style*="border-width"]) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-width"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-width"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-width"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-width"]) {
-				border-left-style: solid;
-			}
+	// The following override the default placeholder styles that remove
+	// its border so that a user selection for border color or width displays
+	// a visual border. They also override the `img { border: none; }` applied
+	// by core.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder,
+	img {
+		// The following is required to overcome WP Core applying styles that clear
+		// img borders with a higher specificity than those added by the border
+		// block support to provide a default border-style of solid when a border
+		// color or width has been set.
+		&:where(.has-border-color) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-color"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-color"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-color"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-color"]) {
+			border-left-style: solid;
 		}
 
-		// Provide a minimum size for the placeholder when resized.
-		// Note, this should be as small as we can afford it, and exists only
-		// to ensure there's room for the upload button.
-		&[style*="height"] .components-placeholder {
-			min-height: $grid-unit-60;
-			min-width: $grid-unit-60;
-			height: 100%;
-			width: 100%;
+		&:where([style*="border-width"]) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-width"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-width"]) {
+			border-right-style: solid;
 		}
+		&:where([style*="border-bottom-width"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-width"]) {
+			border-left-style: solid;
+		}
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 	}
 }