@wordpress/block-library 6.0.2 → 6.0.3

package/build-style/style.css

@@ -159,8 +159,8 @@
   border-radius: 0 !important;
 }
 
-.is-style-outline > .wp-block-button__link,
-.wp-block-button__link.is-style-outline {
+.is-style-outline > :where(.wp-block-button__link),
+:where(.wp-block-button__link).is-style-outline {
   border: 2px solid currentColor;
   padding: 0.667em 1.333em;
 }
@@ -176,10 +176,6 @@
 }
 
 .wp-block-buttons {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--wp--style--block-gap, 0.5em);
   /* stylelint-disable indentation */
 }
 .wp-block-buttons.is-vertical {
@@ -286,7 +282,7 @@
     flex-wrap: nowrap;
   }
 }
-.wp-block-columns.has-background {
+.wp-block-columns:where(.has-background) {
   padding: 1.25em 2.375em;
 }
 .wp-block-columns.are-vertically-aligned-top {
@@ -1507,13 +1503,12 @@ ul.has-background {
 }
 .wp-block-navigation {
   position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
 }
-.wp-block-navigation.is-vertical {
-  flex-direction: column;
-  align-items: flex-start;
+.wp-block-navigation ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  padding-left: 0;
 }
 .wp-block-navigation ul,
 .wp-block-navigation ul li {
@@ -1648,7 +1643,8 @@ ul.has-background {
  */
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
+.wp-block-navigation__container,
+.wp-block-navigation__responsive-container-content {
   gap: var(--wp--style--block-gap, 2em);
 }
 
@@ -1695,65 +1691,13 @@ ul.has-background {
 }
 
 .wp-block-navigation__container {
-  align-items: center;
   list-style: none;
   margin: 0;
   padding-left: 0;
-  display: flex;
-  flex-wrap: wrap;
 }
 .wp-block-navigation__container .is-responsive {
   display: none;
 }
-.items-justified-space-between .wp-block-navigation__container {
-  flex-grow: 1;
-}
-
-.is-vertical .wp-block-page-list,
-.is-vertical .wp-block-navigation__container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.items-justified-center .wp-block-page-list,
-.items-justified-center .wp-block-navigation__container {
-  justify-content: center;
-}
-
-.items-justified-right .wp-block-page-list,
-.items-justified-right .wp-block-navigation__container {
-  justify-content: flex-end;
-}
-
-.items-justified-space-between .wp-block-navigation__responsive-container-content,
-.items-justified-space-between .wp-block-navigation__container {
-  display: flex;
-  justify-content: space-between;
-  flex: 1;
-}
-
-.is-vertical.items-justified-center {
-  align-items: center;
-}
-.is-vertical.items-justified-center .wp-block-navigation-item {
-  justify-content: center;
-}
-.is-vertical.items-justified-center .wp-block-page-list,
-.is-vertical.items-justified-center .wp-block-navigation__container {
-  align-items: center;
-}
-
-.is-vertical.items-justified-right {
-  align-items: flex-end;
-}
-.is-vertical.items-justified-right .wp-block-navigation-item {
-  justify-content: flex-end;
-}
-.is-vertical.items-justified-right .wp-block-page-list,
-.is-vertical.items-justified-right .wp-block-navigation__container {
-  align-items: flex-end;
-}
 
 /**
  * Mobile menu.
@@ -1765,9 +1709,9 @@ ul.has-background {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1;
-  align-items: flex-start;
-  justify-content: flex-start;
+}
+.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
+  display: contents;
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -1776,10 +1720,13 @@ ul.has-background {
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
+  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
+  align-items: var(--justification-setting, inherit);
+  overflow: auto;
   padding: 0;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
@@ -1796,37 +1743,27 @@ ul.has-background {
   position: static;
   border: none;
   padding-left: 32px;
-}
-.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,
-.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
-  padding-left: 0;
   padding-right: 32px;
 }
 .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: 2rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  gap: var(--wp--style--block-gap, 2em);
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a {
+.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 {
+  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 {
   padding: 0;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
+  display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
-.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
-.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
-  align-items: flex-end;
-}
-.items-justified-center .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
-.items-justified-center .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
-.items-justified-center .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
-  align-items: center;
+  align-items: var(--justification-setting, inherit);
 }
 .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 {
@@ -1839,8 +1776,7 @@ ul.has-background {
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: flex;
-    flex-direction: row;
+    display: contents;
     width: 100%;
     position: relative;
     z-index: 2;
@@ -1886,18 +1822,6 @@ ul.has-background {
     display: none;
   }
 }
-.items-justified-left .wp-block-navigation__responsive-container-open {
-  margin-left: 0;
-  margin-right: auto;
-}
-.items-justified-center .wp-block-navigation__responsive-container-open {
-  margin-left: auto;
-  margin-right: auto;
-}
-.items-justified-right .wp-block-navigation__responsive-container-open {
-  margin-left: auto;
-  margin-right: 0;
-}
 
 .wp-block-navigation__responsive-container-close {
   position: absolute;
@@ -1921,6 +1845,17 @@ html.has-modal-open {
   overflow: hidden;
 }
 
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
+.wp-block-navigation__container {
+  display: contents;
+}
+.is-menu-open .wp-block-navigation__responsive-close,
+.is-menu-open .wp-block-navigation__responsive-dialog,
+.is-menu-open .wp-block-navigation__container {
+  align-items: inherit;
+}
+
 .wp-block-navigation .wp-block-navigation-item__label {
   word-break: normal;
   overflow-wrap: break-word;
@@ -1976,7 +1911,7 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation .wp-block-page-list {
-  display: flex;
+  display: contents;
   flex-wrap: wrap;
   background-color: inherit;
 }
@@ -1984,21 +1919,6 @@ button.wp-block-navigation-item__content {
   background-color: inherit;
 }
 
-.is-vertical .wp-block-navigation__container .wp-block-page-list,
-.is-open .wp-block-navigation__container .wp-block-page-list {
-  display: flex;
-}
-
-@media (min-width: 480px) {
-  .is-open .wp-block-navigation__container .wp-block-page-list {
-    display: flex;
-  }
-}
-
-.items-justified-space-between .wp-block-page-list {
-  display: contents;
-}
-
 .is-small-text {
   font-size: 0.875em;
 }
@@ -2066,6 +1986,9 @@ p.has-background {
   margin: 0;
 }
 
+.wp-block-post-comments > h3:first-of-type {
+  margin-top: 0;
+}
 .wp-block-post-comments .commentlist {
   list-style: none;
   margin: 0;
@@ -2112,18 +2035,35 @@ p.has-background {
 .wp-block-post-comments .comment-form-email label,
 .wp-block-post-comments .comment-form-url label {
   display: block;
+  margin-bottom: 0.25em;
 }
 .wp-block-post-comments .comment-form-comment textarea {
   box-sizing: border-box;
   width: 100%;
 }
+.wp-block-post-comments .comment-form-cookies-consent {
+  display: flex;
+  gap: 0.25em;
+}
+.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent {
+  margin-top: 0.35em;
+}
 .wp-block-post-comments .reply {
   font-size: 0.75em;
   margin-bottom: 1.4em;
 }
 .wp-block-post-comments textarea,
-.wp-block-post-comments input {
+.wp-block-post-comments input:not([type=submit]) {
   border: 1px solid #949494;
+  font-size: 1em;
+  font-family: inherit;
+}
+.wp-block-post-comments textarea,
+.wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
+  padding: calc(0.667em + 2px);
+}
+.wp-block-post-comments input[type=submit] {
+  border: none;
 }
 
 .wp-block-post-comments-form input[type=submit] {
@@ -2134,6 +2074,35 @@ p.has-background {
   text-align: center;
   overflow-wrap: break-word;
 }
+.wp-block-post-comments-form textarea,
+.wp-block-post-comments-form input:not([type=submit]) {
+  border: 1px solid #949494;
+  font-size: 1em;
+  font-family: inherit;
+}
+.wp-block-post-comments-form textarea,
+.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 {
+  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 {
+  display: block;
+  margin-bottom: 0.25em;
+}
+.wp-block-post-comments-form .comment-form-cookies-consent {
+  display: flex;
+  gap: 0.25em;
+}
+.wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
+  margin-top: 0.35em;
+}
 
 .wp-block-post-excerpt__more-link {
   display: inline-block;
@@ -2218,6 +2187,10 @@ p.has-background {
   color: inherit;
 }
 
+.wp-block-post-content + * {
+  clear: both;
+}
+
 .wp-block-post-template,
 .wp-block-query-loop {
   margin-top: 0;
@@ -2463,7 +2436,6 @@ ul.wp-block-rss.is-grid li {
   background: none !important;
   border: none;
   text-align: center;
-  width: none;
   line-height: 1;
   height: auto;
 }
@@ -2491,7 +2463,7 @@ ul.wp-block-rss.is-grid li {
 .wp-block-site-logo img {
   border-radius: inherit;
 }
-.wp-block-site-logo .aligncenter {
+.wp-block-site-logo.aligncenter {
   display: table;
 }
 .wp-block-site-logo.is-style-rounded {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.2",
+	"version": "6.0.3",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,33 +34,34 @@
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
 		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.4",
+		"@wordpress/api-fetch": "^5.2.5",
 		"@wordpress/autop": "^3.2.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.4",
-		"@wordpress/blocks": "^11.1.2",
-		"@wordpress/components": "^19.0.0",
-		"@wordpress/compose": "^5.0.4",
-		"@wordpress/core-data": "^4.0.4",
-		"@wordpress/data": "^6.1.2",
+		"@wordpress/block-editor": "^8.0.0",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/core-data": "^4.0.5",
+		"@wordpress/data": "^6.1.3",
 		"@wordpress/date": "^4.2.2",
 		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.5",
+		"@wordpress/dom": "^3.2.6",
 		"@wordpress/element": "^4.0.3",
 		"@wordpress/escape-html": "^2.2.2",
 		"@wordpress/hooks": "^3.2.1",
 		"@wordpress/html-entities": "^3.2.2",
 		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
+		"@wordpress/icons": "^6.1.0",
+		"@wordpress/interface": "^4.1.3",
 		"@wordpress/is-shallow-equal": "^4.2.0",
 		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/notices": "^3.2.5",
+		"@wordpress/notices": "^3.2.6",
 		"@wordpress/primitives": "^3.0.3",
-		"@wordpress/reusable-blocks": "^3.0.4",
-		"@wordpress/rich-text": "^5.0.4",
-		"@wordpress/server-side-render": "^3.0.4",
-		"@wordpress/url": "^3.2.3",
-		"@wordpress/viewport": "^4.0.4",
+		"@wordpress/reusable-blocks": "^3.0.5",
+		"@wordpress/rich-text": "^5.0.5",
+		"@wordpress/server-side-render": "^3.0.5",
+		"@wordpress/url": "^3.3.0",
+		"@wordpress/viewport": "^4.0.5",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -72,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/audio/test/edit.native.js

@@ -14,6 +14,10 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
  */
 import { metadata, settings, name } from '../index';
 
+// react-native-aztec shouldn't be mocked because these tests are based on
+// snapshot testing where we want to keep the original component.
+jest.unmock( '@wordpress/react-native-aztec' );
+
 const AudioEdit = ( { clientId, ...props } ) => (
 	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
 );

package/src/block/edit.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	InnerBlocks,

package/src/button/block.json

@@ -63,7 +63,10 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"__experimentalFontFamily": true
+			"__experimentalFontFamily": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"reusable": false,
 		"spacing": {

package/src/button/style.scss

@@ -95,8 +95,8 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.is-style-outline > .wp-block-button__link,
-.wp-block-button__link.is-style-outline {
+.is-style-outline > :where(.wp-block-button__link),
+:where(.wp-block-button__link).is-style-outline {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }

package/src/buttons/block.json

@@ -6,15 +6,6 @@
 	"description": "Prompt visitors to take action with a group of button-style links.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
-	"attributes": {
-		"contentJustification": {
-			"type": "string"
-		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal"
-		}
-	},
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
@@ -25,6 +16,13 @@
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
 		}
 	},
 	"editorStyle": "wp-block-buttons-editor",

package/src/buttons/deprecated.js

@@ -1,9 +1,79 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * @param {Object} attributes Block's attributes.
+ */
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+
+	const { contentJustification, orientation } = attributes;
+
+	const updatedAttributes = {
+		...attributes,
+	};
+
+	if ( contentJustification || orientation ) {
+		Object.assign( updatedAttributes, {
+			layout: {
+				type: 'flex',
+				justifyContent: contentJustification || 'left',
+				orientation: orientation || 'horizontal',
+			},
+		} );
+	}
+
+	return updatedAttributes;
+};
 
 const deprecated = [
+	{
+		attributes: {
+			contentJustification: {
+				type: 'string',
+			},
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+		},
+		supports: {
+			anchor: true,
+			align: [ 'wide', 'full' ],
+			__experimentalExposeControlsToChildren: true,
+			spacing: {
+				blockGap: true,
+				margin: [ 'top', 'bottom' ],
+				__experimentalDefaultControls: {
+					blockGap: true,
+				},
+			},
+		},
+		isEligible: ( { layout } ) => ! layout,
+		migrate: migrateWithLayout,
+		save( { attributes: { contentJustification, orientation } } ) {
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						className: classnames( {
+							[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+							'is-vertical': orientation === 'vertical',
+						} ),
+					} ) }
+				>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
 	{
 		supports: {
 			align: [ 'center', 'left', 'right' ],
@@ -20,7 +90,7 @@ const deprecated = [
 			return align && [ 'center', 'left', 'right' ].includes( align );
 		},
 		migrate( attributes ) {
-			return {
+			return migrateWithLayout( {
 				...attributes,
 				align: undefined,
 				// Floating Buttons blocks shouldn't have been supported in the
@@ -30,7 +100,7 @@ const deprecated = [
 				// As for center-aligned Buttons blocks, the content justification
 				// equivalent will create an identical end result in most cases.
 				contentJustification: attributes.align,
-			};
+			} );
 		},
 	},
 ];