@wordpress/block-library 9.12.0 → 9.12.1-next.082ed6819.0

package/src/navigation/index.php

@@ -344,6 +344,10 @@ class WP_Navigation_Block_Renderer {
 
 		$navigation_name = $attributes['ariaLabel'] ?? '';
 
+		if ( ! empty( $navigation_name ) ) {
+			return $navigation_name;
+		}
+
 		// Load the navigation post.
 		if ( array_key_exists( 'ref', $attributes ) ) {
 			$navigation_post = get_post( $attributes['ref'] );
@@ -1516,153 +1520,3 @@ function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
 
 	return traverse_and_serialize_block( $mock_navigation_block, $before_block_visitor, $after_block_visitor );
 }
-
-/**
- * Insert ignoredHookedBlocks meta into the Navigation block and its inner blocks.
- *
- * Given a Navigation block's inner blocks and its corresponding `wp_navigation` post object,
- * this function inserts ignoredHookedBlocks meta into it, and returns the serialized inner blocks in a
- * mock Navigation block wrapper.
- *
- * @since 6.5.0
- *
- * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
- * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
- * @return string Serialized inner blocks in mock Navigation block wrapper, with hooked blocks inserted, if any.
- */
-function block_core_navigation_set_ignored_hooked_blocks_metadata( $inner_blocks, $post ) {
-	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
-	$hooked_blocks         = get_hooked_blocks();
-	$before_block_visitor  = null;
-	$after_block_visitor   = null;
-
-	if ( ! empty( $hooked_blocks ) || has_filter( 'hooked_block_types' ) ) {
-		$before_block_visitor = make_before_block_visitor( $hooked_blocks, $post, 'set_ignored_hooked_blocks_metadata' );
-		$after_block_visitor  = make_after_block_visitor( $hooked_blocks, $post, 'set_ignored_hooked_blocks_metadata' );
-	}
-
-	return traverse_and_serialize_block( $mock_navigation_block, $before_block_visitor, $after_block_visitor );
-}
-
-/**
- * Updates the post meta with the list of ignored hooked blocks when the navigation is created or updated via the REST API.
- *
- * @access private
- * @since 6.5.0
- *
- * @param stdClass $post Post object.
- * @return stdClass The updated post object.
- */
-function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
-	/*
-	 * In this scenario the user has likely tried to create a navigation via the REST API.
-	 * In which case we won't have a post ID to work with and store meta against.
-	 */
-	if ( empty( $post->ID ) ) {
-		return $post;
-	}
-
-	/**
-	 * Skip meta generation when consumers intentionally update specific Navigation fields
-	 * and omit the content update.
-	 */
-	if ( ! isset( $post->post_content ) ) {
-		return $post;
-	}
-
-	/*
-	 * We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
-	 * all anchor blocks. For the root level, we create a mock Navigation and extract them from there.
-	 */
-	$blocks = parse_blocks( $post->post_content );
-
-	/*
-	 * Block Hooks logic requires a `WP_Post` object (rather than the `stdClass` with the updates that
-	 * we're getting from the `rest_pre_insert_wp_navigation` filter) as its second argument (to be
-	 * used as context for hooked blocks insertion).
-	 * We thus have to look it up from the DB,based on `$post->ID`.
-	 */
-	$markup = block_core_navigation_set_ignored_hooked_blocks_metadata( $blocks, get_post( $post->ID ) );
-
-	$root_nav_block        = parse_blocks( $markup )[0];
-	$ignored_hooked_blocks = isset( $root_nav_block['attrs']['metadata']['ignoredHookedBlocks'] )
-		? $root_nav_block['attrs']['metadata']['ignoredHookedBlocks']
-		: array();
-
-	if ( ! empty( $ignored_hooked_blocks ) ) {
-		$existing_ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true );
-		if ( ! empty( $existing_ignored_hooked_blocks ) ) {
-			$existing_ignored_hooked_blocks = json_decode( $existing_ignored_hooked_blocks, true );
-			$ignored_hooked_blocks          = array_unique( array_merge( $ignored_hooked_blocks, $existing_ignored_hooked_blocks ) );
-		}
-		update_post_meta( $post->ID, '_wp_ignored_hooked_blocks', json_encode( $ignored_hooked_blocks ) );
-	}
-
-	$post->post_content = block_core_navigation_remove_serialized_parent_block( $markup );
-	return $post;
-}
-
-/*
- * Before adding our filter, we verify if it's already added in Core.
- * However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
- * Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
- */
-$rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta'; // phpcs:ignore Generic.Strings.UnnecessaryStringConcat.Found
-
-/*
- * Do not add the `block_core_navigation_update_ignore_hooked_blocks_meta` filter in the following cases:
- * - If Core has added the `update_ignored_hooked_blocks_postmeta` filter already (WP >= 6.6);
- * - or if the `$rest_insert_wp_navigation_core_callback` filter has already been added.
- */
-if (
-	! has_filter( 'rest_pre_insert_wp_navigation', 'update_ignored_hooked_blocks_postmeta' ) &&
-	! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback )
-) {
-	add_filter( 'rest_pre_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta' );
-}
-
-/**
- * Hooks into the REST API response for the core/navigation block and adds the first and last inner blocks.
- *
- * @since 6.5.0
- *
- * @param WP_REST_Response $response The response object.
- * @param WP_Post          $post     Post object.
- * @return WP_REST_Response The response object.
- */
-function block_core_navigation_insert_hooked_blocks_into_rest_response( $response, $post ) {
-	if ( ! isset( $response->data['content']['raw'] ) || ! isset( $response->data['content']['rendered'] ) ) {
-		return $response;
-	}
-	$parsed_blocks = parse_blocks( $response->data['content']['raw'] );
-	$content       = block_core_navigation_insert_hooked_blocks( $parsed_blocks, $post );
-
-	// Remove mock Navigation block wrapper.
-	$content = block_core_navigation_remove_serialized_parent_block( $content );
-
-	$response->data['content']['raw'] = $content;
-
-	/** This filter is documented in wp-includes/post-template.php */
-	$response->data['content']['rendered'] = apply_filters( 'the_content', $content );
-
-	return $response;
-}
-
-/*
- *  Before adding our filter, we verify if it's already added in Core.
- * However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
- * Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
- */
-$rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_hooked_blocks_into_rest_response';
-
-/*
- * Do not add the `block_core_navigation_insert_hooked_blocks_into_rest_response` filter in the following cases:
- * - If Core has added the `insert_hooked_blocks_into_rest_response` filter already (WP >= 6.6);
- * - or if the `$rest_prepare_wp_navigation_core_callback` filter has already been added.
- */
-if (
-	! has_filter( 'rest_prepare_wp_navigation', 'insert_hooked_blocks_into_rest_response' ) &&
-	! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback )
-) {
-	add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );
-}

package/src/navigation/style.scss

@@ -510,7 +510,7 @@ button.wp-block-navigation-item__content {
 		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
 		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
 		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
-		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 
 		// Allow modal to scroll.
 		overflow: auto;

package/src/navigation/use-template-part-area-label.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 
 // TODO: this util should perhaps be refactored somewhere like core-data.
 import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id';
+import { getTemplatePartIcon } from '../template-part/edit/utils/get-template-part-icon';
 
 export default function useTemplatePartAreaLabel( clientId ) {
 	return useSelect(
@@ -35,16 +36,15 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			// This code is lifted from this file:
-			// packages/block-library/src/template-part/edit/advanced-controls.js
-			/* eslint-disable @wordpress/data-no-store-string-literals */
-			const definedAreas =
-				select(
-					'core/editor'
-				).__experimentalGetDefaultTemplatePartAreas();
-			/* eslint-enable @wordpress/data-no-store-string-literals */
+			const defaultTemplatePartAreas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( {
+				...item,
+				icon: getTemplatePartIcon( item.icon ),
+			} ) );
+
 			const { getCurrentTheme, getEditedEntityRecord } =
 				select( coreStore );
 

package/src/page-list/block.json

@@ -51,6 +51,20 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
 		}
 	},
 	"editorStyle": "wp-block-page-list-editor",

package/src/page-list/style.scss

@@ -15,3 +15,7 @@
 		background-color: inherit;
 	}
 }
+.wp-block-page-list {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/paragraph/edit.js

@@ -70,22 +70,24 @@ function DropCapControl( { clientId, attributes, setAttributes } ) {
 	}
 
 	return (
-		<ToolsPanelItem
-			hasValue={ () => !! dropCap }
-			label={ __( 'Drop cap' ) }
-			onDeselect={ () => setAttributes( { dropCap: undefined } ) }
-			resetAllFilter={ () => ( { dropCap: undefined } ) }
-			panelId={ clientId }
-		>
-			<ToggleControl
-				__nextHasNoMarginBottom
+		<InspectorControls group="typography">
+			<ToolsPanelItem
+				hasValue={ () => !! dropCap }
 				label={ __( 'Drop cap' ) }
-				checked={ !! dropCap }
-				onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
-				help={ helpText }
-				disabled={ hasDropCapDisabled( align ) }
-			/>
-		</ToolsPanelItem>
+				onDeselect={ () => setAttributes( { dropCap: undefined } ) }
+				resetAllFilter={ () => ( { dropCap: undefined } ) }
+				panelId={ clientId }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Drop cap' ) }
+					checked={ !! dropCap }
+					onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
+					help={ helpText }
+					disabled={ hasDropCapDisabled( align ) }
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
 	);
 }
 
@@ -96,6 +98,7 @@ function ParagraphBlock( {
 	onRemove,
 	setAttributes,
 	clientId,
+	isSelected: isSingleSelected,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const blockProps = useBlockProps( {
@@ -131,13 +134,13 @@ function ParagraphBlock( {
 					/>
 				</BlockControls>
 			) }
-			<InspectorControls group="typography">
+			{ isSingleSelected && (
 				<DropCapControl
 					clientId={ clientId }
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>
-			</InspectorControls>
+			) }
 			<RichText
 				identifier="content"
 				tagName="p"

package/src/pattern/index.php

@@ -58,13 +58,6 @@ function render_block_core_pattern( $attributes ) {
 	$pattern = $registry->get_registered( $slug );
 	$content = $pattern['content'];
 
-	// Backward compatibility for handling Block Hooks and injecting the theme attribute in the Gutenberg plugin.
-	// This can be removed when the minimum supported WordPress is >= 6.4.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && ! function_exists( 'traverse_and_serialize_blocks' ) ) {
-		$blocks  = parse_blocks( $content );
-		$content = gutenberg_serialize_blocks( $blocks );
-	}
-
 	$seen_refs[ $attributes['slug'] ] = true;
 
 	$content = do_blocks( $content );

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -18,15 +18,13 @@ export default function EnhancedPaginationControl( {
 	const fullPageClientSideNavigation =
 		window.__experimentalFullPageClientSideNavigation;
 
-	let help = __( 'Browsing between pages requires a full page reload.' );
+	let help = __(
+		'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
+	);
 	if ( fullPageClientSideNavigation ) {
 		help = __(
 			'Experimental full-page client-side navigation setting enabled.'
 		);
-	} else if ( enhancedPagination ) {
-		help = __(
-			'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
-		);
 	} else if ( hasUnsupportedBlocks ) {
 		help = __(
 			'Enhancement disabled because there are non-compatible blocks inside the Query block.'

package/src/query/edit/inspector-controls/index.js

@@ -15,7 +15,6 @@ import {
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
@@ -28,11 +27,9 @@ import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
 import FormatControls from './format-controls';
 import StickyControl from './sticky-control';
-import CreateNewPostLink from './create-new-post-link';
 import PerPageControl from './per-page-control';
 import OffsetControl from './offset-controls';
 import PagesControl from './pages-control';
-import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
@@ -42,8 +39,6 @@ import {
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
-const { BlockInfo } = unlock( blockEditorPrivateApis );
-
 export default function QueryInspectorControls( props ) {
 	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
 	const { query, displayLayout } = attributes;
@@ -191,11 +186,6 @@ export default function QueryInspectorControls( props ) {
 
 	return (
 		<>
-			{ !! postType && (
-				<BlockInfo>
-					<CreateNewPostLink postType={ postType } />
-				</BlockInfo>
-			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (

package/src/query/editor.scss

@@ -6,10 +6,6 @@
 	}
 }
 
-.wp-block-query__create-new-link {
-	padding: 0 $grid-unit-20 $grid-unit-20 52px;
-}
-
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;

package/src/query/index.php

@@ -79,7 +79,7 @@ add_action( 'init', 'register_block_core_query' );
  * @since 6.4.0
  *
  * @param array $parsed_block The block being rendered.
- * @return string Returns the parsed block, unmodified.
+ * @return array Returns the parsed block, unmodified.
  */
 function block_core_query_disable_enhanced_pagination( $parsed_block ) {
 	static $enhanced_query_stack   = array();

package/src/query/utils.js

@@ -272,32 +272,31 @@ export const getTransformedBlocksFromPattern = (
  * @return {string} The block name to be used in the patterns suggestions.
  */
 export function useBlockNameForPatterns( clientId, attributes ) {
-	const activeVariationName = useSelect(
-		( select ) =>
-			select( blocksStore ).getActiveBlockVariation(
-				'core/query',
-				attributes
-			)?.name,
-		[ attributes ]
-	);
-	const blockName = `core/query/${ activeVariationName }`;
-	const hasActiveVariationPatterns = useSelect(
+	return useSelect(
 		( select ) => {
+			const activeVariationName = select(
+				blocksStore
+			).getActiveBlockVariation( 'core/query', attributes )?.name;
+
 			if ( ! activeVariationName ) {
-				return false;
+				return 'core/query';
 			}
+
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
+
 			const rootClientId = getBlockRootClientId( clientId );
 			const activePatterns = getPatternsByBlockTypes(
-				blockName,
+				`core/query/${ activeVariationName }`,
 				rootClientId
 			);
-			return activePatterns.length > 0;
+
+			return activePatterns.length > 0
+				? `core/query/${ activeVariationName }`
+				: 'core/query';
 		},
-		[ clientId, activeVariationName, blockName ]
+		[ clientId, attributes ]
 	);
-	return hasActiveVariationPatterns ? blockName : 'core/query';
 }
 
 /**

package/src/rss/index.php

@@ -61,17 +61,20 @@ function render_block_core_rss( $attributes ) {
 			$author = $item->get_author();
 			if ( is_object( $author ) ) {
 				$author = $author->get_name();
-				$author = '<span class="wp-block-rss__item-author">' . sprintf(
-					/* translators: byline. %s: author. */
-					__( 'by %s' ),
-					esc_html( strip_tags( $author ) )
-				) . '</span>';
+				if ( ! empty( $author ) ) {
+					$author = '<span class="wp-block-rss__item-author">' . sprintf(
+						/* translators: byline. %s: author. */
+						__( 'by %s' ),
+						esc_html( strip_tags( $author ) )
+					) . '</span>';
+				}
 			}
 		}
 
-		$excerpt = '';
-		if ( $attributes['displayExcerpt'] ) {
-			$excerpt = html_entity_decode( $item->get_description(), ENT_QUOTES, get_option( 'blog_charset' ) );
+		$excerpt     = '';
+		$description = $item->get_description();
+		if ( $attributes['displayExcerpt'] && ! empty( $description ) ) {
+			$excerpt = html_entity_decode( $description, ENT_QUOTES, get_option( 'blog_charset' ) );
 			$excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' [&hellip;]' ) );
 
 			// Change existing [...] to [&hellip;].

package/src/search/style.scss

@@ -58,11 +58,9 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		// Prevent unintended text wrapping.
 		flex-shrink: 0;
 		max-width: 100%;
-	}
-
-	// Ensure minimum input field width in small viewports.
-	.wp-block-search__button[aria-expanded="true"] {
-		max-width: calc(100% - 100px);
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
 	}
 
 	.wp-block-search__inside-wrapper {

package/src/social-link/edit.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 
 import {
@@ -16,7 +16,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -24,6 +24,7 @@ import {
 	TextControl,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
@@ -112,12 +113,19 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
-		'wp-social-link__is-incomplete': ! url,
-		[ `has-${ iconColor }-color` ]: iconColor,
-		[ `has-${ iconBackgroundColor }-background-color` ]:
-			iconBackgroundColor,
-	} );
+	const wrapperClasses = clsx(
+		'wp-social-link',
+		// Manually adding this class for backwards compatibility of CSS when moving the
+		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
+		'wp-block-social-link',
+		'wp-social-link-' + service,
+		{
+			'wp-social-link__is-incomplete': ! url,
+			[ `has-${ iconColor }-color` ]: iconColor,
+			[ `has-${ iconBackgroundColor }-background-color` ]:
+				iconBackgroundColor,
+		}
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -131,11 +139,16 @@ const SocialLinkEdit = ( {
 	// spaces. The PHP render callback fallbacks to the social name as well.
 	const socialLinkText = label.trim() === '' ? socialLinkName : label;
 
+	const ref = useRef();
 	const blockProps = useBlockProps( {
-		className: classes,
-		style: {
-			color: iconColorValue,
-			backgroundColor: iconBackgroundColorValue,
+		className: 'wp-block-social-link-anchor',
+		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
+		onClick: () => setPopover( true ),
+		onKeyDown: ( event ) => {
+			if ( event.keyCode === ENTER ) {
+				event.preventDefault();
+				setPopover( true );
+			}
 		},
 	} );
 
@@ -169,13 +182,27 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
-				<button
-					className="wp-block-social-link-anchor"
-					ref={ setPopoverAnchor }
-					onClick={ () => setPopover( true ) }
-					aria-haspopup="dialog"
-				>
+			{ /*
+			 * Because the `<ul>` element has a role=document, the `<li>` is
+			 * not semantically correct, so adding role=presentation is cleaner.
+			 * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551
+			 */ }
+			<li
+				role="presentation"
+				className={ wrapperClasses }
+				style={ {
+					color: iconColorValue,
+					backgroundColor: iconBackgroundColorValue,
+				} }
+			>
+				{ /*
+				 * Disable reason: The `button` ARIA role is redundant but
+				 * blockProps has a role of `document` automatically applied
+				 * which breaks the semantics of this button since it removes
+				 * the information about the popover.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<button aria-haspopup="dialog" { ...blockProps } role="button">
 					<IconComponent />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
@@ -185,6 +212,7 @@ const SocialLinkEdit = ( {
 						{ socialLinkText }
 					</span>
 				</button>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

package/src/social-link/editor.scss

@@ -14,6 +14,8 @@
 	font-size: inherit;
 	color: currentColor;
 	height: auto;
+	font-weight: inherit;
+	font-family: inherit;
 
 	// This rule ensures social link buttons display correctly in template parts.
 	opacity: 1;
@@ -21,13 +23,10 @@
 	// This rule is duplicated from the style.scss and needs to be the same as there.
 	padding: 0.25em;
 
-	// Focus styles replicate the `@wordpress/components` button component.
-	&:focus:not(:disabled) {
-		border-radius: 2px;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 3px solid transparent;
+	// Override the shared `.wp-block-social-link` class used on both the li and button
+	// due to backwards compatibility from moving the blockProps from the li to the button.
+	&:hover {
+		transform: none;
 	}
 }