@wordpress/block-library 6.0.25 → 6.0.28

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

@@ -97,6 +97,10 @@
 .block-library-spacer__resize-container {
   clear: both;
 }
+.block-library-spacer__resize-container:not(.is-resizing) {
+  height: 100% !important;
+  width: 100% !important;
+}
 .block-library-spacer__resize-container .components-resizable-box__handle::before {
   content: none;
 }

package/build-style/spacer/editor.css

@@ -97,6 +97,10 @@
 .block-library-spacer__resize-container {
   clear: both;
 }
+.block-library-spacer__resize-container:not(.is-resizing) {
+  height: 100% !important;
+  width: 100% !important;
+}
 .block-library-spacer__resize-container .components-resizable-box__handle::before {
   content: none;
 }

package/build-style/style-rtl.css

@@ -403,18 +403,20 @@
 .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,
-.wp-block-cover .has-background-dim::before {
+.wp-block-cover.has-background-dim::before {
   content: "";
   background-color: inherit;
 }
 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover-image .wp-block-cover__background,
 .wp-block-cover-image .wp-block-cover__gradient-background,
 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover .has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover .wp-block-cover__background,
 .wp-block-cover .wp-block-cover__gradient-background {
   position: absolute;
   top: 0;
@@ -424,6 +426,66 @@
   z-index: 1;
   opacity: 0.5;
 }
+.wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background {
+  opacity: 0.1;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background {
+  opacity: 0.2;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background {
+  opacity: 0.3;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background {
+  opacity: 0.4;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background {
+  opacity: 0.5;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background {
+  opacity: 0.6;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background {
+  opacity: 0.7;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background {
+  opacity: 0.8;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background {
+  opacity: 0.9;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background {
+  opacity: 1;
+}
 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0 {
   opacity: 0;
@@ -969,6 +1031,7 @@ section.wp-block-cover-image > h2,
   margin-top: auto;
   margin-bottom: auto;
   flex-direction: column;
+  max-width: 100%;
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image > div,
 .wp-block-gallery.has-nested-images figure.wp-block-image > a {
@@ -979,7 +1042,7 @@ section.wp-block-cover-image > h2,
 .wp-block-gallery.has-nested-images figure.wp-block-image img {
   display: block;
   height: auto;
-  max-width: 100%;
+  max-width: 100% !important;
   width: auto;
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
@@ -2265,6 +2328,10 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
+.wp-block-post-template.wp-block-post-template,
+.wp-block-query-loop.wp-block-post-template {
+  background: none;
+}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
@@ -3169,4 +3236,12 @@ pre.wp-block-verse {
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * Provide baseline responsiveness for images.
+ */
+html :where(img[class*="wp-image-"]) {
+  height: auto;
+  max-width: 100%;
 }

package/build-style/style.css

@@ -406,18 +406,20 @@
 .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,
-.wp-block-cover .has-background-dim::before {
+.wp-block-cover.has-background-dim::before {
   content: "";
   background-color: inherit;
 }
 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover-image .wp-block-cover__background,
 .wp-block-cover-image .wp-block-cover__gradient-background,
 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover .has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover .wp-block-cover__background,
 .wp-block-cover .wp-block-cover__gradient-background {
   position: absolute;
   top: 0;
@@ -427,6 +429,66 @@
   z-index: 1;
   opacity: 0.5;
 }
+.wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background {
+  opacity: 0.1;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background {
+  opacity: 0.2;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background {
+  opacity: 0.3;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background {
+  opacity: 0.4;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background {
+  opacity: 0.5;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background {
+  opacity: 0.6;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background {
+  opacity: 0.7;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background {
+  opacity: 0.8;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background {
+  opacity: 0.9;
+}
+.wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
+.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
+.wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
+.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background {
+  opacity: 1;
+}
 .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0 {
   opacity: 0;
@@ -973,6 +1035,7 @@ section.wp-block-cover-image > h2,
   margin-top: auto;
   margin-bottom: auto;
   flex-direction: column;
+  max-width: 100%;
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image > div,
 .wp-block-gallery.has-nested-images figure.wp-block-image > a {
@@ -983,7 +1046,7 @@ section.wp-block-cover-image > h2,
 .wp-block-gallery.has-nested-images figure.wp-block-image img {
   display: block;
   height: auto;
-  max-width: 100%;
+  max-width: 100% !important;
   width: auto;
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
@@ -2287,6 +2350,10 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
+.wp-block-post-template.wp-block-post-template,
+.wp-block-query-loop.wp-block-post-template {
+  background: none;
+}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
@@ -3198,4 +3265,12 @@ pre.wp-block-verse {
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * Provide baseline responsiveness for images.
+ */
+html :where(img[class*="wp-image-"]) {
+  height: auto;
+  max-width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.25",
+	"version": "6.0.28",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,14 +34,14 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
+		"@wordpress/api-fetch": "^5.2.7",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.16",
+		"@wordpress/block-editor": "^8.0.18",
 		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.2",
+		"@wordpress/components": "^19.2.3",
 		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.9",
+		"@wordpress/core-data": "^4.0.11",
 		"@wordpress/data": "^6.1.5",
 		"@wordpress/date": "^4.2.3",
 		"@wordpress/deprecated": "^3.2.3",
@@ -56,10 +56,10 @@
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/notices": "^3.2.8",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.22",
+		"@wordpress/reusable-blocks": "^3.0.24",
 		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/server-side-render": "^3.0.19",
-		"@wordpress/url": "^3.3.1",
+		"@wordpress/server-side-render": "^3.0.21",
+		"@wordpress/url": "^3.3.2",
 		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -72,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cac1a1f3c854fc282d67b91a74936c3fe42d7d0a"
+	"gitHead": "342ca4cdad4dd5a974db45232a48fe53f7eb28e0"
 }

package/src/archives/index.php

@@ -23,7 +23,7 @@ function render_block_core_archives( $attributes ) {
 
 		$class .= ' wp-block-archives-dropdown';
 
-		$dropdown_id = esc_attr( 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/common.scss

@@ -101,3 +101,11 @@
 	width: auto;
 	z-index: 100000;
 }
+
+/**
+ * Provide baseline responsiveness for images.
+ */
+html :where(img[class*="wp-image-"]) {
+	height: auto;
+	max-width: 100%;
+}

package/src/cover/style.scss

@@ -50,16 +50,19 @@
 		background-color: $black;
 	}
 
+	.has-background-dim.has-background-gradient {
+		background-color: transparent;
+	}
+
 	// the first selector is required for old Cover markup
-	&.has-background-dim::before,
-	.has-background-dim::before {
+	&.has-background-dim::before {
 		content: "";
 		background-color: inherit;
 	}
 
 	// the first selector is required for old Cover markup
 	&.has-background-dim:not(.has-background-gradient)::before,
-	.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;
@@ -70,6 +73,19 @@
 		opacity: 0.5;
 	}
 
+	// The following styles are needed to support legacy blocks added prior to the update
+	// that moved opacity to a nested span.
+	// https://github.com/WordPress/gutenberg/pull/35065
+	// https://github.com/WordPress/gutenberg/pull/38362
+	@for $i from 1 through 10 {
+		&.has-background-dim.has-background-dim-#{ $i * 10 } {
+			&:not(.has-background-gradient)::before,
+			.wp-block-cover__gradient-background {
+				opacity: $i * 0.1;
+			}
+		}
+	}
+
 	@for $i from 0 through 10 {
 		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
 			opacity: $i * 0.1;

package/src/gallery/constants.js

@@ -1,3 +1,5 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
+export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

package/src/gallery/style.scss

@@ -30,6 +30,7 @@
 		margin-top: auto;
 		margin-bottom: auto;
 		flex-direction: column;
+		max-width: 100%;
 
 		> div,
 		> a {
@@ -41,7 +42,9 @@
 		img {
 			display: block;
 			height: auto;
-			max-width: 100%;
+			// Ensure max-width is not overridden on the img when the parent gallery has
+			// wide or full alignment.
+			max-width: 100% !important;
 			width: auto;
 		}
 

package/src/gallery/transforms.js

@@ -291,7 +291,10 @@ const transforms = {
 									url,
 									alt,
 									caption,
-									imageSizeSlug,
+									sizeSlug: imageSizeSlug,
+									linkDestination,
+									href,
+									linkTarget,
 								},
 							} ) =>
 								createBlock( 'core/image', {
@@ -301,6 +304,9 @@ const transforms = {
 									caption,
 									sizeSlug: imageSizeSlug,
 									align,
+									linkDestination,
+									href,
+									linkTarget,
 								} )
 						);
 					}

package/src/gallery/utils.js

@@ -5,6 +5,8 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA_WP_CORE,
+	LINK_DESTINATION_ATTACHMENT_WP_CORE,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -21,15 +23,17 @@ import {
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination( image, destination ) {
-	// Need to determine the URL that the selected destination maps to.
-	// Gutenberg and WordPress use different constants so the new link
-	// destination also needs to be tweaked.
+	// Gutenberg and WordPress use different constants so if image_default_link_type
+	// option is set we need to map from the WP Core values.
+
 	switch ( destination ) {
+		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 			};
+		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,

package/src/heading/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
@@ -41,6 +41,14 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+		};
+	}, [] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -48,6 +56,10 @@ function HeadingEdit( {
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.
 	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
 		if ( ! anchor && content ) {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
@@ -59,14 +71,15 @@ function HeadingEdit( {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ content, anchor ] );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
 		if (
-			! anchor ||
-			! value ||
-			generateAnchor( clientId, content ) === anchor
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
 		) {
 			newAttrs.anchor = generateAnchor( clientId, value );
 		}

package/src/navigation/index.php

@@ -513,7 +513,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		)
 	);
 
-	$modal_unique_id = uniqid();
+	$modal_unique_id = wp_unique_id( 'modal-' );
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
@@ -538,12 +538,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="%5$s" style="%7$s" id="modal-%1$s">
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
-						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
+						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
 					</div>