@wordpress/block-library 8.13.0 → 8.15.0

package/build-style/style-rtl.css

@@ -1030,8 +1030,10 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details > *:not(summary) {
-  margin-block-start: var(--wp--style--block-gap);
-  margin-block-end: 0;
+  -webkit-margin-before: var(--wp--style--block-gap);
+          margin-block-start: var(--wp--style--block-gap);
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
 }
 
 .wp-block-details > *:last-child {
@@ -1615,11 +1617,12 @@ h6.has-background {
   width: 100vw;
   height: 100vh;
   visibility: hidden;
+  cursor: zoom-out;
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: 12.5px;
-  left: 12.5px;
+  top: calc(env(safe-area-inset-top) + 12.5px);
+  left: calc(env(safe-area-inset-left) + 12.5px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
@@ -1655,6 +1658,19 @@ h6.has-background {
   background-color: white;
   opacity: 0.9;
 }
+.wp-lightbox-overlay.fade .wp-block-image {
+  padding: 40px 0;
+}
+@media screen and (min-width: 480px) {
+  .wp-lightbox-overlay.fade .wp-block-image {
+    padding: 40px;
+  }
+}
+@media screen and (min-width: 1920px) {
+  .wp-lightbox-overlay.fade .wp-block-image {
+    padding: 40px 80px;
+  }
+}
 .wp-lightbox-overlay.fade.active {
   visibility: visible;
   animation: both turn-on-visibility 0.25s;
@@ -2036,6 +2052,7 @@ ul.has-background {
   padding: 0;
 }
 .wp-block-navigation .wp-block-navigation-item {
+  background-color: inherit;
   display: flex;
   align-items: center;
   position: relative;
@@ -2288,10 +2305,17 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
   background-color: #fff;
-  color: #000;
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
+.wp-block-navigation.has-background .wp-block-navigation__submenu-container {
+  background-color: inherit;
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
+  color: #000;
+}
+
 .wp-block-navigation__container {
   display: flex;
   flex-wrap: var(--navigation-layout-wrap, wrap);
@@ -2332,7 +2356,7 @@ button.wp-block-navigation-item__content {
   left: 0;
   bottom: 0;
 }
-.wp-block-navigation__responsive-container .wp-block-navigation-link a {
+.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a) {
   color: inherit;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
@@ -2411,6 +2435,7 @@ button.wp-block-navigation-item__content {
   align-items: var(--navigation-layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
   color: inherit !important;
@@ -2438,6 +2463,9 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
   background-color: #fff;
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
   color: #000;
 }
 
@@ -2920,10 +2948,12 @@ p.has-background {
   margin-right: 0;
 }
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
-  margin-inline-start: auto;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
 }
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
-  margin-inline-end: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }
 .wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
   margin-left: 1ch;
@@ -3798,15 +3828,16 @@ pre.wp-block-verse {
   counter-reset: footnotes;
 }
 
-.fn {
+a[data-fn].fn {
   vertical-align: super;
   font-size: smaller;
   counter-increment: footnotes;
-  display: inline-block;
+  display: inline-flex;
+  text-decoration: none;
   text-indent: -9999999px;
 }
 
-.fn::after {
+a[data-fn].fn::after {
   content: "[" counter(footnotes) "]";
   text-indent: 0;
   float: right;

package/build-style/style.css

@@ -1037,8 +1037,10 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details > *:not(summary) {
-  margin-block-start: var(--wp--style--block-gap);
-  margin-block-end: 0;
+  -webkit-margin-before: var(--wp--style--block-gap);
+          margin-block-start: var(--wp--style--block-gap);
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
 }
 
 .wp-block-details > *:last-child {
@@ -1629,11 +1631,12 @@ h6.has-background {
   width: 100vw;
   height: 100vh;
   visibility: hidden;
+  cursor: zoom-out;
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: 12.5px;
-  right: 12.5px;
+  top: calc(env(safe-area-inset-top) + 12.5px);
+  right: calc(env(safe-area-inset-right) + 12.5px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
@@ -1669,6 +1672,19 @@ h6.has-background {
   background-color: white;
   opacity: 0.9;
 }
+.wp-lightbox-overlay.fade .wp-block-image {
+  padding: 40px 0;
+}
+@media screen and (min-width: 480px) {
+  .wp-lightbox-overlay.fade .wp-block-image {
+    padding: 40px;
+  }
+}
+@media screen and (min-width: 1920px) {
+  .wp-lightbox-overlay.fade .wp-block-image {
+    padding: 40px 80px;
+  }
+}
 .wp-lightbox-overlay.fade.active {
   visibility: visible;
   animation: both turn-on-visibility 0.25s;
@@ -2066,6 +2082,7 @@ ul.has-background {
   padding: 0;
 }
 .wp-block-navigation .wp-block-navigation-item {
+  background-color: inherit;
   display: flex;
   align-items: center;
   position: relative;
@@ -2318,10 +2335,17 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
   background-color: #fff;
-  color: #000;
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
+.wp-block-navigation.has-background .wp-block-navigation__submenu-container {
+  background-color: inherit;
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
+  color: #000;
+}
+
 .wp-block-navigation__container {
   display: flex;
   flex-wrap: var(--navigation-layout-wrap, wrap);
@@ -2362,7 +2386,7 @@ button.wp-block-navigation-item__content {
   right: 0;
   bottom: 0;
 }
-.wp-block-navigation__responsive-container .wp-block-navigation-link a {
+.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a) {
   color: inherit;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
@@ -2441,6 +2465,7 @@ button.wp-block-navigation-item__content {
   align-items: var(--navigation-layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
   color: inherit !important;
@@ -2468,6 +2493,9 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
   background-color: #fff;
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
   color: #000;
 }
 
@@ -2952,10 +2980,12 @@ p.has-background {
   margin-right: 0;
 }
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
-  margin-inline-start: auto;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
 }
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
-  margin-inline-end: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }
 .wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
   margin-right: 1ch;
@@ -3833,15 +3863,16 @@ pre.wp-block-verse {
   counter-reset: footnotes;
 }
 
-.fn {
+a[data-fn].fn {
   vertical-align: super;
   font-size: smaller;
   counter-increment: footnotes;
-  display: inline-block;
+  display: inline-flex;
+  text-decoration: none;
   text-indent: -9999999px;
 }
 
-.fn::after {
+a[data-fn].fn::after {
   content: "[" counter(footnotes) "]";
   text-indent: 0;
   float: left;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.13.0",
+	"version": "8.15.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,52 +27,48 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js",
-		"{src,build,build-module}/utils/interactivity/index.js"
+		"{src,build,build-module}/*/init.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@preact/signals": "^1.1.3",
-		"@wordpress/a11y": "^3.36.0",
-		"@wordpress/api-fetch": "^6.33.0",
-		"@wordpress/autop": "^3.36.0",
-		"@wordpress/blob": "^3.36.0",
-		"@wordpress/block-editor": "^12.4.0",
-		"@wordpress/blocks": "^12.13.0",
-		"@wordpress/components": "^25.2.0",
-		"@wordpress/compose": "^6.13.0",
-		"@wordpress/core-data": "^6.13.0",
-		"@wordpress/data": "^9.6.0",
-		"@wordpress/date": "^4.36.0",
-		"@wordpress/deprecated": "^3.36.0",
-		"@wordpress/dom": "^3.36.0",
-		"@wordpress/element": "^5.13.0",
-		"@wordpress/escape-html": "^2.36.0",
-		"@wordpress/hooks": "^3.36.0",
-		"@wordpress/html-entities": "^3.36.0",
-		"@wordpress/i18n": "^4.36.0",
-		"@wordpress/icons": "^9.27.0",
-		"@wordpress/keycodes": "^3.36.0",
-		"@wordpress/notices": "^4.4.0",
-		"@wordpress/primitives": "^3.34.0",
-		"@wordpress/private-apis": "^0.18.0",
-		"@wordpress/reusable-blocks": "^4.13.0",
-		"@wordpress/rich-text": "^6.13.0",
-		"@wordpress/server-side-render": "^4.13.0",
-		"@wordpress/url": "^3.37.0",
-		"@wordpress/viewport": "^5.13.0",
-		"@wordpress/wordcount": "^3.36.0",
+		"@wordpress/a11y": "^3.38.0",
+		"@wordpress/api-fetch": "^6.35.0",
+		"@wordpress/autop": "^3.38.0",
+		"@wordpress/blob": "^3.38.0",
+		"@wordpress/block-editor": "^12.6.0",
+		"@wordpress/blocks": "^12.15.0",
+		"@wordpress/components": "^25.4.0",
+		"@wordpress/compose": "^6.15.0",
+		"@wordpress/core-data": "^6.15.0",
+		"@wordpress/data": "^9.8.0",
+		"@wordpress/date": "^4.38.0",
+		"@wordpress/deprecated": "^3.38.0",
+		"@wordpress/dom": "^3.38.0",
+		"@wordpress/element": "^5.15.0",
+		"@wordpress/escape-html": "^2.38.0",
+		"@wordpress/hooks": "^3.38.0",
+		"@wordpress/html-entities": "^3.38.0",
+		"@wordpress/i18n": "^4.38.0",
+		"@wordpress/icons": "^9.29.0",
+		"@wordpress/interactivity": "^1.2.0",
+		"@wordpress/keycodes": "^3.38.0",
+		"@wordpress/notices": "^4.6.0",
+		"@wordpress/primitives": "^3.36.0",
+		"@wordpress/private-apis": "^0.20.0",
+		"@wordpress/reusable-blocks": "^4.15.0",
+		"@wordpress/rich-text": "^6.15.0",
+		"@wordpress/server-side-render": "^4.15.0",
+		"@wordpress/url": "^3.39.0",
+		"@wordpress/viewport": "^5.15.0",
+		"@wordpress/wordcount": "^3.38.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
-		"deepsignal": "^1.3.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
-		"lodash": "^4.17.21",
 		"memize": "^2.1.0",
 		"micromodal": "^0.4.10",
-		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2",
 		"uuid": "^8.3.0"
 	},
@@ -83,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/src/archives/block.json

@@ -29,7 +29,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/audio/block.json

@@ -49,7 +49,11 @@
 		"align": true,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		}
 	},
 	"editorStyle": "wp-block-audio-editor",

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

@@ -159,6 +159,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -358,6 +359,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -393,22 +395,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
     }
   >
     <View
-      accessibilityHint="Double tap to select an audio file"
-      accessibilityLabel="Audio block. Empty"
-      accessibilityRole="button"
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         [
           [
-            undefined,
+            [
+              undefined,
+              undefined,
+            ],
             undefined,
             undefined,
           ],
@@ -416,33 +409,65 @@ exports[`Audio block renders placeholder without crashing 1`] = `
         ]
       }
     >
+      <View>
+        <View
+          style={
+            {
+              "fill": "black",
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <Svg
+              fill="black"
+              height={24}
+              style={{}}
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              Path
+            </Svg>
+          </View>
+        </View>
+        <Text>
+          Audio
+        </Text>
+      </View>
       <View
+        accessibilityHint="Double tap to select an audio file"
+        accessibilityLabel="Audio block. Empty"
+        accessibilityRole="button"
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 22,
+            "left": 22,
+            "right": 22,
+            "top": 22,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           {
-            "fill": "gray",
+            "opacity": 1,
           }
         }
       >
-        <View
-          style={{}}
-        >
-          <Svg
-            height={24}
-            style={{}}
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            Path
-          </Svg>
-        </View>
+        <Text>
+          Add audio
+        </Text>
       </View>
-      <Text>
-        Audio
-      </Text>
-      <Text>
-        ADD AUDIO
-      </Text>
     </View>
   </View>
 </View>

package/src/avatar/block.json

@@ -48,6 +48,6 @@
 			"__experimentalDuotone": "img"
 		}
 	},
-	"editorStyle": "wp-block-avatar",
+	"editorStyle": "wp-block-avatar-editor",
 	"style": "wp-block-avatar"
 }

package/src/avatar/edit.js

@@ -36,6 +36,7 @@ const AvatarInspectorControls = ( {
 		<PanelBody title={ __( 'Settings' ) }>
 			<RangeControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'Image size' ) }
 				onChange={ ( newSize ) =>
 					setAttributes( {

package/src/block/block.json

@@ -4,7 +4,8 @@
 	"name": "core/block",
 	"title": "Pattern",
 	"category": "reusable",
-	"description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.",
+	"description": "Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.",
+	"keywords": [ "reusable" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {

package/src/block/edit.js

@@ -119,8 +119,8 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 							onClick={ () => convertBlockToStatic( clientId ) }
 							label={
 								innerBlockCount > 1
-									? __( 'Convert to regular blocks' )
-									: __( 'Convert to regular block' )
+									? __( 'Detach patterns' )
+									: __( 'Detach pattern' )
 							}
 							icon={ ungroup }
 							showTooltip

package/src/block/edit.native.js

@@ -132,12 +132,8 @@ export default function ReusableBlockEdit( {
 	}
 
 	const onConvertToRegularBlocks = useCallback( () => {
-		const successNotice =
-			innerBlockCount > 1
-				? /* translators: %s: name of the reusable block */
-				  __( '%s converted to regular blocks' )
-				: /* translators: %s: name of the reusable block */
-				  __( '%s converted to regular block' );
+		/* translators: %s: name of the synced block */
+		const successNotice = __( '%s detached' );
 		createSuccessNotice( sprintf( successNotice, title ) );
 
 		clearSelectedBlock();
@@ -152,14 +148,14 @@ export default function ReusableBlockEdit( {
 				? sprintf(
 						/* translators: %s: name of the host app (e.g. WordPress) */
 						__(
-							'Editing reusable blocks is not yet supported on %s for Android'
+							'Editing synced patterns is not yet supported on %s for Android'
 						),
 						hostAppNamespace
 				  )
 				: sprintf(
 						/* translators: %s: name of the host app (e.g. WordPress) */
 						__(
-							'Editing reusable blocks is not yet supported on %s for iOS'
+							'Editing synced patterns is not yet supported on %s for iOS'
 						),
 						hostAppNamespace
 				  );
@@ -182,17 +178,17 @@ export default function ReusableBlockEdit( {
 					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
 						{ innerBlockCount > 1
 							? __(
-									'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
+									'Alternatively, you can detach and edit these blocks separately by tapping “Detach patterns”.'
 							  )
 							: __(
-									'Alternatively, you can detach and edit this block separately by tapping “Convert to regular block”.'
+									'Alternatively, you can detach and edit this block separately by tapping “Detach pattern”.'
 							  ) }
 					</Text>
 					<TextControl
 						label={
 							innerBlockCount > 1
-								? __( 'Convert to regular blocks' )
-								: __( 'Convert to regular block' )
+								? __( 'Detach patterns' )
+								: __( 'Detach pattern' )
 						}
 						separatorType="topFullWidth"
 						onPress={ onConvertToRegularBlocks }

package/src/block/editor.native.scss

@@ -19,8 +19,8 @@
 	background-color: $light-gray-400;
 	height: 1px;
 	position: absolute;
-	left: -$block-selected-to-content + $block-selected-border-width;
-	right: -$block-selected-to-content + $block-selected-border-width;
+	left: -$grid-unit-05;
+	right: -$grid-unit-05;
 	bottom: 16;
 }
 

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

@@ -56,8 +56,8 @@ afterAll( () => {
 	} );
 } );
 
-describe( 'Reusable block', () => {
-	it( 'inserts a reusable block', async () => {
+describe( 'Synced patterns', () => {
+	it( 'inserts a synced pattern', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const reusableBlockMock1 = getMockedReusableBlock( 1 );
 		const reusableBlockMock2 = getMockedReusableBlock( 2 );
@@ -86,7 +86,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( await screen.findByLabelText( 'Add block' ) );
 
 		// Navigate to reusable tab.
-		const reusableSegment = await screen.findByText( 'Reusable' );
+		const reusableSegment = await screen.findByText( 'Synced patterns' );
 		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -98,7 +98,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( reusableSegment );
 
 		const reusableBlockList = screen.getByTestId(
-			'InserterUI-ReusableBlocks'
+			'InserterUI-SyncedPatterns'
 		);
 		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {