@wordpress/block-library 8.34.0 → 9.0.0

package/src/button/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function save( { attributes, className } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
-	const buttonClasses = classnames(
+	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
@@ -65,7 +65,7 @@ export default function save( { attributes, className } ) {
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
 
-	const wrapperClasses = classnames( className, {
+	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );

package/src/button/style.scss

@@ -86,69 +86,37 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// the first selector is required for old buttons markup
+// The follow block style selectors are required for old buttons markup
+// and do not use the `:root :where()` format to match specificity at
+// the time they were deprecated.
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
 	border-radius: 0;
 }
-
-// the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
 	border-radius: 0 !important;
 }
 
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
-.wp-block-button .wp-block-button__link:where(.is-style-outline) {
-	border: 2px solid currentColor;
-	padding: 0.667em 1.333em;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
-	background-color: transparent;
-	// background-image is required to overwrite a gradient background
-	background-image: none;
-}
-
-.wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user
-	// selects only a border color or style. This overcomes the zero border
-	// width applied by core's theme.json via the elements API.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
+// Selectors here use the `:root :where()` format for maintaining compatibility
+// with global styles and nested block style variations.
+:root {
+	// Outline Block Style Variation.
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline) {
+		border: 2px solid currentColor;
+		padding: 0.667em 1.333em;
 	}
 
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+		color: currentColor;
 	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
+
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+		background-color: transparent;
+		// background-image is required to overwrite a gradient background
+		background-image: none;
 	}
 }

package/src/buttons/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -63,7 +63,7 @@ const deprecated = [
 			return (
 				<div
 					{ ...useBlockProps.save( {
-						className: classnames( {
+						className: clsx( {
 							[ `is-content-justification-${ contentJustification }` ]:
 								contentJustification,
 							'is-vertical': orientation === 'vertical',

package/src/buttons/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ const DEFAULT_BLOCK = {
 function ButtonsEdit( { attributes, className } ) {
 	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );

package/src/buttons/editor.scss

@@ -33,9 +33,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,

package/src/buttons/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save( { attributes, className } ) {
 	const { fontSize, style } = attributes;
 	const blockProps = useBlockProps.save( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );

package/src/buttons/style.scss

@@ -55,9 +55,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,

package/src/categories/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,7 +127,7 @@ export default function CategoriesEdit( {
 			? 'ul'
 			: 'div';
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'wp-block-categories-list':
 			!! categories?.length && ! displayAsDropdown && ! isResolving,
 		'wp-block-categories-dropdown':

package/src/code/theme.native.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable font-family-no-missing-generic-family-keyword -- iOS will use the Menlo typeface and Android will use monospace, no need for a generic family keyword. */
 
 .blockCode {
 	font-family: $default-monospace-font;

package/src/column/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { verticalAlignment, width } = attributes;
 
-			const wrapperClasses = classnames( {
+			const wrapperClasses = clsx( {
 				[ `is-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );

package/src/column/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ function ColumnEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const classes = classnames( 'block-core-columns', {
+	const classes = clsx( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(

package/src/column/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
 
-	const wrapperClasses = classnames( {
+	const wrapperClasses = clsx( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 

package/src/columns/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export default [
 
 			const textClass = getColorClassName( 'color', textColor );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-text-color': textColor || customTextColor,
 				[ backgroundClass ]: backgroundClass,
@@ -210,7 +210,7 @@ export default [
 		save( { attributes } ) {
 			const { verticalAlignment, columns } = attributes;
 
-			const wrapperClasses = classnames( `has-${ columns }-columns`, {
+			const wrapperClasses = clsx( `has-${ columns }-columns`, {
 				[ `are-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );

package/src/columns/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -192,7 +192,7 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );

package/src/columns/edit.native.js

@@ -13,7 +13,6 @@ import {
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
-	GlobalStylesContext,
 	alignmentHelpers,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -25,12 +24,12 @@ import {
 	BlockVariationPicker,
 	useSettings,
 	store as blockEditorStore,
+	useGlobalStyles,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
-	useContext,
 	useMemo,
 	useCallback,
 	memo,
@@ -90,7 +89,7 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-	const globalStyles = useContext( GlobalStylesContext );
+	const globalStyles = useGlobalStyles();
 
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};

package/src/columns/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );

package/src/comment-author-name/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comment-content/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Edit( {
 	context: { commentId },
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comment-edit-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comment-reply-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ import {
  */
 function Edit( { setAttributes, attributes: { textAlign } } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comments/edit/comments-legacy.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function CommentsLegacy( {
 	];
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comments/index.php

@@ -18,7 +18,7 @@
  *
  * @since 6.1.0
  *
- * @global WP_Post  $post     Global post object.
+ * @global WP_Post $post Global post object.
  *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.

package/src/comments-title/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Edit( {
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/common.scss

@@ -165,8 +165,8 @@ html :where(img[class*="wp-image-"]) {
 // Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
 // This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
 html :where(.is-position-sticky) {
-	/* stylelint-disable length-zero-no-unit */
-	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); // 0px is set explicitly so that it can be used in a calc value.
+	/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
 	/* stylelint-enable length-zero-no-unit */
 }
 
@@ -175,8 +175,8 @@ html :where(.is-position-sticky) {
 // is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
 @media screen and (max-width: 600px) {
 	html :where(.is-position-sticky) {
-		/* stylelint-disable length-zero-no-unit */
-		--wp-admin--admin-bar--position-offset: 0px; // 0px is set explicitly so that it can be used in a calc value.
+		/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+		--wp-admin--admin-bar--position-offset: 0px;
 		/* stylelint-enable length-zero-no-unit */
 	}
 }

package/src/cover/block.json

@@ -85,6 +85,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],

package/src/cover/controls.native.js

@@ -213,7 +213,7 @@ function Controls( {
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }
-									resizeMode={ 'cover' }
+									resizeMode="cover"
 									source={ { uri: url } }
 									style={ videoPreviewStyles }
 								/>
@@ -281,7 +281,7 @@ function Controls( {
 						value={ dimRatio }
 						onChange={ onOpacityChange }
 						style={ styles.rangeCellContainer }
-						separatorType={ 'topFullWidth' }
+						separatorType="topFullWidth"
 					/>
 				</PanelBody>
 			) : null }