@wordpress/block-library 8.34.0 → 9.0.0

package/src/block/edit.js

@@ -1,14 +1,18 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef, useMemo, useEffect } from '@wordpress/element';
-import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityRecord,
+	store as coreStore,
+	useEntityBlockEditor,
+} from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
@@ -20,7 +24,6 @@ import {
 	useInnerBlocksProps,
 	RecursionProvider,
 	useHasRecursion,
-	InnerBlocks,
 	useBlockProps,
 	Warning,
 	privateApis as blockEditorPrivateApis,
@@ -28,8 +31,7 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { parse, cloneBlock, store as blocksStore } from '@wordpress/blocks';
-import { RichTextData } from '@wordpress/rich-text';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -38,29 +40,11 @@ import { name as patternBlockName } from './index';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { isOverridableBlock } = unlock( patternsPrivateApis );
+const { isOverridableBlock, hasOverridableBlocks } =
+	unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
-function getLegacyIdMap( blocks, content, nameCount = {} ) {
-	let idToClientIdMap = {};
-	for ( const block of blocks ) {
-		if ( block?.innerBlocks?.length ) {
-			idToClientIdMap = {
-				...idToClientIdMap,
-				...getLegacyIdMap( block.innerBlocks, content, nameCount ),
-			};
-		}
-
-		const id = block.attributes.metadata?.id;
-		const clientId = block.clientId;
-		if ( id && content?.[ id ] ) {
-			idToClientIdMap[ clientId ] = id;
-		}
-	}
-	return idToClientIdMap;
-}
-
 const useInferredLayout = ( blocks, parentLayout ) => {
 	const initialInferredAlignmentRef = useRef();
 
@@ -90,121 +74,6 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
-function hasOverridableBlocks( blocks ) {
-	return blocks.some( ( block ) => {
-		if ( isOverridableBlock( block ) ) {
-			return true;
-		}
-		return hasOverridableBlocks( block.innerBlocks );
-	} );
-}
-
-function getOverridableAttributes( block ) {
-	return Object.entries( block.attributes.metadata.bindings )
-		.filter(
-			( [ , binding ] ) => binding.source === 'core/pattern-overrides'
-		)
-		.map( ( [ attributeKey ] ) => attributeKey );
-}
-
-function applyInitialContentValuesToInnerBlocks(
-	blocks,
-	content = {},
-	defaultValues,
-	legacyIdMap
-) {
-	return blocks.map( ( block ) => {
-		const innerBlocks = applyInitialContentValuesToInnerBlocks(
-			block.innerBlocks,
-			content,
-			defaultValues,
-			legacyIdMap
-		);
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			return { ...block, innerBlocks };
-		}
-
-		const attributes = getOverridableAttributes( block );
-		const newAttributes = { ...block.attributes };
-		for ( const attributeKey of attributes ) {
-			defaultValues[ metadataName ] ??= {};
-			defaultValues[ metadataName ][ attributeKey ] =
-				block.attributes[ attributeKey ];
-
-			const contentValues = content[ metadataName ];
-			if ( contentValues?.[ attributeKey ] !== undefined ) {
-				newAttributes[ attributeKey ] = contentValues[ attributeKey ];
-			}
-		}
-		return {
-			...block,
-			attributes: newAttributes,
-			innerBlocks,
-		};
-	} );
-}
-
-function isAttributeEqual( attribute1, attribute2 ) {
-	if (
-		attribute1 instanceof RichTextData &&
-		attribute2 instanceof RichTextData
-	) {
-		return attribute1.toString() === attribute2.toString();
-	}
-	return attribute1 === attribute2;
-}
-
-function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
-	/** @type {Record<string, { values: Record<string, unknown>}>} */
-	const content = {};
-	for ( const block of blocks ) {
-		if ( block.name === patternBlockName ) {
-			continue;
-		}
-		if ( block.innerBlocks.length ) {
-			Object.assign(
-				content,
-				getContentValuesFromInnerBlocks(
-					block.innerBlocks,
-					defaultValues,
-					legacyIdMap
-				)
-			);
-		}
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			continue;
-		}
-
-		const attributes = getOverridableAttributes( block );
-
-		for ( const attributeKey of attributes ) {
-			if (
-				! isAttributeEqual(
-					block.attributes[ attributeKey ],
-					defaultValues?.[ metadataName ]?.[ attributeKey ]
-				)
-			) {
-				content[ metadataName ] ??= {};
-				// TODO: We need a way to represent `undefined` in the serialized overrides.
-				// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
-				content[ metadataName ][ attributeKey ] =
-					block.attributes[ attributeKey ] === undefined
-						? // TODO: We use an empty string to represent undefined for now until
-						  // we support a richer format for overrides and the block binding API.
-						  // Currently only the `linkTarget` attribute of `core/button` is affected.
-						  ''
-						: block.attributes[ attributeKey ];
-			}
-		}
-	}
-	return Object.keys( content ).length > 0 ? content : undefined;
-}
-
 function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =
@@ -232,6 +101,8 @@ function RecursionWarning() {
 	);
 }
 
+const NOOP = () => {};
+
 // Wrap the main Edit function for the pattern block with a recursion wrapper
 // that allows short-circuiting rendering as early as possible, before any
 // of the other effects in the block edit have run.
@@ -257,33 +128,22 @@ function ReusableBlockEdit( {
 	clientId: patternClientId,
 	setAttributes,
 } ) {
-	const registry = useRegistry();
-	const { record, editedRecord, hasResolved } = useEntityRecord(
+	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
 		ref
 	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_block', {
+		id: ref,
+	} );
 	const isMissing = hasResolved && ! record;
 
-	// The value of the `content` attribute, stored in a `ref` to avoid triggering the effect
-	// that runs `applyInitialContentValuesToInnerBlocks` unnecessarily.
-	const contentRef = useRef( content );
-
-	// The default content values from the original pattern for overridable attributes.
-	// Set by the `applyInitialContentValuesToInnerBlocks` function.
-	const defaultContent = useRef( {} );
-
-	const {
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		setBlockEditingMode,
-	} = useDispatch( blockEditorStore );
-	const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) );
+	const { setBlockEditingMode, __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	const {
 		innerBlocks,
 		userCanEdit,
-		getBlockEditingMode,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
@@ -296,12 +156,11 @@ function ReusableBlockEdit( {
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const blocks = getBlocks( patternClientId );
 			const canEdit = canUser( 'update', 'blocks', ref );
 
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
-				innerBlocks: blocks,
+				innerBlocks: getBlocks( patternClientId ),
 				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
@@ -333,115 +192,31 @@ function ReusableBlockEdit( {
 	] );
 
 	const canOverrideBlocks = useMemo(
-		() => hasPatternOverridesSource && hasOverridableBlocks( innerBlocks ),
-		[ hasPatternOverridesSource, innerBlocks ]
+		() => hasPatternOverridesSource && hasOverridableBlocks( blocks ),
+		[ hasPatternOverridesSource, blocks ]
 	);
 
-	const initialBlocks = useMemo(
-		() =>
-			// Clone the blocks to generate new client IDs.
-			editedRecord.blocks?.map( ( block ) => cloneBlock( block ) ) ??
-			( editedRecord.content && typeof editedRecord.content !== 'function'
-				? parse( editedRecord.content )
-				: [] ),
-		[ editedRecord.blocks, editedRecord.content ]
-	);
-
-	const legacyIdMap = useRef( {} );
-
-	// Apply the initial overrides from the pattern block to the inner blocks.
-	useEffect( () => {
-		// Build a map of clientIds to the old nano id system to provide back compat.
-		legacyIdMap.current = getLegacyIdMap(
-			initialBlocks,
-			contentRef.current
-		);
-		defaultContent.current = {};
-		const originalEditingMode = getBlockEditingMode( patternClientId );
-		// Replace the contents of the blocks with the overrides.
-		registry.batch( () => {
-			setBlockEditingMode( patternClientId, 'default' );
-			syncDerivedUpdates( () => {
-				const blocks = hasPatternOverridesSource
-					? applyInitialContentValuesToInnerBlocks(
-							initialBlocks,
-							contentRef.current,
-							defaultContent.current,
-							legacyIdMap.current
-					  )
-					: initialBlocks;
-
-				replaceInnerBlocks( patternClientId, blocks );
-			} );
-			setBlockEditingMode( patternClientId, originalEditingMode );
-		} );
-	}, [
-		hasPatternOverridesSource,
-		__unstableMarkNextChangeAsNotPersistent,
-		patternClientId,
-		initialBlocks,
-		replaceInnerBlocks,
-		registry,
-		getBlockEditingMode,
-		setBlockEditingMode,
-		syncDerivedUpdates,
-	] );
-
-	const { alignment, layout } = useInferredLayout(
-		innerBlocks,
-		parentLayout
-	);
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			'block-library-block__reusable-block-container',
 			layout && layoutClasses,
 			{ [ `align${ alignment }` ]: alignment }
 		),
 	} );
 
+	// Use `blocks` variable until `innerBlocks` is populated, which has the proper clientIds.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: 'contentOnly',
+		templateLock: 'all',
 		layout,
-		renderAppender: innerBlocks?.length
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
+		value: innerBlocks.length > 0 ? innerBlocks : blocks,
+		onInput: NOOP,
+		onChange: NOOP,
+		renderAppender: blocks?.length ? undefined : blocks.ButtonBlockAppender,
 	} );
 
-	// Sync the `content` attribute from the updated blocks to the pattern block.
-	// `syncDerivedUpdates` is used here to avoid creating an additional undo level.
-	useEffect( () => {
-		if ( ! hasPatternOverridesSource ) {
-			return;
-		}
-		const { getBlocks } = registry.select( blockEditorStore );
-		let prevBlocks = getBlocks( patternClientId );
-		return registry.subscribe( () => {
-			const blocks = getBlocks( patternClientId );
-			if ( blocks !== prevBlocks ) {
-				prevBlocks = blocks;
-				syncDerivedUpdates( () => {
-					const updatedContent = getContentValuesFromInnerBlocks(
-						blocks,
-						defaultContent.current,
-						legacyIdMap.current
-					);
-					setAttributes( {
-						content: updatedContent,
-					} );
-					contentRef.current = updatedContent;
-				} );
-			}
-		}, blockEditorStore );
-	}, [
-		hasPatternOverridesSource,
-		syncDerivedUpdates,
-		patternClientId,
-		registry,
-		setAttributes,
-	] );
-
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {
 			postId: ref,
@@ -451,7 +226,9 @@ function ReusableBlockEdit( {
 
 	const resetContent = () => {
 		if ( content ) {
-			replaceInnerBlocks( patternClientId, initialBlocks );
+			// Make sure any previous changes are persisted before resetting.
+			__unstableMarkLastChangeAsPersistent();
+			setAttributes( { content: undefined } );
 		}
 	};
 

package/src/block/edit.native.js

@@ -232,7 +232,7 @@ export default function ReusableBlockEdit( {
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ openSheet }
 			>

package/src/block/index.php

@@ -78,7 +78,7 @@ function render_block_core_block( $attributes ) {
 	 * filter so that it is available when a pattern's inner blocks are
 	 * rendering via do_blocks given it only receives the inner content.
 	 */
-	$has_pattern_overrides = isset( $attributes['content'] );
+	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
 	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['content'];

package/src/button/block.json

@@ -73,6 +73,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"splitting": true,
 		"align": false,
 		"alignWide": false,
 		"color": {

package/src/button/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ function migrateAlign( attributes ) {
 	const { align, ...otherAttributes } = attributes;
 	return {
 		...otherAttributes,
-		className: classnames(
+		className: clsx(
 			otherAttributes.className,
 			`align${ attributes.align }`
 		),
@@ -226,7 +226,7 @@ const v11 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -246,7 +246,7 @@ const v11 = {
 		// 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,
 		} );
@@ -352,7 +352,7 @@ const v10 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -372,7 +372,7 @@ const v10 = {
 		// 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,
 		} );
@@ -468,7 +468,7 @@ const deprecated = [
 
 			const borderRadius = style?.border?.radius;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -484,7 +484,7 @@ const deprecated = [
 			// 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,
@@ -558,7 +558,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -574,7 +574,7 @@ const deprecated = [
 			// 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,
 			} );
 
@@ -646,7 +646,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -662,7 +662,7 @@ const deprecated = [
 			// 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,
 			} );
 
@@ -725,7 +725,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { borderRadius, linkTarget, rel, text, title, url } =
 				attributes;
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );
 			const buttonStyle = {
@@ -823,7 +823,7 @@ const deprecated = [
 				getColorClassName( 'background-color', backgroundColor );
 			const gradientClass = __experimentalGetGradientClass( gradient );
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background':
@@ -941,7 +941,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
@@ -1009,7 +1009,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,

package/src/button/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -156,6 +156,7 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 		clientId,
+		context,
 	} = props;
 	const {
 		tagName,
@@ -246,18 +247,21 @@ function ButtonEdit( props ) {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					( ! blockBindingsSource ||
-						blockBindingsSource?.lockAttributesEditing ),
+					! blockBindingsSource?.canUserEditValue( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
 			};
 		},
-		[ isSelected ]
+		[ isSelected, metadata?.bindings?.url ]
 	);
 
 	return (
 		<>
 			<div
 				{ ...blockProps }
-				className={ classnames( blockProps.className, {
+				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
@@ -274,7 +278,7 @@ function ButtonEdit( props ) {
 						} )
 					}
 					withoutInteractiveFormatting
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wp-block-button__link',
 						colorProps.className,
@@ -293,12 +297,6 @@ function ButtonEdit( props ) {
 						...spacingProps.style,
 						...shadowProps.style,
 					} }
-					onSplit={ ( value ) =>
-						createBlock( 'core/button', {
-							...attributes,
-							text: value,
-						} )
-					}
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }
 					identifier="text"
@@ -345,7 +343,7 @@ function ButtonEdit( props ) {
 						} }
 						anchor={ popoverAnchor }
 						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName={ '__unstable-block-tools-after' }
+						__unstableSlotName="__unstable-block-tools-after"
 						shift
 					>
 						<LinkControl

package/src/button/edit.native.js

@@ -17,6 +17,7 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -28,7 +29,6 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 // eslint-disable-next-line no-restricted-imports

package/src/button/editor.scss

@@ -37,38 +37,3 @@ div[data-type="core/button"] {
 	text-decoration: inherit;
 }
 
-.editor-styles-wrapper .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 in the editor,
-	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
-	&: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;
-	}
-
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
-	}
-	&: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;
-	}
-}