@wordpress/block-library 7.12.0 → 7.13.1-next.957ca95e4c.0

package/build-style/style.css

@@ -83,6 +83,9 @@
   text-align: center;
 }
 
+.wp-block-audio {
+  box-sizing: border-box;
+}
 .wp-block-audio figcaption {
   margin-top: 0.5em;
   margin-bottom: 1em;
@@ -93,16 +96,12 @@
 }
 
 .wp-block-button__link {
-  box-shadow: none;
   cursor: pointer;
   display: inline-block;
   text-align: center;
   word-break: break-word;
   box-sizing: border-box;
 }
-.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .wp-block-button__link:visited {
-  color: #fff;
-}
 .wp-block-button__link.aligncenter {
   text-align: center;
 }
@@ -112,6 +111,7 @@
 }
 
 :where(.wp-block-button__link) {
+  box-shadow: none;
   text-decoration: none;
   border-radius: 9999px;
   padding: calc(0.667em + 2px) calc(1.333em + 2px);
@@ -160,19 +160,19 @@
   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;
 }
 
@@ -1631,6 +1631,7 @@ ul.has-background {
   display: grid;
   grid-template-columns: 50% 1fr;
   grid-template-rows: auto;
+  box-sizing: border-box;
 }
 .wp-block-media-text.has-media-on-the-right {
   grid-template-columns: 1fr 50%;
@@ -1964,12 +1965,12 @@ button.wp-block-navigation-item__content {
 /**
  * Paddings
  */
-:where(.wp-block-navigation.has-background .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),
 :where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
   padding: 0.5em 1em;
 }
 
-:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
   padding: 0.5em 1em;
 }
@@ -2055,7 +2056,10 @@ button.wp-block-navigation-item__content {
   display: flex;
   flex-direction: column;
   background-color: inherit;
-  padding: 2rem;
+  padding-top: var(--wp--style--root--padding-top, 2rem);
+  padding-right: var(--wp--style--root--padding-right, 2rem);
+  padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
+  padding-left: var(--wp--style--root--padding-left, 2rem);
   overflow: auto;
   z-index: 100000;
 }
@@ -2150,6 +2154,7 @@ button.wp-block-navigation-item__content {
   border: none;
   margin: 0;
   padding: 0;
+  text-transform: inherit;
 }
 .wp-block-navigation__responsive-container-open svg,
 .wp-block-navigation__responsive-container-close svg {
@@ -2178,6 +2183,9 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+  max-width: var(--wp--style--global--wide-size, 100%);
+  margin-left: auto;
+  margin-right: auto;
 }
 .wp-block-navigation__responsive-close:focus {
   outline: none;
@@ -2351,6 +2359,10 @@ p.has-background {
   margin-left: 0.5em;
 }
 
+.wp-block-post-date {
+  box-sizing: border-box;
+}
+
 .wp-block-post-excerpt__more-link {
   display: inline-block;
 }
@@ -2367,6 +2379,7 @@ p.has-background {
   width: 100%;
   height: auto;
   vertical-align: bottom;
+  box-sizing: border-box;
 }
 .wp-block-post-featured-image.alignwide img, .wp-block-post-featured-image.alignfull img {
   width: 100%;
@@ -2378,6 +2391,7 @@ p.has-background {
 
 .wp-block-post-title {
   word-break: break-word;
+  box-sizing: border-box;
 }
 .wp-block-post-title a {
   display: inline-block;
@@ -2403,16 +2417,9 @@ p.has-background {
 .wp-block-pullquote cite {
   color: inherit;
 }
-.wp-block-pullquote.has-text-align-left, .wp-block-pullquote.has-text-align-right, .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright {
+.wp-block-pullquote.alignleft, .wp-block-pullquote.alignright {
   max-width: 420px;
 }
-.wp-block-pullquote.has-text-align-left p, .wp-block-pullquote.has-text-align-right p, .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p {
-  font-size: 1.25em;
-}
-.wp-block-pullquote p {
-  font-size: 1.75em;
-  line-height: 1.6;
-}
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
   position: relative;
@@ -2526,6 +2533,10 @@ p.has-background {
   justify-content: center;
 }
 
+.wp-block-query-title {
+  box-sizing: border-box;
+}
+
 .wp-block-quote {
   box-sizing: border-box;
   overflow-wrap: break-word;
@@ -2894,7 +2905,7 @@ ul.wp-block-rss.is-grid li {
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-reddit {
-  background-color: #fe4500;
+  background-color: #ff4500;
   color: #fff;
 }
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-skype {
@@ -3042,7 +3053,7 @@ ul.wp-block-rss.is-grid li {
   color: #ef4155;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-reddit {
-  color: #fe4500;
+  color: #ff4500;
 }
 .wp-block-social-links.is-style-logos-only .wp-social-link-skype {
   color: #0478d7;
@@ -3286,6 +3297,9 @@ pre.wp-block-verse {
   white-space: pre-wrap;
 }
 
+.wp-block-video {
+  box-sizing: border-box;
+}
 .wp-block-video video {
   width: 100%;
 }

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.12.0",
+	"version": "7.13.1-next.957ca95e4c.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,35 +34,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.15.0",
-		"@wordpress/api-fetch": "^6.12.0",
-		"@wordpress/autop": "^3.15.0",
-		"@wordpress/blob": "^3.15.0",
-		"@wordpress/block-editor": "^9.7.0",
-		"@wordpress/blocks": "^11.14.0",
-		"@wordpress/components": "^19.17.0",
-		"@wordpress/compose": "^5.13.0",
-		"@wordpress/core-data": "^4.13.0",
-		"@wordpress/data": "^6.15.0",
-		"@wordpress/date": "^4.15.0",
-		"@wordpress/deprecated": "^3.15.0",
-		"@wordpress/dom": "^3.15.0",
-		"@wordpress/element": "^4.13.0",
-		"@wordpress/hooks": "^3.15.0",
-		"@wordpress/html-entities": "^3.15.0",
-		"@wordpress/i18n": "^4.15.0",
-		"@wordpress/icons": "^9.6.0",
-		"@wordpress/keycodes": "^3.15.0",
-		"@wordpress/notices": "^3.15.0",
-		"@wordpress/primitives": "^3.13.0",
-		"@wordpress/reusable-blocks": "^3.13.0",
-		"@wordpress/rich-text": "^5.13.0",
-		"@wordpress/server-side-render": "^3.13.0",
-		"@wordpress/url": "^3.16.0",
-		"@wordpress/viewport": "^4.13.0",
+		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/api-fetch": "^6.13.1-next.957ca95e4c.0",
+		"@wordpress/autop": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/blob": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/block-editor": "^9.8.1-next.957ca95e4c.0",
+		"@wordpress/blocks": "^11.15.1-next.957ca95e4c.0",
+		"@wordpress/components": "^20.0.2-next.957ca95e4c.0",
+		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/core-data": "^5.0.1-next.957ca95e4c.0",
+		"@wordpress/data": "^7.0.1-next.957ca95e4c.0",
+		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
+		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/html-entities": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
+		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/notices": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/primitives": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/reusable-blocks": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/server-side-render": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/url": "^3.17.1-next.957ca95e4c.0",
+		"@wordpress/viewport": "^4.14.1-next.957ca95e4c.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",
@@ -75,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
+	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
 }

package/src/archives/block.json

@@ -26,7 +26,11 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-archives-editor"
 }

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/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/style.scss

@@ -4,20 +4,12 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
 	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;
 
-	&:hover,
-	&:focus,
-	&:active,
-	&:visited {
-		color: $white;
-	}
-
 	&.aligncenter {
 		text-align: center;
 	}
@@ -32,6 +24,7 @@ $blocks-block__margin: 0.5em;
 // 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.
+	box-shadow: none;
 	text-decoration: none;
 
 	// 100% causes an oval, but any explicit but really high value retains the pill shape.
@@ -102,18 +95,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/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/code/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-code code {
+	background: none;
+}

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,
 			};
 

package/src/columns/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -183,7 +183,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 
 				innerBlocks = [
 					...getMappedColumnWidths( innerBlocks, widths ),
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							width: `${ newColumnWidth }%`,
 						} );
@@ -192,7 +194,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 			} else if ( isAddingColumn ) {
 				innerBlocks = [
 					...innerBlocks,
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column' );
 					} ),
 				];

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { times, map } from 'lodash';
+import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -374,7 +374,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 
 				innerBlocks = [
 					...getMappedColumnWidths( innerBlocks, widths ),
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							width: `${ newColumnWidth }%`,
 							verticalAlignment,
@@ -384,7 +386,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 			} else if ( isAddingColumn ) {
 				innerBlocks = [
 					...innerBlocks,
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							verticalAlignment,
 						} );