@wordpress/block-library 8.5.0 → 8.7.0

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

@@ -87,22 +87,22 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-search__button {
-  margin-right: 0.625em;
+  margin-right: 10px;
   word-break: normal;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
 }
 .wp-block-search__button svg {
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: 24px;
+  min-height: 24px;
   fill: currentColor;
   vertical-align: text-bottom;
 }
 
 :where(.wp-block-search__button) {
   border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
+  padding: 6px 10px;
 }
 
 .wp-block-search__inside-wrapper {
@@ -121,7 +121,7 @@
   flex-grow: 1;
   margin-right: 0;
   margin-left: 0;
-  min-width: 3em;
+  min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
 }
@@ -133,17 +133,18 @@
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
+  box-sizing: border-box;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
-  padding: 0 0.25em 0 0;
+  padding: 0 4px;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
-  padding: 0.125em 0.5em;
+  padding: 4px 8px;
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {

package/build-style/search/style.css

@@ -87,22 +87,22 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-search__button {
-  margin-left: 0.625em;
+  margin-left: 10px;
   word-break: normal;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
 }
 .wp-block-search__button svg {
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: 24px;
+  min-height: 24px;
   fill: currentColor;
   vertical-align: text-bottom;
 }
 
 :where(.wp-block-search__button) {
   border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
+  padding: 6px 10px;
 }
 
 .wp-block-search__inside-wrapper {
@@ -121,7 +121,7 @@
   flex-grow: 1;
   margin-left: 0;
   margin-right: 0;
-  min-width: 3em;
+  min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
 }
@@ -133,17 +133,18 @@
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
+  box-sizing: border-box;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
-  padding: 0 0 0 0.25em;
+  padding: 0 4px;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
-  padding: 0.125em 0.5em;
+  padding: 4px 8px;
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {

package/build-style/style-rtl.css

@@ -329,6 +329,7 @@
 
 .wp-block-categories {
   box-sizing: border-box;
+  /* Only apply the text align on dropdowns, not lists. */
 }
 .wp-block-categories.alignleft {
   margin-right: 2em;
@@ -336,6 +337,9 @@
 .wp-block-categories.alignright {
   margin-left: 2em;
 }
+.wp-block-categories.wp-block-categories-dropdown.aligncenter {
+  text-align: center;
+}
 
 .wp-block-code {
   box-sizing: border-box;
@@ -818,11 +822,7 @@
 .wp-block-cover .wp-block-cover__inner-container {
   width: 100%;
   z-index: 1;
-  color: #fff; direction: rtl;
-}
-.wp-block-cover-image.is-light .wp-block-cover__inner-container,
-.wp-block-cover.is-light .wp-block-cover__inner-container {
-  color: #000;
+  color: inherit; direction: rtl;
 }
 .wp-block-cover-image p:not(.has-text-color),
 .wp-block-cover-image h1:not(.has-text-color),
@@ -1005,6 +1005,16 @@ section.wp-block-cover-image > h2,
   text-align: center;
 }
 
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+  color: #fff;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+  color: #000;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -2295,6 +2305,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+}
+.has-modal-open .wp-block-navigation__responsive-close {
   max-width: var(--wp--style--global--wide-size, 100%);
   margin-right: auto;
   margin-left: auto;
@@ -2508,6 +2520,7 @@ p.has-background {
 }
 .wp-block-post-featured-image a {
   display: block;
+  height: 100%;
 }
 .wp-block-post-featured-image img {
   max-width: 100%;
@@ -2587,6 +2600,10 @@ p.has-background {
   white-space: pre-wrap;
 }
 
+.wp-block-post-time-to-read {
+  box-sizing: border-box;
+}
+
 .wp-block-post-title {
   word-break: break-word;
   box-sizing: border-box;
@@ -2672,7 +2689,7 @@ p.has-background {
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li {
+.wp-block-post-template.is-flex-container > li {
   margin: 0;
   width: 100%;
 }
@@ -2813,22 +2830,22 @@ ul.wp-block-rss.is-grid li {
 }
 
 .wp-block-search__button {
-  margin-right: 0.625em;
+  margin-right: 10px;
   word-break: normal;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
 }
 .wp-block-search__button svg {
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: 24px;
+  min-height: 24px;
   fill: currentColor;
   vertical-align: text-bottom;
 }
 
 :where(.wp-block-search__button) {
   border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
+  padding: 6px 10px;
 }
 
 .wp-block-search__inside-wrapper {
@@ -2847,7 +2864,7 @@ ul.wp-block-rss.is-grid li {
   flex-grow: 1;
   margin-right: 0;
   margin-left: 0;
-  min-width: 3em;
+  min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
 }
@@ -2859,17 +2876,18 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
+  box-sizing: border-box;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
-  padding: 0 0.25em 0 0;
+  padding: 0 4px;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
-  padding: 0.125em 0.5em;
+  padding: 4px 8px;
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {

package/build-style/style.css

@@ -330,6 +330,7 @@
 
 .wp-block-categories {
   box-sizing: border-box;
+  /* Only apply the text align on dropdowns, not lists. */
 }
 .wp-block-categories.alignleft {
   /*rtl:ignore*/
@@ -339,6 +340,9 @@
   /*rtl:ignore*/
   margin-left: 2em;
 }
+.wp-block-categories.wp-block-categories-dropdown.aligncenter {
+  text-align: center;
+}
 
 .wp-block-code {
   box-sizing: border-box;
@@ -824,13 +828,9 @@
 .wp-block-cover .wp-block-cover__inner-container {
   width: 100%;
   z-index: 1;
-  color: #fff;
+  color: inherit;
   /*rtl:raw: direction: rtl; */
 }
-.wp-block-cover-image.is-light .wp-block-cover__inner-container,
-.wp-block-cover.is-light .wp-block-cover__inner-container {
-  color: #000;
-}
 .wp-block-cover-image p:not(.has-text-color),
 .wp-block-cover-image h1:not(.has-text-color),
 .wp-block-cover-image h2:not(.has-text-color),
@@ -1012,6 +1012,16 @@ section.wp-block-cover-image > h2,
   text-align: center;
 }
 
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+  color: #fff;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+  color: #000;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -2325,6 +2335,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+}
+.has-modal-open .wp-block-navigation__responsive-close {
   max-width: var(--wp--style--global--wide-size, 100%);
   margin-left: auto;
   margin-right: auto;
@@ -2538,6 +2550,7 @@ p.has-background {
 }
 .wp-block-post-featured-image a {
   display: block;
+  height: 100%;
 }
 .wp-block-post-featured-image img {
   max-width: 100%;
@@ -2617,6 +2630,10 @@ p.has-background {
   white-space: pre-wrap;
 }
 
+.wp-block-post-time-to-read {
+  box-sizing: border-box;
+}
+
 .wp-block-post-title {
   word-break: break-word;
   box-sizing: border-box;
@@ -2702,7 +2719,7 @@ p.has-background {
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li {
+.wp-block-post-template.is-flex-container > li {
   margin: 0;
   width: 100%;
 }
@@ -2847,22 +2864,22 @@ ul.wp-block-rss.is-grid li {
 }
 
 .wp-block-search__button {
-  margin-left: 0.625em;
+  margin-left: 10px;
   word-break: normal;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
 }
 .wp-block-search__button svg {
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: 24px;
+  min-height: 24px;
   fill: currentColor;
   vertical-align: text-bottom;
 }
 
 :where(.wp-block-search__button) {
   border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
+  padding: 6px 10px;
 }
 
 .wp-block-search__inside-wrapper {
@@ -2881,7 +2898,7 @@ ul.wp-block-rss.is-grid li {
   flex-grow: 1;
   margin-left: 0;
   margin-right: 0;
-  min-width: 3em;
+  min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
 }
@@ -2893,17 +2910,18 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
+  box-sizing: border-box;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
-  padding: 0 0 0 0.25em;
+  padding: 0 4px;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
-  padding: 0.125em 0.5em;
+  padding: 4px 8px;
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.5.0",
+	"version": "8.7.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.28.0",
-		"@wordpress/api-fetch": "^6.25.0",
-		"@wordpress/autop": "^3.28.0",
-		"@wordpress/blob": "^3.28.0",
-		"@wordpress/block-editor": "^11.5.0",
-		"@wordpress/blocks": "^12.5.0",
-		"@wordpress/components": "^23.5.0",
-		"@wordpress/compose": "^6.5.0",
-		"@wordpress/core-data": "^6.5.0",
-		"@wordpress/data": "^8.5.0",
-		"@wordpress/date": "^4.28.0",
-		"@wordpress/deprecated": "^3.28.0",
-		"@wordpress/dom": "^3.28.0",
-		"@wordpress/element": "^5.5.0",
-		"@wordpress/escape-html": "^2.28.0",
-		"@wordpress/hooks": "^3.28.0",
-		"@wordpress/html-entities": "^3.28.0",
-		"@wordpress/i18n": "^4.28.0",
-		"@wordpress/icons": "^9.19.0",
-		"@wordpress/keycodes": "^3.28.0",
-		"@wordpress/notices": "^3.28.0",
-		"@wordpress/primitives": "^3.26.0",
-		"@wordpress/private-apis": "^0.10.0",
-		"@wordpress/reusable-blocks": "^4.5.0",
-		"@wordpress/rich-text": "^6.5.0",
-		"@wordpress/server-side-render": "^4.5.0",
-		"@wordpress/url": "^3.29.0",
-		"@wordpress/viewport": "^5.5.0",
-		"@wordpress/wordcount": "^3.28.0",
+		"@wordpress/a11y": "^3.30.0",
+		"@wordpress/api-fetch": "^6.27.0",
+		"@wordpress/autop": "^3.30.0",
+		"@wordpress/blob": "^3.30.0",
+		"@wordpress/block-editor": "^11.7.0",
+		"@wordpress/blocks": "^12.7.0",
+		"@wordpress/components": "^23.7.0",
+		"@wordpress/compose": "^6.7.0",
+		"@wordpress/core-data": "^6.7.0",
+		"@wordpress/data": "^9.0.0",
+		"@wordpress/date": "^4.30.0",
+		"@wordpress/deprecated": "^3.30.0",
+		"@wordpress/dom": "^3.30.0",
+		"@wordpress/element": "^5.7.0",
+		"@wordpress/escape-html": "^2.30.0",
+		"@wordpress/hooks": "^3.30.0",
+		"@wordpress/html-entities": "^3.30.0",
+		"@wordpress/i18n": "^4.30.0",
+		"@wordpress/icons": "^9.21.0",
+		"@wordpress/keycodes": "^3.30.0",
+		"@wordpress/notices": "^3.30.0",
+		"@wordpress/primitives": "^3.28.0",
+		"@wordpress/private-apis": "^0.12.0",
+		"@wordpress/reusable-blocks": "^4.7.0",
+		"@wordpress/rich-text": "^6.7.0",
+		"@wordpress/server-side-render": "^4.7.0",
+		"@wordpress/url": "^3.31.0",
+		"@wordpress/viewport": "^5.7.0",
+		"@wordpress/wordcount": "^3.30.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d5e03a74b79e3ca84afda24375474a103a063ee4"
+	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
 }

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

@@ -57,7 +57,19 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       }
     >
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={
+            {
+              "fill": "gray",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
       </View>
       <View
         style={{}}
@@ -66,7 +78,15 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           59IrU0WJtq
         </Text>
         <View>
-          Svg
+          <Svg
+            height={16}
+            style={{}}
+            viewBox="-2 -2 24 24"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
           <Text
             style={{}}
           >
@@ -221,7 +241,19 @@ exports[`Audio block renders audio file without crashing 1`] = `
       }
     >
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={
+            {
+              "fill": "gray",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
       </View>
       <View
         style={{}}
@@ -394,7 +426,15 @@ exports[`Audio block renders placeholder without crashing 1`] = `
         <View
           style={{}}
         >
-          Svg
+          <Svg
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
       <Text>

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Audio block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Audio block transformations to File block 1`] = `
+"<!-- wp:file {"id":5,"href":"https://cldup.com/59IrU0WJtq.mp3"} -->
+<div class="wp-block-file"><a href="https://cldup.com/59IrU0WJtq.mp3" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->"
+`;
+
+exports[`Audio block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Audio';
+const initialHtml = `
+<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'File', ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: false,
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reusable block block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:block {"ref":130} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Reusable block block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:block {"ref":130} /--></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Reusable block';
+const initialHtml = `
+<!-- wp:block {"ref":130} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/buttons/block.json

@@ -10,6 +10,7 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
 		"spacing": {
 			"blockGap": true,