@wordpress/block-library 7.0.1 → 7.0.2

package/build-style/page-list/editor-rtl.css

@@ -91,15 +91,6 @@
   pointer-events: none;
 }
 
-.wp-block-page-list .components-placeholder {
-  min-height: 0;
-  padding: 0;
-  background-color: inherit;
-}
-.wp-block-page-list .components-placeholder .components-spinner {
-  margin: 0.5em;
-}
-
 @media (min-width: 600px) {
   .wp-block-page-list-modal {
     max-width: 480px;

package/build-style/page-list/editor.css

@@ -91,15 +91,6 @@
   pointer-events: none;
 }
 
-.wp-block-page-list .components-placeholder {
-  min-height: 0;
-  padding: 0;
-  background-color: inherit;
-}
-.wp-block-page-list .components-placeholder .components-spinner {
-  margin: 0.5em;
-}
-
 @media (min-width: 600px) {
   .wp-block-page-list-modal {
     max-width: 480px;

package/build-style/style-rtl.css

@@ -435,6 +435,10 @@
 .wp-block-cover .has-background-dim:not([class*=-background-color]) {
   background-color: #000;
 }
+.wp-block-cover-image .has-background-dim.has-background-gradient,
+.wp-block-cover .has-background-dim.has-background-gradient {
+  background-color: transparent;
+}
 .wp-block-cover-image.has-background-dim::before,
 .wp-block-cover-image .has-background-dim::before,
 .wp-block-cover.has-background-dim::before,
@@ -1318,11 +1322,13 @@ h6.has-background {
   height: auto;
   width: 100%;
 }
+.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
 .wp-block-image .alignleft,
 .wp-block-image .alignright,
 .wp-block-image .aligncenter {
   display: table;
 }
+.wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
 .wp-block-image .alignleft > figcaption,
 .wp-block-image .alignright > figcaption,
 .wp-block-image .aligncenter > figcaption {
@@ -1671,21 +1677,21 @@ ul.has-background {
   align-self: center;
   line-height: 0;
   display: inline-block;
-  vertical-align: middle;
   font-size: inherit;
   padding: 0;
   background-color: inherit;
   color: currentColor;
   border: none;
-  margin-right: 0.25em;
   width: 0.6em;
   height: 0.6em;
+  margin-right: 0.25em;
 }
 .wp-block-navigation .wp-block-navigation__submenu-icon svg {
   display: inline-block;
   stroke: currentColor;
   width: inherit;
   height: inherit;
+  margin-top: 0.075em;
 }
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
@@ -1756,6 +1762,9 @@ ul.has-background {
     width: 0.5em;
     background: transparent;
   }
+  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon {
+    margin-left: 0.25em;
+  }
   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg {
     transform: rotate(90deg);
   }
@@ -1776,7 +1785,7 @@ ul.has-background {
   height: auto;
   min-width: 200px;
 }
-.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container {
+.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
   opacity: 1;
@@ -1818,6 +1827,14 @@ button.wp-block-navigation-item__content {
   cursor: pointer;
 }
 
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+  padding-left: 0.85em;
+}
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
+  margin-right: -0.6em;
+  pointer-events: none;
+}
+
 /**
  * Margins
  */

package/build-style/style.css

@@ -440,6 +440,10 @@
 .wp-block-cover .has-background-dim:not([class*=-background-color]) {
   background-color: #000;
 }
+.wp-block-cover-image .has-background-dim.has-background-gradient,
+.wp-block-cover .has-background-dim.has-background-gradient {
+  background-color: transparent;
+}
 .wp-block-cover-image.has-background-dim::before,
 .wp-block-cover-image .has-background-dim::before,
 .wp-block-cover.has-background-dim::before,
@@ -1324,11 +1328,13 @@ h6.has-background {
   height: auto;
   width: 100%;
 }
+.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
 .wp-block-image .alignleft,
 .wp-block-image .alignright,
 .wp-block-image .aligncenter {
   display: table;
 }
+.wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
 .wp-block-image .alignleft > figcaption,
 .wp-block-image .alignright > figcaption,
 .wp-block-image .aligncenter > figcaption {
@@ -1695,21 +1701,21 @@ ul.has-background {
   align-self: center;
   line-height: 0;
   display: inline-block;
-  vertical-align: middle;
   font-size: inherit;
   padding: 0;
   background-color: inherit;
   color: currentColor;
   border: none;
-  margin-left: 0.25em;
   width: 0.6em;
   height: 0.6em;
+  margin-left: 0.25em;
 }
 .wp-block-navigation .wp-block-navigation__submenu-icon svg {
   display: inline-block;
   stroke: currentColor;
   width: inherit;
   height: inherit;
+  margin-top: 0.075em;
 }
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
@@ -1780,6 +1786,9 @@ ul.has-background {
     width: 0.5em;
     background: transparent;
   }
+  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon {
+    margin-right: 0.25em;
+  }
   .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg {
     transform: rotate(-90deg);
   }
@@ -1800,7 +1809,7 @@ ul.has-background {
   height: auto;
   min-width: 200px;
 }
-.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container {
+.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
   opacity: 1;
@@ -1842,6 +1851,14 @@ button.wp-block-navigation-item__content {
   cursor: pointer;
 }
 
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+  padding-right: 0.85em;
+}
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
+  margin-left: -0.6em;
+  pointer-events: none;
+}
+
 /**
  * Margins
  */

package/build-style/template-part/editor-rtl.css

@@ -74,65 +74,28 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-template-part__placeholder-preview-dropdown-content .components-popover__content,
-.wp-block-template-part__preview-dropdown-content .components-popover__content {
-  min-width: 320px;
-  padding: 0;
+@media (min-width: 600px) {
+  .block-editor-template-part__selection-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
 }
-
-.wp-block-template-part__selection-preview-search-form {
-  border-bottom: 1px solid #ddd;
-}
-
-.wp-block-template-part__selection-preview-container {
-  background: #fff;
-  padding-bottom: 16px;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item {
-  border-radius: 2px;
-  cursor: pointer;
-  margin-top: 16px;
-  transition: all 0.05s ease-in-out;
-  border: 1px solid #ddd;
-  width: 100%;
-  background-color: #fff;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item:hover {
-  border: 1px solid var(--wp-admin-theme-color);
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item:focus {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item.is-placeholder {
-  min-height: 100px;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item .block-editor-block-preview__container {
-  border-bottom: 1px solid #ddd;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: right;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-header {
-  padding: 16px 16px 0;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-content {
-  padding: 0 16px;
+@media (min-width: 782px) {
+  .block-editor-template-part__selection-modal {
+    width: 750px;
+  }
 }
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-title {
-  color: var(--wp-admin-theme-color);
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 500;
+@media (min-width: 960px) {
+  .block-editor-template-part__selection-modal {
+    height: 70%;
+  }
 }
 
-.wp-block-template-part__placeholder-create-new__title-form .wp-block-template-part__placeholder-create-new__title-form-actions {
-  padding-top: 12px;
-  display: flex;
-  justify-content: flex-end;
+.block-library-template-part__selection-content .block-editor-block-patterns-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 8px;
 }
-.wp-block-template-part__placeholder-create-new__title-form .wp-block-template-part__placeholder-create-new__title-form-actions .components-flex-item {
-  margin-right: 12px;
+.block-library-template-part__selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
 }

package/build-style/template-part/editor.css

@@ -74,65 +74,28 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-template-part__placeholder-preview-dropdown-content .components-popover__content,
-.wp-block-template-part__preview-dropdown-content .components-popover__content {
-  min-width: 320px;
-  padding: 0;
+@media (min-width: 600px) {
+  .block-editor-template-part__selection-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
 }
-
-.wp-block-template-part__selection-preview-search-form {
-  border-bottom: 1px solid #ddd;
-}
-
-.wp-block-template-part__selection-preview-container {
-  background: #fff;
-  padding-bottom: 16px;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item {
-  border-radius: 2px;
-  cursor: pointer;
-  margin-top: 16px;
-  transition: all 0.05s ease-in-out;
-  border: 1px solid #ddd;
-  width: 100%;
-  background-color: #fff;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item:hover {
-  border: 1px solid var(--wp-admin-theme-color);
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item:focus {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item.is-placeholder {
-  min-height: 100px;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item .block-editor-block-preview__container {
-  border-bottom: 1px solid #ddd;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-preview-item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: left;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-header {
-  padding: 16px 16px 0;
-}
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-content {
-  padding: 0 16px;
+@media (min-width: 782px) {
+  .block-editor-template-part__selection-modal {
+    width: 750px;
+  }
 }
-.wp-block-template-part__selection-preview-container .wp-block-template-part__selection-panel-group-title {
-  color: var(--wp-admin-theme-color);
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 500;
+@media (min-width: 960px) {
+  .block-editor-template-part__selection-modal {
+    height: 70%;
+  }
 }
 
-.wp-block-template-part__placeholder-create-new__title-form .wp-block-template-part__placeholder-create-new__title-form-actions {
-  padding-top: 12px;
-  display: flex;
-  justify-content: flex-end;
+.block-library-template-part__selection-content .block-editor-block-patterns-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 8px;
 }
-.wp-block-template-part__placeholder-create-new__title-form .wp-block-template-part__placeholder-create-new__title-form-actions .components-flex-item {
-  margin-left: 12px;
+.block-library-template-part__selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.0.1",
+	"version": "7.0.2",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,28 +37,28 @@
 		"@wordpress/api-fetch": "^6.0.1",
 		"@wordpress/autop": "^3.3.1",
 		"@wordpress/blob": "^3.3.1",
-		"@wordpress/block-editor": "^8.1.2",
-		"@wordpress/blocks": "^11.2.1",
-		"@wordpress/components": "^19.4.1",
-		"@wordpress/compose": "^5.1.1",
-		"@wordpress/core-data": "^4.1.1",
-		"@wordpress/data": "^6.2.1",
+		"@wordpress/block-editor": "^8.2.0",
+		"@wordpress/blocks": "^11.2.2",
+		"@wordpress/components": "^19.5.0",
+		"@wordpress/compose": "^5.1.2",
+		"@wordpress/core-data": "^4.1.2",
+		"@wordpress/data": "^6.3.0",
 		"@wordpress/date": "^4.3.1",
 		"@wordpress/deprecated": "^3.3.1",
-		"@wordpress/dom": "^3.3.1",
+		"@wordpress/dom": "^3.3.2",
 		"@wordpress/element": "^4.1.1",
 		"@wordpress/hooks": "^3.3.1",
 		"@wordpress/html-entities": "^3.3.1",
 		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.0",
+		"@wordpress/icons": "^7.0.1",
 		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/notices": "^3.3.1",
+		"@wordpress/notices": "^3.3.2",
 		"@wordpress/primitives": "^3.1.1",
-		"@wordpress/reusable-blocks": "^3.1.2",
-		"@wordpress/rich-text": "^5.1.1",
-		"@wordpress/server-side-render": "^3.1.2",
+		"@wordpress/reusable-blocks": "^3.1.3",
+		"@wordpress/rich-text": "^5.1.2",
+		"@wordpress/server-side-render": "^3.1.3",
 		"@wordpress/url": "^3.4.1",
-		"@wordpress/viewport": "^4.1.1",
+		"@wordpress/viewport": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -70,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
+	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
 }

package/src/archives/index.php

@@ -23,7 +23,7 @@ function render_block_core_archives( $attributes ) {
 
 		$class .= ' wp-block-archives-dropdown';
 
-		$dropdown_id = uniqid( 'wp-block-archives-' );
+		$dropdown_id = wp_unique_id( 'wp-block-archives-' );
 		$title       = __( 'Archives' );
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */

package/src/button/edit.native.js

@@ -17,7 +17,6 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-	useSetting,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -29,6 +28,7 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -118,8 +118,8 @@ function ButtonEdit( props ) {
 	const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit );
 
 	const richTextRef = useRef();
-	const colors = useSetting( 'color.palette' ) || [];
-	const gradients = useSetting( 'color.gradients' ) || [];
+	const colors = useMobileGlobalStylesColors();
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 
 	useEffect( () => {
 		if ( isSelected ) {

package/src/columns/block.json

@@ -43,6 +43,18 @@
 				"type": "flex",
 				"flexWrap": "nowrap"
 			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

package/src/comment-author-avatar/edit.js

@@ -5,10 +5,12 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { __, _x, isRTL } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
 
 export default function Edit( {
 	attributes,
@@ -38,6 +40,11 @@ export default function Edit( {
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+	const { avatarURL } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
 
 	const inspectorControls = (
 		<InspectorControls>
@@ -59,7 +66,7 @@ export default function Edit( {
 		</InspectorControls>
 	);
 
-	const displayAvatar = avatarUrls ? (
+	const resizableAvatar = (
 		<ResizableBox
 			size={ {
 				width,
@@ -83,21 +90,19 @@ export default function Edit( {
 			maxWidth={ maxSizeBuffer }
 		>
 			<img
-				src={ avatarUrls[ avatarUrls.length - 1 ] }
+				src={
+					avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : avatarURL
+				}
 				alt={ `${ authorName } ${ __( 'Avatar' ) }` }
 				{ ...blockProps }
 			/>
 		</ResizableBox>
-	) : (
-		<p { ...blockProps }>
-			{ _x( 'Comment Author Avatar', 'block title' ) }
-		</p>
 	);
 
 	return (
 		<>
 			{ inspectorControls }
-			<div { ...spacingProps }>{ displayAvatar }</div>
+			<div { ...spacingProps }>{ resizableAvatar }</div>
 		</>
 	);
 }

package/src/comment-author-avatar/editor.scss

@@ -0,0 +1,7 @@
+.wp-block-comment-author-avatar__placeholder {
+	border: currentColor 1px dashed;
+	width: 100%;
+	height: 100%;
+	stroke: currentColor;
+	stroke-dasharray: 3;
+}

package/src/comment-template/block.json

@@ -7,7 +7,13 @@
 	"parent": [ "core/comments-query-loop" ],
 	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [ "comments/perPage", "postId", "comments/order" ],
+	"usesContext": [
+		"comments/defaultPage",
+		"comments/inherit",
+		"comments/order",
+		"comments/perPage",
+		"postId"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,