@wordpress/block-library 6.0.13 → 6.0.14

package/build-style/editor-rtl.css

@@ -1005,6 +1005,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-left: 1em;
   margin-right: 0;
@@ -1219,6 +1235,15 @@ figure.wp-block-image:not(.wp-block) {
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */

package/build-style/editor.css

@@ -1010,6 +1010,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-right: 1em;
   margin-left: 0;
@@ -1224,6 +1240,15 @@ figure.wp-block-image:not(.wp-block) {
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */

package/build-style/image/editor-rtl.css

@@ -137,6 +137,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-left: 1em;
   margin-right: 0;

package/build-style/image/editor.css

@@ -137,6 +137,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-right: 1em;
   margin-left: 0;

package/build-style/navigation/editor-rtl.css

@@ -137,6 +137,15 @@
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */

package/build-style/navigation/editor.css

@@ -137,6 +137,15 @@
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */

package/build-style/post-comments/style-rtl.css

@@ -125,7 +125,9 @@
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }

package/build-style/post-comments/style.css

@@ -125,7 +125,9 @@
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }

package/build-style/post-comments-form/style-rtl.css

@@ -110,12 +110,12 @@
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/build-style/post-comments-form/style.css

@@ -110,12 +110,12 @@
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/build-style/style-rtl.css

@@ -2055,7 +2055,9 @@ p.has-background {
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }
@@ -2120,12 +2122,12 @@ p.has-background {
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/build-style/style.css

@@ -2077,7 +2077,9 @@ p.has-background {
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }
@@ -2142,12 +2144,12 @@ p.has-background {
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.13",
+	"version": "6.0.14",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,9 +37,9 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.9",
+		"@wordpress/block-editor": "^8.0.10",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.3",
+		"@wordpress/components": "^19.1.4",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/core-data": "^4.0.8",
 		"@wordpress/data": "^6.1.4",
@@ -52,14 +52,14 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.11",
+		"@wordpress/interface": "^4.1.12",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/notices": "^3.2.7",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.15",
+		"@wordpress/reusable-blocks": "^3.0.16",
 		"@wordpress/rich-text": "^5.0.6",
-		"@wordpress/server-side-render": "^3.0.13",
+		"@wordpress/server-side-render": "^3.0.14",
 		"@wordpress/url": "^3.3.1",
 		"@wordpress/viewport": "^4.0.6",
 		"classnames": "^2.3.1",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f8c50499a12f926661103acfaeea6780d85b947b"
+	"gitHead": "3826b68f8c5b5026b318463af647f6fb19b534d2"
 }

package/src/gallery/index.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Server-side rendering of the `core/image` block.
+ * Server-side rendering of the `core/gallery` block.
  *
  * @package WordPress
  */
@@ -13,11 +13,10 @@
  * we add a custom `data-id` attribute before rendering the gallery
  * so that the Image Block can pick it up in its render_callback.
  *
- * @param  array $parsed_block A single parsed block object.
- *
- * @return array               The migrated block object.
+ * @param array $parsed_block The block being rendered.
+ * @return array The migrated block object.
  */
-function render_block_core_gallery_data( $parsed_block ) {
+function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 	if ( 'core/gallery' === $parsed_block['blockName'] ) {
 		foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
 			if ( 'core/image' === $inner_block['blockName'] ) {
@@ -31,14 +30,14 @@ function render_block_core_gallery_data( $parsed_block ) {
 	return $parsed_block;
 }
 
-add_filter( 'render_block_data', 'render_block_core_gallery_data' );
+add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
 /**
  * Registers the `core/gallery` block on server.
  * This render callback needs to be here
  * so that the gallery styles are loaded in block-based themes.
  */
-function gutenberg_register_block_core_gallery() {
+function register_block_core_gallery() {
 	register_block_type_from_metadata(
 		__DIR__ . '/gallery',
 		array(
@@ -49,4 +48,4 @@ function gutenberg_register_block_core_gallery() {
 	);
 }
 
-add_action( 'init', 'gutenberg_register_block_core_gallery', 20 );
+add_action( 'init', 'register_block_core_gallery', 20 );

package/src/image/editor.scss

@@ -70,6 +70,24 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+*:not([data-align]) {
+	> .wp-block-image {
+		display: grid;
+		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+		.components-placeholder {
+			grid-column: placeholder;
+		}
+		> div:not(.components-placeholder) {
+			grid-column: image;
+		}
+		> figcaption {
+			grid-column: image;
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
+
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

package/src/image/image.js

@@ -30,7 +30,7 @@ import {
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import { createBlock, switchToBlockType } from '@wordpress/blocks';
@@ -79,6 +79,7 @@ export default function Image( {
 	context,
 	clientId,
 } ) {
+	const imageRef = useRef();
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
 	const { allowResize = true } = context;
@@ -141,7 +142,10 @@ export default function Image( {
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
-	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
+	const [
+		{ loadedNaturalWidth, loadedNaturalHeight },
+		setLoadedNaturalSize,
+	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
@@ -179,6 +183,27 @@ export default function Image( {
 		}
 	}, [ url, prevUrl ] );
 
+	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
+	// width and height. This resolves an issue in Safari where the loaded natural
+	// witdth and height is otherwise lost when switching between alignments.
+	// See: https://github.com/WordPress/gutenberg/pull/37210.
+	const { naturalWidth, naturalHeight } = useMemo( () => {
+		return {
+			naturalWidth:
+				imageRef.current?.naturalWidth ||
+				loadedNaturalWidth ||
+				undefined,
+			naturalHeight:
+				imageRef.current?.naturalHeight ||
+				loadedNaturalHeight ||
+				undefined,
+		};
+	}, [
+		loadedNaturalWidth,
+		loadedNaturalHeight,
+		imageRef.current?.complete,
+	] );
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -411,13 +436,12 @@ export default function Image( {
 				alt={ defaultedAlt }
 				onError={ () => onImageError() }
 				onLoad={ ( event ) => {
-					setNaturalSize(
-						pick( event.target, [
-							'naturalWidth',
-							'naturalHeight',
-						] )
-					);
+					setLoadedNaturalSize( {
+						loadedNaturalWidth: event.target?.naturalWidth,
+						loadedNaturalHeight: event.target?.naturalHeight,
+					} );
 				} }
+				ref={ imageRef }
 			/>
 			{ temporaryURL && <Spinner /> }
 		</>

package/src/image/index.php

@@ -11,7 +11,7 @@
  *
  * @param  array $attributes The block attributes.
  * @param  array $content    The block content.
- * @return string            Returns the block content with the data-id attribute added.
+ * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
 	if ( isset( $attributes['data-id'] ) ) {

package/src/navigation/edit/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import noop from 'lodash';
 
 /**
  * WordPress dependencies
@@ -109,12 +110,19 @@ function Navigation( {
 		layout: { justifyContent, orientation = 'horizontal' } = {},
 	} = attributes;
 
-	const [ areaMenu, setAreaMenu ] = useEntityProp(
-		'root',
-		'navigationArea',
-		'navigation',
-		navigationArea
-	);
+	let areaMenu,
+		setAreaMenu = noop;
+	// Navigation areas are deprecated and on their way out. Let's not perform
+	// the request unless we're in an environment where the endpoint exists.
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		[ areaMenu, setAreaMenu ] = useEntityProp(
+			'root',
+			'navigationArea',
+			'navigation',
+			navigationArea
+		);
+	}
 
 	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
 

package/src/navigation/edit/navigation-menu-selector.js

@@ -5,6 +5,7 @@ import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
 import { useEntityId } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -45,6 +46,13 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 				<MenuItem onClick={ onCreateNew }>
 					{ __( 'Create new menu' ) }
 				</MenuItem>
+				<MenuItem
+					href={ addQueryArgs( 'edit.php', {
+						post_type: 'wp_navigation',
+					} ) }
+				>
+					{ __( 'Manage menus' ) }
+				</MenuItem>
 			</MenuGroup>
 		</>
 	);

package/src/navigation/editor.scss

@@ -96,6 +96,18 @@
 	}
 }
 
+// Show even when a child is selected. This is an edgecase just for navigation submenus.
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+	display: block;
+	position: static;
+}
+
+// Hide when hovering.
+.wp-block-navigation__submenu-container .block-list-appender {
+	display: none;
+}
+
+
 /**
  * Colors Selector component
  */

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

@@ -7,6 +7,7 @@ import { sortBy } from 'lodash';
  * WordPress dependencies
  */
 import { createBlock, parse } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Convert a flat menu item structure to a nested blocks structure.
@@ -21,7 +22,12 @@ export default function menuItemsToBlocks( menuItems ) {
 	}
 
 	const menuTree = createDataTree( menuItems );
-	return mapMenuItemsToBlocks( menuTree );
+	const blocks = mapMenuItemsToBlocks( menuTree );
+	return applyFilters(
+		'blocks.navigation.__unstableMenuItemsToBlocks',
+		blocks,
+		menuItems
+	);
 }
 
 /**

package/src/navigation/view.js

@@ -58,7 +58,7 @@ function toggleSubmenuOnClick( event ) {
 
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
-window.onload = () => {
+window.addEventListener( 'load', () => {
 	MicroModal.init( {
 		onShow: navigationToggleModal,
 		onClose: navigationToggleModal,
@@ -95,4 +95,4 @@ window.onload = () => {
 			}
 		} );
 	} );
-};
+} );

package/src/navigation-submenu/edit.js

@@ -520,7 +520,7 @@ export default function NavigationSubmenuEdit( {
 					! selectedBlockHasDescendants ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				hasDescendants
-					? InnerBlocks.DefaultAppender
+					? InnerBlocks.ButtonBlockAppender
 					: false,
 		}
 	);

package/src/post-comments/block.json

@@ -30,5 +30,9 @@
 			"link": true
 		}
 	},
-	"style": "wp-block-post-comments"
+	"style": [
+		"wp-block-post-comments",
+		"wp-block-buttons",
+		"wp-block-button"
+	]
 }

package/src/post-comments/index.php

@@ -66,3 +66,18 @@ function register_block_core_post_comments() {
 	);
 }
 add_action( 'init', 'register_block_core_post_comments' );
+
+/**
+ * Use the button block classes for the form-submit button.
+ *
+ * @param array $fields The default comment form arguments.
+ *
+ * @return array Returns the modified fields.
+ */
+function gutenberg_post_comments_block_form_defaults( $fields ) {
+	$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+	$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+
+	return $fields;
+}
+add_filter( 'comment_form_defaults', 'gutenberg_post_comments_block_form_defaults' );

package/src/post-comments/style.scss

@@ -64,9 +64,13 @@
 		}
 	}
 
-	.comment-form-comment textarea {
-		box-sizing: border-box;
-		width: 100%;
+	.comment-form {
+		textarea,
+		input:not([type="submit"]):not([type="checkbox"]) {
+			display: block;
+			box-sizing: border-box;
+			width: 100%;
+		}
 	}
 
 	.comment-form-cookies-consent {

package/src/post-comments-form/style.scss

@@ -41,13 +41,15 @@
 		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 	}
 
-	.comment-form-comment textarea {
-		display: block;
-		box-sizing: border-box;
-		width: 100%;
+	.comment-form {
+		textarea,
+		input:not([type="submit"]):not([type="checkbox"]) {
+			display: block;
+			box-sizing: border-box;
+			width: 100%;
+		}
 	}
 
-	.comment-form-comment,
 	.comment-form-author,
 	.comment-form-email,
 	.comment-form-url {