@wordpress/block-library 8.33.0 → 8.35.0

package/build-style/style-rtl.css

@@ -235,7 +235,7 @@
 }
 
 .wp-block-buttons {
-  /* stylelint-disable indentation */
+  /* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 }
 .wp-block-buttons.is-vertical {
   flex-direction: column;
@@ -1550,6 +1550,10 @@ figure.wp-block-gallery.has-nested-images {
   box-sizing: border-box;
 }
 
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+  position: relative;
+}
+
 h1.has-background,
 h2.has-background,
 h3.has-background,
@@ -1636,10 +1640,9 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable */
+    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-    /* stylelint-enable */
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
@@ -2702,14 +2705,6 @@ html.has-modal-open {
   text-transform: uppercase;
 }
 
-.components-popover-pointer-events-trap {
-  z-index: 1000000;
-  position: fixed;
-  inset: 0;
-  background-color: transparent;
-  cursor: pointer;
-}
-
 .wp-block-navigation .wp-block-page-list {
   display: flex;
   flex-direction: var(--navigation-layout-direction, initial);
@@ -3068,9 +3063,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template.wp-block-post-template {
-  background: none;
-}
 .wp-block-post-template.is-flex-container {
   flex-direction: row;
   display: flex;
@@ -4085,11 +4077,7 @@ a[data-fn].fn::after {
 }
 
 :root {
-  /*
-   * Our classes uses the same values we set for gradient value attributes,
-   * and we can not use spacing because of WP multi site kses rule.
-   */
-  /* stylelint-disable function-comma-space-after */
+  /* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
   /* stylelint-enable function-comma-space-after */
   --wp--preset--font-size--normal: 16px;
   --wp--preset--font-size--huge: 42px;
@@ -4279,14 +4267,14 @@ html :where(img[class*="wp-image-"]) {
 }
 
 html :where(.is-position-sticky) {
-  /* stylelint-disable length-zero-no-unit */
+  /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
   --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
   /* stylelint-enable length-zero-no-unit */
 }
 
 @media screen and (max-width: 600px) {
   html :where(.is-position-sticky) {
-    /* stylelint-disable length-zero-no-unit */
+    /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
     --wp-admin--admin-bar--position-offset: 0px;
     /* stylelint-enable length-zero-no-unit */
   }

package/build-style/style.css

@@ -236,7 +236,7 @@
 }
 
 .wp-block-buttons {
-  /* stylelint-disable indentation */
+  /* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 }
 .wp-block-buttons.is-vertical {
   flex-direction: column;
@@ -1558,6 +1558,10 @@ figure.wp-block-gallery.has-nested-images {
   box-sizing: border-box;
 }
 
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+  position: relative;
+}
+
 h1.has-background,
 h2.has-background,
 h3.has-background,
@@ -1650,10 +1654,9 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable */
+    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-    /* stylelint-enable */
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
@@ -2732,14 +2735,6 @@ html.has-modal-open {
   text-transform: uppercase;
 }
 
-.components-popover-pointer-events-trap {
-  z-index: 1000000;
-  position: fixed;
-  inset: 0;
-  background-color: transparent;
-  cursor: pointer;
-}
-
 .wp-block-navigation .wp-block-page-list {
   display: flex;
   flex-direction: var(--navigation-layout-direction, initial);
@@ -3098,9 +3093,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template.wp-block-post-template {
-  background: none;
-}
 .wp-block-post-template.is-flex-container {
   flex-direction: row;
   display: flex;
@@ -4120,11 +4112,7 @@ a[data-fn].fn::after {
 }
 
 :root {
-  /*
-   * Our classes uses the same values we set for gradient value attributes,
-   * and we can not use spacing because of WP multi site kses rule.
-   */
-  /* stylelint-disable function-comma-space-after */
+  /* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
   /* stylelint-enable function-comma-space-after */
   --wp--preset--font-size--normal: 16px;
   --wp--preset--font-size--huge: 42px;
@@ -4316,14 +4304,14 @@ html :where(img[class*="wp-image-"]) {
 }
 
 html :where(.is-position-sticky) {
-  /* stylelint-disable length-zero-no-unit */
+  /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
   --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
   /* stylelint-enable length-zero-no-unit */
 }
 
 @media screen and (max-width: 600px) {
   html :where(.is-position-sticky) {
-    /* stylelint-disable length-zero-no-unit */
+    /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
     --wp-admin--admin-bar--position-offset: 0px;
     /* stylelint-enable length-zero-no-unit */
   }

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

@@ -113,19 +113,15 @@
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after, .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-}
-.block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after,
-.block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after {
-  box-shadow: 0 0 0 1px var(--wp-block-synced-color);
+  outline-color: var(--wp-block-synced-color);
 }
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+  outline-color: var(--wp-block-synced-color);
 }
 .is-dark-theme .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .is-dark-theme .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+  outline-color: #fff;
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {

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

@@ -113,19 +113,15 @@
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after, .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-}
-.block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after,
-.block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after {
-  box-shadow: 0 0 0 1px var(--wp-block-synced-color);
+  outline-color: var(--wp-block-synced-color);
 }
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+  outline-color: var(--wp-block-synced-color);
 }
 .is-dark-theme .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .is-dark-theme .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+  outline-color: #fff;
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.33.0",
+	"version": "8.35.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,40 +31,41 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/autop": "^3.56.0",
-		"@wordpress/blob": "^3.56.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/interactivity": "^5.5.0",
-		"@wordpress/interactivity-router": "^1.6.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/patterns": "^1.17.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/reusable-blocks": "^4.33.0",
-		"@wordpress/rich-text": "^6.33.0",
-		"@wordpress/server-side-render": "^4.33.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/viewport": "^5.33.0",
-		"@wordpress/wordcount": "^3.56.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/autop": "^3.58.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/interactivity": "^5.7.0",
+		"@wordpress/interactivity-router": "^1.8.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/primitives": "^3.56.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/server-side-render": "^4.35.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/viewport": "^5.35.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
@@ -80,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/audio/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -107,7 +107,7 @@ function AudioEdit( {
 		} );
 	}
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': isTemporaryAudio,
 	} );
 

package/src/avatar/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -124,7 +124,7 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					className={ classnames(
+					className={ clsx(
 						'avatar',
 						'avatar-' + attributes.size,
 						'photo',