@wordpress/block-library 8.4.0 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.4.0",
+	"version": "8.5.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,34 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.27.0",
-		"@wordpress/api-fetch": "^6.24.0",
-		"@wordpress/autop": "^3.27.0",
-		"@wordpress/blob": "^3.27.0",
-		"@wordpress/block-editor": "^11.4.0",
-		"@wordpress/blocks": "^12.4.0",
-		"@wordpress/components": "^23.4.0",
-		"@wordpress/compose": "^6.4.0",
-		"@wordpress/core-data": "^6.4.0",
-		"@wordpress/data": "^8.4.0",
-		"@wordpress/date": "^4.27.0",
-		"@wordpress/deprecated": "^3.27.0",
-		"@wordpress/dom": "^3.27.0",
-		"@wordpress/element": "^5.4.0",
-		"@wordpress/escape-html": "^2.27.0",
-		"@wordpress/hooks": "^3.27.0",
-		"@wordpress/html-entities": "^3.27.0",
-		"@wordpress/i18n": "^4.27.0",
-		"@wordpress/icons": "^9.18.0",
-		"@wordpress/keycodes": "^3.27.0",
-		"@wordpress/notices": "^3.27.0",
-		"@wordpress/primitives": "^3.25.0",
-		"@wordpress/private-apis": "^0.9.0",
-		"@wordpress/reusable-blocks": "^4.4.0",
-		"@wordpress/rich-text": "^6.4.0",
-		"@wordpress/server-side-render": "^4.4.0",
-		"@wordpress/url": "^3.28.0",
-		"@wordpress/viewport": "^5.4.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",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -77,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
+	"gitHead": "d5e03a74b79e3ca84afda24375474a103a063ee4"
 }

package/src/archives/edit.js

@@ -19,6 +19,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ () =>
@@ -29,6 +30,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayAsDropdown && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show label' ) }
 							checked={ showLabel }
 							onChange={ () =>
@@ -39,6 +41,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ () =>

package/src/audio/edit.js

@@ -207,12 +207,14 @@ function AudioEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Autoplay' ) }
 						onChange={ toggleAttribute( 'autoplay' ) }
 						checked={ autoplay }
 						help={ getAutoplayHelp }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Loop' ) }
 						onChange={ toggleAttribute( 'loop' ) }
 						checked={ loop }

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

@@ -3,7 +3,7 @@
 exports[`Audio block renders audio block error state without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }
@@ -20,7 +20,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -28,7 +28,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -37,7 +37,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -51,7 +51,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
@@ -60,7 +60,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         Svg
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
@@ -68,7 +68,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         <View>
           Svg
           <Text
-            style={Object {}}
+            style={{}}
           >
             Failed to insert audio file. Please tap for options.
           </Text>
@@ -78,8 +78,8 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -91,7 +91,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -99,7 +99,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -107,9 +107,9 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -140,14 +140,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           placeholder="Add caption"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -156,7 +156,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -167,7 +167,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
 exports[`Audio block renders audio file without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }
@@ -184,7 +184,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -192,7 +192,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -201,7 +201,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -215,7 +215,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
@@ -224,14 +224,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         Svg
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
         </Text>
         <View>
           <Text
-            style={Object {}}
+            style={{}}
           >
             MP3 audio file
           </Text>
@@ -253,7 +253,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       >
         <Text
           style={
-            Object {
+            {
               "color": "white",
             }
           }
@@ -265,8 +265,8 @@ exports[`Audio block renders audio file without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -278,7 +278,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -286,7 +286,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -294,9 +294,9 @@ exports[`Audio block renders audio file without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -327,14 +327,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
           placeholder="Add caption"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -343,7 +343,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -355,7 +355,7 @@ exports[`Audio block renders placeholder without crashing 1`] = `
 <View>
   <View
     style={
-      Object {
+      {
         "flex": 1,
       }
     }
@@ -374,8 +374,8 @@ exports[`Audio block renders placeholder without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Array [
+        [
+          [
             undefined,
             undefined,
             undefined,
@@ -386,13 +386,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "fill": "gray",
           }
         }
       >
         <View
-          style={Object {}}
+          style={{}}
         >
           Svg
         </View>

package/src/avatar/edit.js

@@ -48,6 +48,7 @@ const AvatarInspectorControls = ( {
 				value={ attributes?.size }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link to user profile' ) }
 				onChange={ () =>
 					setAttributes( { isLink: ! attributes.isLink } )
@@ -122,7 +123,6 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					{ ...borderProps }
 					className={ classnames(
 						'avatar',
 						'avatar-' + attributes.size,
@@ -130,9 +130,7 @@ const ResizableAvatar = ( {
 						'wp-block-avatar__image',
 						borderProps.className
 					) }
-					style={ {
-						...borderProps.style, // Border radius, width and style.
-					} }
+					style={ borderProps.style }
 				/>
 			</ResizableBox>
 		</div>

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

@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Buttons block justify content sets Justify items center option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"center\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items left option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"left\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items right option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"right\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button /-->
 
 <!-- wp:button /--></div>
 <!-- /wp:buttons -->
@@ -32,18 +32,18 @@ exports[`Buttons block when a button is shown adds another button using the inli
 
 exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button /-->
 
 <!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Hello!</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="" style="border-radius:6px">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

package/src/categories/edit.js

@@ -143,27 +143,32 @@ export default function CategoriesEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show only top level categories' ) }
 						checked={ showOnlyTopLevel }
 						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show empty categories' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
 					{ ! showOnlyTopLevel && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
 							checked={ showHierarchy }
 							onChange={ toggleAttribute( 'showHierarchy' ) }

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

@@ -2,12 +2,12 @@
 
 exports[`Code renders given text without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<pre class="wp-block-code"><code>Sample text</code></pre>
 <!-- /wp:code -->"
 `;
 
 exports[`Code renders without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code></code></pre>
+<pre class="wp-block-code"><code></code></pre>
 <!-- /wp:code -->"
 `;

package/src/columns/edit.js

@@ -110,6 +110,7 @@ function ColumnsEditContainer( {
 						</Notice>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Stack on mobile' ) }
 						checked={ isStackedOnMobile }
 						onChange={ () =>