@wordpress/block-library 8.34.0 → 9.0.0

package/src/social-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -102,7 +102,7 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
+	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 		[ `has-${ iconColor }-color` ]: iconColor,
 		[ `has-${ iconBackgroundColor }-background-color` ]:
@@ -165,7 +165,7 @@ const SocialLinkEdit = ( {
 				>
 					<IconComponent />
 					<span
-						className={ classNames( 'wp-block-social-link-label', {
+						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>

package/src/social-link/edit.native.js

@@ -171,7 +171,7 @@ const SocialLinkEdit = ( {
 
 			<TouchableWithoutFeedback
 				onPress={ onIconPress }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityLabel={ sprintf(
 					// translators: %s: social link name e.g: "Instagram".
 					__( '%s social icon' ),

package/src/social-link/editor.scss

@@ -31,11 +31,11 @@
 	}
 }
 
-.wp-block-social-links.is-style-pill-shape .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
 	padding-left: calc((2/3) * 1em);
 	padding-right: calc((2/3) * 1em);
 }
 
-.wp-block-social-links.is-style-logos-only .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }

package/src/social-link/icons/bluesky.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const BlueskyIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z" />
+	</SVG>
+);

package/src/social-link/icons/index.js

@@ -1,6 +1,7 @@
 export * from './amazon';
 export * from './bandcamp';
 export * from './behance';
+export * from './bluesky';
 export * from './chain';
 export * from './codepen';
 export * from './deviantart';

package/src/social-link/index.php

@@ -153,6 +153,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Behance',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>',
 		),
+		'bluesky'       => array(
+			'name' => 'Bluesky',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"></path></svg>',
+		),
 		'chain'         => array(
 			'name' => 'Link',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z"></path></svg>',

package/src/social-link/socials-with-bg.scss

@@ -18,6 +18,11 @@
 	color: #fff;
 }
 
+.wp-social-link-bluesky {
+	background-color: #0a7aff;
+	color: #fff;
+}
+
 .wp-social-link-codepen {
 	background-color: #1e1f26;
 	color: #fff;

package/src/social-link/socials-without-bg.scss

@@ -10,6 +10,10 @@
 	color: #0757fe;
 }
 
+.wp-social-link-bluesky {
+	color: #0a7aff;
+}
+
 .wp-social-link-codepen {
 	color: #1e1f26;
 }

package/src/social-link/variations.js

@@ -5,6 +5,7 @@ import {
 	AmazonIcon,
 	BandcampIcon,
 	BehanceIcon,
+	BlueskyIcon,
 	ChainIcon,
 	CodepenIcon,
 	DeviantArtIcon,
@@ -83,6 +84,12 @@ const variations = [
 		title: 'Behance',
 		icon: BehanceIcon,
 	},
+	{
+		name: 'bluesky',
+		attributes: { service: 'bluesky' },
+		title: 'Bluesky',
+		icon: BlueskyIcon,
+	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },

package/src/social-links/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ const deprecated = [
 				},
 			} = props;
 
-			const className = classNames( size, {
+			const className = clsx( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
 				[ `items-justified-${ itemsJustification }` ]:

package/src/social-links/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export function SocialLinksEdit( props ) {
 
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':

package/src/social-links/edit.native.js

@@ -95,7 +95,7 @@ function SocialLinksEdit( {
 			renderFooterAppender={
 				shouldRenderFooterAppender && renderFooterAppender.current
 			}
-			orientation={ 'horizontal' }
+			orientation="horizontal"
 			onDeleteBlock={ shouldDelete ? onDelete : undefined }
 			marginVertical={ spacing }
 			marginHorizontal={ spacing }

package/src/social-links/editor.scss

@@ -11,9 +11,19 @@
 	transform: none;
 }
 
-.editor-styles-wrapper .wp-block-social-links {
+// Specificity for the following styles are fixed at 0-1-0 to match and be
+// overridable by global styles.
+:root :where(.wp-block-social-links),
+:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
 	padding: 0;
 }
+:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
+}
 
 // Placeholder/setup state.
 .wp-block-social-links__social-placeholder {
@@ -37,19 +47,6 @@
 		display: flex;
 	}
 
-	.wp-social-link {
-		padding: 0.25em;
-
-		.is-style-pill-shape & {
-			padding-left: calc((2/3) * 1em);
-			padding-right: calc((2/3) * 1em);
-		}
-
-		.is-style-logos-only & {
-			padding: 0;
-		}
-	}
-
 	.wp-social-link::before {
 		content: "";
 		display: block;

package/src/social-links/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default function save( props ) {
 		},
 	} = props;
 
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,

package/src/social-links/style.scss

@@ -21,12 +21,6 @@
 	}
 
 	.wp-social-link {
-		// By setting the font size, we can scale icons and paddings consistently based on that.
-		// This also allows themes to override this, if need be.
-		a {
-			padding: 0.25em;
-		}
-
 		svg {
 			width: 1em;
 			height: 1em;
@@ -119,14 +113,13 @@
 }
 
 // Treatment for logos only style.
+// The specificity for this selector has not been reduced to 0-1-0 as per
+// global styles variation selectors as the lack of background should be
+// enforced for this block style.
 .wp-block-social-links.is-style-logos-only {
 	.wp-social-link {
 		background: none;
 
-		a {
-			padding: 0;
-		}
-
 		// Make these bigger.
 		svg {
 			width: 1.25em;
@@ -142,11 +135,19 @@
 	.wp-social-link {
 		width: auto;
 	}
+}
 
-	.wp-social-link a {
-		padding-left: calc((2/3) * 1em);
-		padding-right: calc((2/3) * 1em);
-	}
+// The following rules have their selector specificity set to 0-1-0 to
+// facilitate theme.json styling of the inner social-link block padding.
+:root :where(.wp-block-social-links .wp-social-link a) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
+	padding: 0;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
 }
 
 // Ensure the Snapchat label is visible when no custom

package/src/spacer/controls.js

@@ -7,6 +7,7 @@ import {
 	useSettings,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 	isValueSpacingPreset,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	BaseControl,
@@ -21,14 +22,15 @@ import { View } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-	const [ spacingSizes, spacingUnits ] = useSettings(
-		'spacing.spacingSizes',
-		'spacing.units'
-	);
+	const spacingSizes = useSpacingSizes();
+	const [ spacingUnits ] = useSettings( 'spacing.units' );
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.

package/src/spacer/edit.js

@@ -1,17 +1,17 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
 	useBlockProps,
-	useSettings,
 	getCustomValueFromPreset,
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
@@ -21,9 +21,12 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import SpacerControls from './controls';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 const ResizableSpacer = ( {
 	orientation,
 	onResizeStart,
@@ -46,7 +49,7 @@ const ResizableSpacer = ( {
 
 	return (
 		<ResizableBox
-			className={ classnames( 'block-library-spacer__resize-container', {
+			className={ clsx( 'block-library-spacer__resize-container', {
 				'resize-horizontal': orientation === 'horizontal',
 				'is-resizing': isResizing,
 				'is-selected': isSelected,
@@ -112,7 +115,7 @@ const SpacerEdit = ( {
 	const { layout = {} } = blockStyle;
 	const { selfStretch, flexSize } = layout;
 
-	const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' );
+	const spacingSizes = useSpacingSizes();
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
@@ -346,7 +349,7 @@ const SpacerEdit = ( {
 			<View
 				{ ...useBlockProps( {
 					style,
-					className: classnames( className, {
+					className: clsx( className, {
 						'custom-sizes-disabled': disableCustomSpacingSizes,
 					} ),
 				} ) }

package/src/table/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -174,13 +174,9 @@ const v4 = {
 		const colorProps = getColorClassesAndStyles( attributes );
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames(
-			colorProps.className,
-			borderProps.className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			}
-		);
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		const hasCaption = ! RichText.isEmpty( caption );
 
@@ -207,7 +203,7 @@ const v4 = {
 									},
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -395,13 +391,9 @@ const v3 = {
 		const colorProps = getColorClassesAndStyles( attributes );
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames(
-			colorProps.className,
-			borderProps.className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			}
-		);
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		const hasCaption = ! RichText.isEmpty( caption );
 
@@ -421,7 +413,7 @@ const v3 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -570,7 +562,7 @@ const v2 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );
@@ -593,7 +585,7 @@ const v2 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -746,7 +738,7 @@ const v1 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );

package/src/table/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -419,7 +419,7 @@ function TableEdit( {
 								scope={ CellTag === 'th' ? scope : undefined }
 								colSpan={ colspan }
 								rowSpan={ rowspan }
-								className={ classnames(
+								className={ clsx(
 									{
 										[ `has-text-align-${ align }` ]: align,
 									},
@@ -505,7 +505,7 @@ function TableEdit( {
 			</InspectorControls>
 			{ ! isEmpty && (
 				<table
-					className={ classnames(
+					className={ clsx(
 						colorProps.className,
 						borderProps.className,
 						{

package/src/table/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function save( { attributes } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const borderProps = getBorderClassesAndStyles( attributes );
 
-	const classes = classnames( colorProps.className, borderProps.className, {
+	const classes = clsx( colorProps.className, borderProps.className, {
 		'has-fixed-layout': hasFixedLayout,
 	} );
 
@@ -54,7 +54,7 @@ export default function save( { attributes } ) {
 								},
 								cellIndex
 							) => {
-								const cellClasses = classnames( {
+								const cellClasses = clsx( {
 									[ `has-text-align-${ align }` ]: align,
 								} );
 

package/src/table/style.scss

@@ -71,6 +71,9 @@
 	}
 
 	// "Stripes" style variation.
+	// This block style selector does not have 0-1-0 specificity, as per those
+	// generated via global styles, to maintain current styling. Global styles
+	// support for table borders also only applies to the outer `table` element.
 	&.is-style-stripes {
 		border-spacing: 0;
 		border-collapse: inherit;

package/src/table/theme.scss

@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin: 0 0 1em 0;
+
 	td,
 	th {
 		word-break: normal;
@@ -8,7 +10,3 @@
 		@include caption-style-theme();
 	}
 }
-
-:where(.wp-block-table) {
-	margin: 0 0 1em 0;
-}

package/src/tag-cloud/style.scss

@@ -22,18 +22,20 @@
 		margin-left: 5px;
 		text-decoration: none;
 	}
+}
 
-	&.is-style-outline {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 1ch;
-
-		a {
-			border: 1px solid currentColor;
-			font-size: unset !important; // !important Needed to override the inline styles.
-			margin-right: 0;
-			padding: 1ch 2ch;
-			text-decoration: none !important; // !important needed to override generic post content link decoration.
-		}
-	}
+// Specificity is set to 0-1-0 to match global styles selectors.
+:root :where(.wp-block-tag-cloud.is-style-outline) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1ch;
+}
+// The block support related styles below haven't been replicated in the base theme.json
+// as the block doesn't yet adopt them for its inner links.
+:root :where(.wp-block-tag-cloud.is-style-outline a) {
+	border: 1px solid currentColor;
+	font-size: unset !important; // !important Needed to override the inline styles.
+	margin-right: 0;
+	padding: 1ch 2ch;
+	text-decoration: none !important; // !important needed to override generic post content link decoration.
 }

package/src/template-part/editor.scss

@@ -24,24 +24,21 @@
 }
 
 // We don't use .is-outline-mode in this case so colors take effect properly in the block editor.
-// Will be a better result when outlines are not shadows, but outlines, so we can target outline-color, not redefine the entire shadow.
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
 .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
 	&.is-highlighted::after,
 	&.is-selected::after {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-	}
-
-	&.is-hovered::after {
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color);
+		outline-color: var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			outline-color: var(--wp-block-synced-color);
+
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}

package/src/template-part/theme.scss

@@ -1,9 +1,7 @@
 // Same as the group block styles.
-:where(.wp-block-template-part) {
-	&.has-background {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+:root :where(.wp-block-template-part.has-background) {
+	// Matches paragraph Block padding
+	padding: $block-bg-padding--v $block-bg-padding--h;
+	margin-top: 0;
+	margin-bottom: 0;
 }

package/src/term-description/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 TermDescriptionEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style: mergedStyle,

package/src/utils/caption.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -94,7 +94,7 @@ export function Caption( {
 					<RichText
 						identifier={ attributeKey }
 						tagName={ tagName }
-						className={ classnames(
+						className={ clsx(
 							className,
 							__experimentalGetElementClassName( 'caption' )
 						) }