@wordpress/block-library 8.10.0 → 8.11.0

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

@@ -585,4 +585,40 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-navigation__responsive-container-open.components-button {
   opacity: 1;
+}
+
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-right: 24px;
 }

package/build-style/navigation/editor.css

@@ -585,4 +585,40 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-navigation__responsive-container-open.components-button {
   opacity: 1;
+}
+
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-left: 24px;
 }

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

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

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

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

package/build-style/style-rtl.css

@@ -910,8 +910,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -1225,8 +1224,7 @@ section.wp-block-cover-image > h2,
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1420,8 +1418,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -1590,6 +1587,104 @@ h6.has-background {
   margin: 0;
 }
 
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
+}
+
 ol.wp-block-latest-comments {
   margin-right: 0;
   box-sizing: border-box;
@@ -2489,7 +2584,7 @@ p.has-background {
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -3568,8 +3663,7 @@ pre.wp-block-verse {
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/style.css

@@ -917,8 +917,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -1233,8 +1232,7 @@ section.wp-block-cover-image > h2,
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1428,8 +1426,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -1604,6 +1601,104 @@ h6.has-background {
   margin: 0;
 }
 
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
+}
+
 ol.wp-block-latest-comments {
   margin-left: 0;
   box-sizing: border-box;
@@ -2519,7 +2614,7 @@ p.has-background {
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -3603,8 +3698,7 @@ pre.wp-block-verse {
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/video/style-rtl.css

@@ -94,8 +94,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/video/style.css

@@ -94,8 +94,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.10.0",
+	"version": "8.11.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@preact/signals": "^1.1.3",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/api-fetch": "^6.30.0",
-		"@wordpress/autop": "^3.33.0",
-		"@wordpress/blob": "^3.33.0",
-		"@wordpress/block-editor": "^12.1.0",
-		"@wordpress/blocks": "^12.10.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/core-data": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/date": "^4.33.0",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/escape-html": "^2.33.0",
-		"@wordpress/hooks": "^3.33.0",
-		"@wordpress/html-entities": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/notices": "^4.1.0",
-		"@wordpress/primitives": "^3.31.0",
-		"@wordpress/private-apis": "^0.15.0",
-		"@wordpress/reusable-blocks": "^4.10.0",
-		"@wordpress/rich-text": "^6.10.0",
-		"@wordpress/server-side-render": "^4.10.0",
-		"@wordpress/url": "^3.34.0",
-		"@wordpress/viewport": "^5.10.0",
-		"@wordpress/wordcount": "^3.33.0",
+		"@wordpress/a11y": "^3.34.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/autop": "^3.34.0",
+		"@wordpress/blob": "^3.34.0",
+		"@wordpress/block-editor": "^12.2.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/core-data": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/date": "^4.34.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/escape-html": "^2.34.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/html-entities": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/primitives": "^3.32.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/reusable-blocks": "^4.11.0",
+		"@wordpress/rich-text": "^6.11.0",
+		"@wordpress/server-side-render": "^4.11.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/viewport": "^5.11.0",
+		"@wordpress/wordcount": "^3.34.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -70,7 +70,7 @@
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"micromodal": "^0.4.10",
 		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/block/edit.native.js

@@ -36,6 +36,7 @@ import {
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { help } from '@wordpress/icons';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -103,6 +104,11 @@ export default function ReusableBlockEdit( {
 		},
 		[ ref, clientId ]
 	);
+	const hostAppNamespace = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().hostAppNamespace,
+		[]
+	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
@@ -143,11 +149,19 @@ export default function ReusableBlockEdit( {
 	function renderSheet() {
 		const infoTitle =
 			Platform.OS === 'android'
-				? __(
-						'Editing reusable blocks is not yet supported on WordPress for Android'
+				? sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for Android'
+						),
+						hostAppNamespace
 				  )
-				: __(
-						'Editing reusable blocks is not yet supported on WordPress for iOS'
+				: sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for iOS'
+						),
+						hostAppNamespace
 				  );
 
 		return (

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

@@ -19,15 +19,6 @@ import {
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
-// Mock debounce to prevent potentially belated state updates.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 const BUTTONS_HTML = `<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->`;

package/src/code/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"align": [ "wide" ],
 		"anchor": true,
 		"typography": {
 			"fontSize": true,

package/src/column/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"name": "core/column",
 	"title": "Column",
-	"category": "text",
+	"category": "design",
 	"parent": [ "core/columns" ],
 	"description": "A single column within a columns block.",
 	"textdomain": "default",

package/src/columns/test/__snapshots__/transforms.native.js.snap

@@ -34,7 +34,7 @@ exports[`Columns block transforms to Group block 1`] = `
 <!-- /wp:group -->"
 `;
 
-exports[`Columns block transforms unwraps content 1`] = `
+exports[`Columns block transforms ungroups block 1`] = `
 "<!-- wp:paragraph {"align":"left"} -->
 <p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
 <!-- /wp:paragraph -->

package/src/columns/test/transforms.native.js

@@ -60,14 +60,13 @@ describe( `${ block } block transforms`, () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'unwraps content', async () => {
+	it( 'ungroups block', async () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const { getByText } = screen;
 		fireEvent.press( getBlock( screen, block ) );
 
 		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Transform block…' ) );
-		fireEvent.press( getByText( 'Unwrap' ) );
+		fireEvent.press( getByText( 'Ungroup' ) );
 
 		// The first block created is the content of the Paragraph block.
 		const paragraph = getBlock( screen, 'Paragraph', 0 );
@@ -83,8 +82,7 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const transformOptions = await getBlockTransformOptions(
 			screen,
-			block,
-			{ canUnwrap: true }
+			block
 		);
 		expect( transformOptions ).toHaveLength( blockTransforms.length );
 	} );

package/src/columns/transforms.js

@@ -105,14 +105,8 @@ const transforms = {
 			},
 		},
 	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) =>
-				innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
-		},
-	],
+	ungroup: ( attributes, innerBlocks ) =>
+		innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
 };
 
 export default transforms;

package/src/comments/index.php

@@ -29,13 +29,8 @@ function render_block_core_comments( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$comment_args = array(
-		'post_id' => $post_id,
-		'count'   => true,
-		'status'  => 'approve',
-	);
 	// Return early if there are no comments and comments are closed.
-	if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) {
+	if ( ! comments_open( $post_id ) && (int) get_comments_number( $post_id ) === 0 ) {
 		return '';
 	}
 

package/src/cover/edit/resizable-cover-popover.js

@@ -25,6 +25,8 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
 	topLeft: false,
 };
 
+const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+
 export default function ResizableCoverPopover( {
 	className,
 	height,
@@ -37,7 +39,6 @@ export default function ResizableCoverPopover( {
 	width,
 	...props
 } ) {
-	const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
 	const [ isResizing, setIsResizing ] = useState( false );
 	const dimensions = useMemo(
 		() => ( { height, minHeight, width } ),