@wordpress/block-library 8.35.0 → 9.0.0

package/src/navigation-link/edit.js

@@ -261,6 +261,7 @@ export default function NavigationLinkEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
+	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
 
 	// Change the label using inspector causes rich text to change focus on firefox.
@@ -570,14 +571,27 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<LinkUI
+							ref={ linkUIref }
 							clientId={ clientId }
 							link={ attributes }
 							onClose={ () => {
 								// If there is no link then remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								if ( ! url ) {
-									// Select the previous block to keep focus nearby
-									selectPreviousBlock( clientId, true );
+									// Fixes https://github.com/WordPress/gutenberg/issues/61361
+									// There's a chance we're closing due to the user selecting the browse all button.
+									// Only move focus if the focus is still within the popover ui. If it's not within
+									// the popover, it's because something has taken the focus from the popover, and
+									// we don't want to steal it back.
+									if (
+										linkUIref.current.contains(
+											window.document.activeElement
+										)
+									) {
+										// Select the previous block to keep focus nearby
+										selectPreviousBlock( clientId, true );
+									}
+
 									// Remove the link.
 									onReplace( [] );
 									return;

package/src/navigation-link/link-ui.js

@@ -20,6 +20,7 @@ import {
 	useState,
 	useRef,
 	useEffect,
+	forwardRef,
 } from '@wordpress/element';
 import {
 	store as coreStore,
@@ -145,7 +146,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 	);
 }
 
-export function LinkUI( props ) {
+function UnforwardedLinkUI( props, ref ) {
 	const [ addingBlock, setAddingBlock ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -214,6 +215,7 @@ export function LinkUI( props ) {
 
 	return (
 		<Popover
+			ref={ ref }
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
@@ -298,6 +300,8 @@ export function LinkUI( props ) {
 	);
 }
 
+export const LinkUI = forwardRef( UnforwardedLinkUI );
+
 const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	const blockInserterAriaRole = 'listbox';
 	const addBlockButtonRef = useRef();

package/src/navigation-submenu/edit.js

@@ -459,34 +459,32 @@ export default function NavigationSubmenuEdit( {
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<ParentElement className="wp-block-navigation-item__content">
 					{ /* eslint-enable */ }
-					{
-						<RichText
-							ref={ ref }
-							identifier="label"
-							className="wp-block-navigation-item__label"
-							value={ label }
-							onChange={ ( labelValue ) =>
-								setAttributes( { label: labelValue } )
+					<RichText
+						ref={ ref }
+						identifier="label"
+						className="wp-block-navigation-item__label"
+						value={ label }
+						onChange={ ( labelValue ) =>
+							setAttributes( { label: labelValue } )
+						}
+						onMerge={ mergeBlocks }
+						onReplace={ onReplace }
+						aria-label={ __( 'Navigation link text' ) }
+						placeholder={ itemLabelPlaceholder }
+						withoutInteractiveFormatting
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+						onClick={ () => {
+							if ( ! openSubmenusOnClick && ! url ) {
+								setIsLinkOpen( true );
+								setOpenedBy( ref.current );
 							}
-							onMerge={ mergeBlocks }
-							onReplace={ onReplace }
-							aria-label={ __( 'Navigation link text' ) }
-							placeholder={ itemLabelPlaceholder }
-							withoutInteractiveFormatting
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/image',
-								'core/strikethrough',
-							] }
-							onClick={ () => {
-								if ( ! openSubmenusOnClick && ! url ) {
-									setIsLinkOpen( true );
-									setOpenedBy( ref.current );
-								}
-							} }
-						/>
-					}
+						} }
+					/>
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<LinkUI
 							clientId={ clientId }

package/src/page-list/convert-to-links-modal.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
@@ -13,12 +14,20 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 		<Modal
 			onRequestClose={ onClose }
 			title={ __( 'Edit Page List' ) }
-			className={ 'wp-block-page-list-modal' }
+			className="wp-block-page-list-modal"
 			aria={ {
-				describedby: 'wp-block-page-list-modal__description',
+				describedby: useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
+				),
 			} }
 		>
-			<p id={ 'wp-block-page-list-modal__description' }>
+			<p
+				id={ useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
+				) }
+			>
 				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">

package/src/page-list/edit.js

@@ -63,7 +63,7 @@ function BlockContent( {
 	if ( pages === null ) {
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'warning' } isDismissible={ false }>
+				<Notice status="warning" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>
@@ -73,7 +73,7 @@ function BlockContent( {
 	if ( pages.length === 0 ) {
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'info' } isDismissible={ false }>
+				<Notice status="info" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>
@@ -101,7 +101,7 @@ function BlockContent( {
 
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'warning' } isDismissible={ false }>
+				<Notice status="warning" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>

package/src/paragraph/style.scss

@@ -38,7 +38,8 @@ p.has-drop-cap.has-background {
 	overflow: hidden;
 }
 
-p.has-background {
+// Specificity is reduced to 0-1-0 so global styles can override this.
+:root :where(p.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 

package/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Paragraph block should render without crashing and match snapshot 1`] = `
 <View
   style={

package/src/paragraph/test/edit.native.js

@@ -64,6 +64,32 @@ describe( 'Paragraph block', () => {
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
+	it( 'should prevent deleting the first Paragraph block when pressing backspace at the start', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

package/src/pullquote/editor.scss

@@ -1,4 +1,6 @@
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {
 		font-size: 32px;

package/src/pullquote/style.scss

@@ -2,6 +2,8 @@
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
+	margin: 0 0 1em 0;
+	padding: 4em 0;
 
 	p,
 	blockquote,
@@ -35,12 +37,6 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout and global styles.
-:where(.wp-block-pullquote) {
-	margin: 0 0 1em 0;
-	padding: 4em 0;
-}
-
 // Ensure that we are reasonably specific to override theme defaults.
 .wp-block-pullquote.has-text-align-left blockquote {
 	text-align: left;
@@ -52,6 +48,8 @@
 }
 
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {

package/src/pullquote/theme.scss

@@ -1,11 +1,9 @@
-:where(.wp-block-pullquote) {
+.wp-block-pullquote {
 	border-top: 4px solid currentColor;
 	border-bottom: 4px solid currentColor;
 	margin-bottom: 1.75em;
 	color: currentColor;
-}
 
-.wp-block-pullquote {
 	cite,
 	footer,
 	&__citation {

package/src/query/save.js

@@ -3,7 +3,7 @@
  */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
+export default function save( { attributes: { tagName: Tag = 'div' } } ) {
 	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <Tag { ...innerBlocksProps } />;

package/src/query/variations.js

@@ -54,9 +54,7 @@ const variations = [
 			},
 		},
 		scope: [ 'inserter' ],
-		isActive: ( { namespace, query } ) => {
-			return namespace === 'core/posts-list' && query.postType === 'post';
-		},
+		isActive: [ 'namespace', 'query.postType' ],
 	},
 	{
 		name: 'title-date',

package/src/query-no-results/save.js

@@ -3,6 +3,6 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function QueryNoResultsSave() {
+export default function save() {
 	return <InnerBlocks.Content />;
 }

package/src/quote/theme.scss

@@ -1,4 +1,4 @@
-:where(.wp-block-quote) {
+.wp-block-quote {
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;

package/src/search/edit.js

@@ -112,13 +112,19 @@ export default function SearchEdit( {
 	] );
 
 	const borderRadius = style?.border?.radius;
-	const borderProps = useBorderProps( attributes );
+	let borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
 	// check so that a borderRadius style won't overwrite the longhand
 	// per-corner styles.
 	if ( typeof borderRadius === 'number' ) {
-		borderProps.style.borderRadius = `${ borderRadius }px`;
+		borderProps = {
+			...borderProps,
+			style: {
+				...borderProps.style,
+				borderRadius: `${ borderRadius }px`,
+			},
+		};
 	}
 
 	const colorProps = useColorProps( attributes );
@@ -435,7 +441,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							__unstableInputWidth={ '80px' }
+							__unstableInputWidth="80px"
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>

package/src/separator/editor.scss

@@ -2,11 +2,4 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
-
-	// This is also set in style.scss, but needs a higher specificity in editor
-	// due to the way that color block supports adds additional background color styles.
-	&.wp-block-separator.is-style-dots {
-		background: none !important;
-		border: none;
-	}
 }

package/src/separator/style.scss

@@ -1,28 +1,4 @@
 .wp-block-separator {
-	// Dots style
-	&.is-style-dots {
-		// Override any background themes often set on the hr tag for this style.
-		// also override the color set in the editor since it's intented for normal HR
-		background: none !important;
-		border: none;
-		text-align: center;
-		line-height: 1;
-		height: auto;
-
-		&::before {
-			content: "\00b7 \00b7 \00b7";
-			color: currentColor;
-			font-size: 1.5em;
-			letter-spacing: 2em;
-			/*rtl:ignore*/
-			padding-left: 2em;
-			font-family: serif;
-		}
-	}
-}
-
-// Lowest specificity to avoid overriding global styles.
-:where(.wp-block-separator) {
 	border-top: 2px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
@@ -31,3 +7,31 @@
 	border-right: none;
 	border-bottom: none;
 }
+
+// Dots block style variation
+:root :where(.wp-block-separator.is-style-dots) {
+	text-align: center;
+	line-height: 1;
+	height: auto;
+
+	&::before {
+		content: "\00b7 \00b7 \00b7";
+		color: currentColor;
+		font-size: 1.5em;
+		letter-spacing: 2em;
+		/*rtl:ignore*/
+		padding-left: 2em;
+		font-family: serif;
+	}
+}
+
+// The following overrides should be enforced regardless of global styles.
+// The dots block style uses a pseudo element to render the dots. Background
+// color and borders would break this aesthetic.
+.wp-block-separator.is-style-dots {
+	// Override any background themes often set on the hr tag for this style.
+	// also override the color set in the editor since it's intended for normal HR
+	background: none !important;
+	// Important required to ensure dots does not get a border.
+	border: none !important;
+}

package/src/site-logo/edit.js

@@ -73,7 +73,6 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = clsx( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -136,7 +135,7 @@ const SiteLogo = ( {
 			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
-				className={ classes }
+				className="custom-logo-link"
 				rel="home"
 				title={ title }
 				onClick={ ( event ) => event.preventDefault() }

package/src/site-logo/style.scss

@@ -31,11 +31,11 @@
 		margin-right: auto;
 		text-align: center;
 	}
+}
 
-	// Style variations
-	&.is-style-rounded {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
+// Style variations
+:root :where(.wp-block-site-logo.is-style-rounded) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
 }

package/src/site-title/editor.scss

@@ -3,8 +3,6 @@
 	border: 1px dashed;
 }
 
-.editor-styles-wrapper .wp-block-site-title {
-	a {
-		color: inherit;
-	}
+.editor-styles-wrapper :where(.wp-block-site-title a) {
+	color: inherit;
 }

package/src/site-title/style.scss

@@ -1,5 +1,3 @@
-.wp-block-site-title {
-	a {
-		color: inherit;
-	}
+:root :where(.wp-block-site-title a) {
+	color: inherit;
 }

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/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;