@wordpress/block-library 6.0.12 → 6.0.16

package/build-style/style.css

@@ -1510,6 +1510,11 @@ ul.has-background {
 }
 .wp-block-navigation {
   position: relative;
+  --navigation-layout-justification-setting: flex-start;
+  --navigation-layout-direction: row;
+  --navigation-layout-wrap: wrap;
+  --navigation-layout-justify: flex-start;
+  --navigation-layout-align: center;
 }
 .wp-block-navigation ul {
   margin-top: 0;
@@ -1571,6 +1576,31 @@ ul.has-background {
   width: inherit;
   height: inherit;
 }
+.wp-block-navigation.is-vertical {
+  --navigation-layout-direction: column;
+  --navigation-layout-justify: initial;
+}
+.wp-block-navigation.no-wrap {
+  --navigation-layout-wrap: nowrap;
+}
+.wp-block-navigation.items-justified-center {
+  --navigation-layout-justification-setting: center;
+  --navigation-layout-justify: center;
+}
+.wp-block-navigation.items-justified-center.is-vertical {
+  --navigation-layout-align: center;
+}
+.wp-block-navigation.items-justified-right {
+  --navigation-layout-justification-setting: flex-end;
+  --navigation-layout-justify: flex-end;
+}
+.wp-block-navigation.items-justified-right.is-vertical {
+  --navigation-layout-align: flex-end;
+}
+.wp-block-navigation.items-justified-space-between {
+  --navigation-layout-justification-setting: space-between;
+  --navigation-layout-justify: space-between;
+}
 
 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {
   background-color: inherit;
@@ -1738,10 +1768,10 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__container {
   display: flex;
-  flex-wrap: var(--layout-wrap, wrap);
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
   list-style: none;
   margin: 0;
   padding-left: 0;
@@ -1768,10 +1798,10 @@ button.wp-block-navigation-item__content {
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
   display: flex;
-  flex-wrap: var(--layout-wrap, wrap);
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
 }
 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
   color: inherit !important;
@@ -1780,19 +1810,21 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
+  background-color: inherit;
+  padding: 2em;
   overflow: auto;
   z-index: 100000;
-  padding: 72px 24px 24px 24px;
-  background-color: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+  padding-top: calc(2em + 24px);
+  overflow: visible;
   display: flex;
   flex-direction: column;
-  align-items: var(--layout-justification-setting, inherit);
-  overflow: auto;
-  padding: 0;
+  flex-wrap: nowrap;
+  align-items: var(--navigation-layout-justification-setting, inherit);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   justify-content: flex-start;
 }
@@ -1809,17 +1841,14 @@ button.wp-block-navigation-item__content {
   min-width: 200px;
   position: static;
   border: none;
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-left: 2em;
+  padding-right: 2em;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   gap: var(--wp--style--block-gap, 2em);
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
   padding-top: var(--wp--style--block-gap, 2em);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
@@ -1830,7 +1859,7 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
   display: flex;
   flex-direction: column;
-  align-items: var(--layout-justification-setting, initial);
+  align-items: var(--navigation-layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
@@ -1893,8 +1922,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-container-close {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 0;
+  right: 0;
   z-index: 2;
 }
 
@@ -1905,8 +1934,11 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-  width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+}
+
+.wp-block-navigation__responsive-dialog {
+  position: relative;
 }
 
 html.has-modal-open {
@@ -2077,7 +2109,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 +2176,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 {
@@ -2518,7 +2552,9 @@ ul.wp-block-rss.is-grid li {
   border-radius: inherit;
 }
 .wp-block-site-logo.aligncenter {
-  display: table;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
 }
 .wp-block-site-logo.is-style-rounded {
   border-radius: 9999px;
@@ -3068,6 +3104,8 @@ pre.wp-block-verse {
    */
   /* stylelint-disable function-comma-space-after */
   /* stylelint-enable function-comma-space-after */
+  --wp--preset--font-size--normal: 16px;
+  --wp--preset--font-size--huge: 42px;
 }
 :root .has-very-light-gray-background-color {
   background-color: #eee;
@@ -3111,6 +3149,14 @@ pre.wp-block-verse {
   font-size: 2.625em;
 }
 
+.has-normal-font-size {
+  font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+  font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 .has-text-align-center {
   text-align: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.12",
+	"version": "6.0.16",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,12 +37,12 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.8",
-		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.2",
-		"@wordpress/compose": "^5.0.6",
-		"@wordpress/core-data": "^4.0.8",
-		"@wordpress/data": "^6.1.4",
+		"@wordpress/block-editor": "^8.0.12",
+		"@wordpress/blocks": "^11.1.5",
+		"@wordpress/components": "^19.1.6",
+		"@wordpress/compose": "^5.0.7",
+		"@wordpress/core-data": "^4.0.9",
+		"@wordpress/data": "^6.1.5",
 		"@wordpress/date": "^4.2.3",
 		"@wordpress/deprecated": "^3.2.3",
 		"@wordpress/dom": "^3.2.7",
@@ -52,16 +52,16 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.10",
+		"@wordpress/interface": "^4.1.14",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/notices": "^3.2.7",
+		"@wordpress/notices": "^3.2.8",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.14",
-		"@wordpress/rich-text": "^5.0.6",
-		"@wordpress/server-side-render": "^3.0.12",
+		"@wordpress/reusable-blocks": "^3.0.18",
+		"@wordpress/rich-text": "^5.0.7",
+		"@wordpress/server-side-render": "^3.0.16",
 		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.6",
+		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "34b76b2f9397215e5afb8443f5b3073c83913102"
+	"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
 }

package/src/common.scss

@@ -6,6 +6,10 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
+	// This CSS Custom Properties aren't used anymore as defaults,
+	// but we still need to keep them for backward compatibility.
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -17,6 +21,14 @@
 	font-size: 2.625em;
 }
 
+.has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 // Text alignments.
 .has-text-align-center {
 	text-align: center;

package/src/editor.scss

@@ -48,6 +48,10 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
+	// This CSS Custom Properties aren't used anymore as defaults,
+	// but we still need to keep them for backward compatibility.
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -62,6 +66,14 @@
 	font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *

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' );

package/src/group/block.json

@@ -26,8 +26,10 @@
 		},
 		"spacing": {
 			"padding": true,
+			"blockGap": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalBorder": {

package/src/group/edit.native.js

@@ -120,7 +120,7 @@ export default compose( [
 			const { innerBlocks } = block;
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const totalInnerBlocks = innerBlocks.length - 1;
-			const blockIndex = getBlockIndex( selectedBlockClientId, clientId );
+			const blockIndex = getBlockIndex( selectedBlockClientId );
 			isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
 		}
 

package/src/home-link/index.php

@@ -79,7 +79,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

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/block.json

@@ -114,8 +114,7 @@
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
-				"type": "flex",
-				"setCascadingProperties": true
+				"type": "flex"
 			}
 		}
 	},

package/src/navigation/deprecated.js

@@ -43,7 +43,6 @@ const migrateWithLayout = ( attributes ) => {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				setCascadingProperties: 'true',
 				...( itemsJustification && {
 					justifyContent: itemsJustification,
 				} ),
@@ -135,7 +134,6 @@ const v6 = {
 			allowInheriting: false,
 			default: {
 				type: 'flex',
-				setCascadingProperties: true,
 			},
 		},
 	},