@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

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

@@ -74,19 +74,30 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.block-editor-template-part__selection-modal {
+  z-index: 1000001;
+}
 @media (min-width: 600px) {
-  .block-editor-template-part__selection-modal {
+  .block-editor-template-part__selection-modal .components-modal__frame {
     width: calc(100% - 32px);
     height: calc(100% - 120px);
   }
 }
 @media (min-width: 782px) {
-  .block-editor-template-part__selection-modal {
+  .block-editor-template-part__selection-modal .components-modal__frame {
     width: 750px;
   }
 }
 @media (min-width: 960px) {
-  .block-editor-template-part__selection-modal {
+  .block-editor-template-part__selection-modal .components-modal__frame {
     height: 70%;
   }
+}
+
+.block-library-template-part__selection-search {
+  background: #fff;
+  position: sticky;
+  top: 0;
+  padding: 16px 0;
+  z-index: 1;
 }

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

@@ -74,6 +74,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-video {
+  box-sizing: border-box;
+}
 .wp-block-video video {
   width: 100%;
 }

package/build-style/video/style.css

@@ -74,6 +74,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-video {
+  box-sizing: border-box;
+}
 .wp-block-video video {
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.10.0",
+	"version": "7.12.2-next.d6164808d3.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,39 +34,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.13.0",
-		"@wordpress/api-fetch": "^6.10.0",
-		"@wordpress/autop": "^3.13.0",
-		"@wordpress/blob": "^3.13.0",
-		"@wordpress/block-editor": "^9.5.0",
-		"@wordpress/blocks": "^11.12.0",
-		"@wordpress/components": "^19.15.0",
-		"@wordpress/compose": "^5.11.0",
-		"@wordpress/core-data": "^4.11.0",
-		"@wordpress/data": "^6.13.0",
-		"@wordpress/date": "^4.13.0",
-		"@wordpress/deprecated": "^3.13.0",
-		"@wordpress/dom": "^3.13.0",
-		"@wordpress/element": "^4.11.0",
-		"@wordpress/hooks": "^3.13.0",
-		"@wordpress/html-entities": "^3.13.0",
-		"@wordpress/i18n": "^4.13.0",
-		"@wordpress/icons": "^9.4.0",
-		"@wordpress/keycodes": "^3.13.0",
-		"@wordpress/notices": "^3.13.0",
-		"@wordpress/primitives": "^3.11.0",
-		"@wordpress/reusable-blocks": "^3.11.0",
-		"@wordpress/rich-text": "^5.11.0",
-		"@wordpress/server-side-render": "^3.11.0",
-		"@wordpress/url": "^3.14.0",
-		"@wordpress/viewport": "^4.11.0",
+		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
+		"@wordpress/autop": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/blob": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/block-editor": "^9.7.1-next.d6164808d3.0",
+		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
+		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
+		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/core-data": "^4.14.1-next.d6164808d3.0",
+		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
+		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
+		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/primitives": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/reusable-blocks": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/server-side-render": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
+		"@wordpress/viewport": "^4.13.1-next.d6164808d3.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
-		"fast-average-color": "4.3.0",
+		"fast-average-color": "^4.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
-		"moment": "^2.22.1",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

package/src/archives/block.json

@@ -11,6 +11,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
+		},
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false
@@ -22,7 +26,11 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-archives-editor"
 }

package/src/archives/edit.js

@@ -12,7 +12,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
-	const { showPostCounts, displayAsDropdown, type } = attributes;
+	const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;
 
 	return (
 		<>
@@ -27,6 +27,17 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							} )
 						}
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ () =>
+								setAttributes( {
+									showLabel: ! showLabel,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }

package/src/archives/index.php

@@ -62,9 +62,11 @@ function render_block_core_archives( $attributes ) {
 				break;
 		}
 
-		$block_content = '<label for="' . esc_attr( $dropdown_id ) . '">' . esc_html( $title ) . '</label>
-	<select id="' . esc_attr( $dropdown_id ) . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
-	<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
+		$show_label = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+
+		$block_content = '<label for="' . $dropdown_id . '" class="wp-block-archives__label' . $show_label . '">' . esc_html( $title ) . '</label>
+		<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+		<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
 
 		return sprintf(
 			'<div %1$s>%2$s</div>',

package/src/audio/block.json

@@ -48,6 +48,10 @@
 			"spacing": {
 				"margin": "0 0 1em 0"
 			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
 		}
 	},
 	"editorStyle": "wp-block-audio-editor",

package/src/audio/style.scss

@@ -1,4 +1,6 @@
 .wp-block-audio {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.

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

@@ -97,7 +97,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -277,7 +284,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}

package/src/block/edit.js

@@ -18,7 +18,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
@@ -31,8 +32,7 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -110,7 +110,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			{ canRemove && (
 				<BlockControls>
 					<ToolbarGroup>

package/src/block/edit.native.js

@@ -27,7 +27,8 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	InnerBlocks,
 	Warning,
 	store as blockEditorStore,
@@ -48,8 +49,7 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -214,7 +214,7 @@ export default function ReusableBlockEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }

package/src/button/block.json

@@ -89,7 +89,7 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button .wp-block-button__link"
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

package/src/button/deprecated.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -70,33 +69,33 @@ const migrateCustomColorsAndGradients = ( attributes ) => {
 	if ( attributes.customGradient ) {
 		style.color.gradient = attributes.customGradient;
 	}
+
+	const {
+		customTextColor,
+		customBackgroundColor,
+		customGradient,
+		...restAttributes
+	} = attributes;
+
 	return {
-		...omit( attributes, [
-			'customTextColor',
-			'customBackgroundColor',
-			'customGradient',
-		] ),
+		...restAttributes,
 		style,
 	};
 };
 
 const oldColorsMigration = ( attributes ) => {
-	return migrateCustomColorsAndGradients(
-		omit(
-			{
-				...attributes,
-				customTextColor:
-					attributes.textColor && '#' === attributes.textColor[ 0 ]
-						? attributes.textColor
-						: undefined,
-				customBackgroundColor:
-					attributes.color && '#' === attributes.color[ 0 ]
-						? attributes.color
-						: undefined,
-			},
-			[ 'color', 'textColor' ]
-		)
-	);
+	const { color, textColor, ...restAttributes } = {
+		...attributes,
+		customTextColor:
+			attributes.textColor && '#' === attributes.textColor[ 0 ]
+				? attributes.textColor
+				: undefined,
+		customBackgroundColor:
+			attributes.color && '#' === attributes.color[ 0 ]
+				? attributes.color
+				: undefined,
+	};
+	return migrateCustomColorsAndGradients( restAttributes );
 };
 
 const blockAttributes = {

package/src/button/edit.js

@@ -221,6 +221,7 @@ function ButtonEdit( props ) {
 					anchorRef={ ref?.current }
 					focusOnMount={ isEditingURL ? 'firstElement' : false }
 					__unstableSlotName={ '__unstable-block-tools-after' }
+					__unstableShift
 				>
 					<LinkControl
 						className="wp-block-navigation-link__inline-link-input"

package/src/button/style.scss

@@ -8,7 +8,6 @@ $blocks-block__margin: 0.5em;
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
-	text-decoration: none;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 
@@ -32,6 +31,9 @@ $blocks-block__margin: 0.5em;
 // These rules are set to zero specificity to keep the default styles for buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-button__link) {
+	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	text-decoration: none;
+
 	// 100% causes an oval, but any explicit but really high value retains the pill shape.
 	border-radius: 9999px;
 
@@ -100,18 +102,18 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.is-style-outline > :where(.wp-block-button__link),
-:where(.wp-block-button__link).is-style-outline {
+.wp-block-button.is-style-outline > .wp-block-button__link,
+.wp-block-button .wp-block-button__link.is-style-outline {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }
 
-.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
 	color: currentColor;
 }
 
-.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button__link.is-style-outline:not(.has-background) {
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
+.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
 	background-color: transparent;
 }

package/src/buttons/edit.js

@@ -53,11 +53,7 @@ function ButtonsEdit( { attributes: { layout = {} } } ) {
 		templateInsertUpdatesSelection: true,
 	} );
 
-	return (
-		<>
-			<div { ...innerBlocksProps } />
-		</>
-	);
+	return <div { ...innerBlocksProps } />;
 }
 
 export default ButtonsEdit;

package/src/calendar/edit.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
 import memoize from 'memize';
 
 /**
@@ -15,14 +14,22 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Returns the year and month of a specified date.
+ *
+ * @see `WP_REST_Posts_Controller::prepare_date_response()`.
+ *
+ * @param {string} date Date in `ISO8601/RFC3339` format.
+ * @return {Object} Year and date of the specified date.
+ */
 const getYearMonth = memoize( ( date ) => {
 	if ( ! date ) {
 		return {};
 	}
-	const momentDate = moment( date );
+	const dateObj = new Date( date );
 	return {
-		year: momentDate.year(),
-		month: momentDate.month() + 1,
+		year: dateObj.getFullYear(),
+		month: dateObj.getMonth() + 1,
 	};
 } );
 

package/src/calendar/index.php

@@ -30,8 +30,8 @@ function render_block_core_calendar( $attributes ) {
 	if ( isset( $attributes['month'] ) && isset( $attributes['year'] ) ) {
 		$permalink_structure = get_option( 'permalink_structure' );
 		if (
-			strpos( $permalink_structure, '%monthnum%' ) !== false &&
-			strpos( $permalink_structure, '%year%' ) !== false
+			str_contains( $permalink_structure, '%monthnum%' ) &&
+			str_contains( $permalink_structure, '%year%' )
 		) {
 			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 			$monthnum = $attributes['month'];

package/src/categories/block.json

@@ -30,7 +30,20 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-categories-editor",
 	"style": "wp-block-categories"

package/src/categories/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { times, unescape } from 'lodash';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -114,7 +114,7 @@ export default function CategoriesEdit( {
 		const childCategories = getCategoriesList( id );
 		return [
 			<option key={ id }>
-				{ times( level * 3, () => '\xa0' ) }
+				{ Array.from( { length: level * 3 } ).map( () => '\xa0' ) }
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
 			</option>,

package/src/code/block.json

@@ -18,10 +18,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/column/block.json

@@ -51,6 +51,19 @@
 				"width": true
 			}
 		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"__experimentalLayout": true
 	}
 }

package/src/columns/block.json

@@ -57,6 +57,19 @@
 				"style": true,
 				"width": true
 			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

package/src/columns/deprecated.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -49,8 +48,12 @@ const migrateCustomColors = ( attributes ) => {
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
+
+	const { customTextColor, customBackgroundColor, ...restAttributes } =
+		attributes;
+
 	return {
-		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
+		...restAttributes,
 		style,
 		isStackedOnMobile: true,
 	};
@@ -168,9 +171,11 @@ export default [
 				createBlock( 'core/column', {}, columnBlocks )
 			);
 
+			const { columns: ignoredColumns, ...restAttributes } = attributes;
+
 			return [
 				{
-					...omit( attributes, [ 'columns' ] ),
+					...restAttributes,
 					isStackedOnMobile: true,
 				},
 				migratedInnerBlocks,
@@ -194,8 +199,9 @@ export default [
 			},
 		},
 		migrate( attributes, innerBlocks ) {
+			const { columns, ...restAttributes } = attributes;
 			attributes = {
-				...omit( attributes, [ 'columns' ] ),
+				...restAttributes,
 				isStackedOnMobile: true,
 			};