@wordpress/block-library 9.3.0 → 9.5.0

package/src/query/variations.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postList } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,53 +13,12 @@ import {
 	imageDateTitle,
 } from './icons';
 
-const QUERY_DEFAULT_ATTRIBUTES = {
-	query: {
-		perPage: 3,
-		pages: 0,
-		offset: 0,
-		postType: 'post',
-		order: 'desc',
-		orderBy: 'date',
-		author: '',
-		search: '',
-		exclude: [],
-		sticky: '',
-		inherit: false,
-	},
-};
-
 const variations = [
-	{
-		name: 'posts-list',
-		title: __( 'Posts List' ),
-		description: __(
-			'Display a list of your most recent posts, excluding sticky posts.'
-		),
-		icon: postList,
-		attributes: {
-			namespace: 'core/posts-list',
-			query: {
-				perPage: 4,
-				pages: 1,
-				offset: 0,
-				postType: 'post',
-				order: 'desc',
-				orderBy: 'date',
-				author: '',
-				search: '',
-				sticky: 'exclude',
-				inherit: false,
-			},
-		},
-		scope: [ 'inserter' ],
-		isActive: [ 'namespace', 'query.postType' ],
-	},
 	{
 		name: 'title-date',
 		title: __( 'Title & Date' ),
 		icon: titleDate,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -76,7 +34,7 @@ const variations = [
 		name: 'title-excerpt',
 		title: __( 'Title & Excerpt' ),
 		icon: titleExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -92,7 +50,7 @@ const variations = [
 		name: 'title-date-excerpt',
 		title: __( 'Title, Date, & Excerpt' ),
 		icon: titleDateExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -112,7 +70,7 @@ const variations = [
 		name: 'image-date-title',
 		title: __( 'Image, Date, & Title' ),
 		icon: imageDateTitle,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',

package/src/query-pagination-numbers/edit.js

@@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of links' ) }
 						help={ __(
 							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'

package/src/query-title/block.json

@@ -17,6 +17,9 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"showPrefix": {
 			"type": "boolean",
 			"default": true

package/src/query-title/edit.js

@@ -13,29 +13,29 @@ import {
 	useBlockProps,
 	Warning,
 	HeadingLevelDropdown,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useArchiveLabel } from './use-archive-label';
 
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
+	attributes: {
+		type,
+		level,
+		levelOptions,
+		textAlign,
+		showPrefix,
+		showSearchTerm,
+	},
 	setAttributes,
 } ) {
-	const { archiveTypeTitle, archiveNameLabel } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const {
-			__experimentalArchiveTitleNameLabel,
-			__experimentalArchiveTitleTypeLabel,
-		} = getSettings();
-		return {
-			archiveTypeTitle: __experimentalArchiveTitleTypeLabel,
-			archiveNameLabel: __experimentalArchiveTitleNameLabel,
-		};
-	} );
+	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
 
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
@@ -55,20 +55,20 @@ export default function QueryTitleEdit( {
 	let titleElement;
 	if ( type === 'archive' ) {
 		let title;
-		if ( archiveTypeTitle ) {
+		if ( archiveTypeLabel ) {
 			if ( showPrefix ) {
 				if ( archiveNameLabel ) {
 					title = sprintf(
 						/* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
 						__( '%1$s: %2$s' ),
-						archiveTypeTitle,
+						archiveTypeLabel,
 						archiveNameLabel
 					);
 				} else {
 					title = sprintf(
 						/* translators: %s: Archive type title e.g: "Category", "Tag"... */
 						__( '%s: Name' ),
-						archiveTypeTitle
+						archiveTypeLabel
 					);
 				}
 			} else if ( archiveNameLabel ) {
@@ -77,7 +77,7 @@ export default function QueryTitleEdit( {
 				title = sprintf(
 					/* translators: %s: Archive type title e.g: "Category", "Tag"... */
 					__( '%s name' ),
-					archiveTypeTitle
+					archiveTypeLabel
 				);
 			}
 		} else {
@@ -137,6 +137,7 @@ export default function QueryTitleEdit( {
 			<BlockControls group="block">
 				<HeadingLevelDropdown
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/query-title/use-archive-label.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export function useArchiveLabel() {
+	const templateSlug = useSelect( ( select ) => {
+		// @wordpress/block-library should not depend on @wordpress/editor.
+		// Blocks can be loaded into a *non-post* block editor, so to avoid
+		// declaring @wordpress/editor as a dependency, we must access its
+		// store by string.
+		// The solution here is to split WP specific blocks from generic blocks.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getCurrentPostId, getCurrentPostType, getCurrentTemplateId } =
+			select( 'core/editor' );
+		const currentPostType = getCurrentPostType();
+		const templateId =
+			getCurrentTemplateId() ||
+			( currentPostType === 'wp_template' ? getCurrentPostId() : null );
+
+		return templateId
+			? select( coreStore ).getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					templateId
+			  )?.slug
+			: null;
+	}, [] );
+	const taxonomyMatches = templateSlug?.match(
+		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
+	);
+	let taxonomy;
+	let term;
+	let isAuthor = false;
+	let authorSlug;
+	if ( taxonomyMatches ) {
+		// If is for a all taxonomies of a type
+		if ( taxonomyMatches[ 1 ] ) {
+			taxonomy = taxonomyMatches[ 2 ]
+				? taxonomyMatches[ 2 ]
+				: taxonomyMatches[ 1 ];
+		}
+		// If is for a all taxonomies of a type
+		else if ( taxonomyMatches[ 3 ] ) {
+			taxonomy = taxonomyMatches[ 6 ]
+				? taxonomyMatches[ 6 ]
+				: taxonomyMatches[ 4 ];
+			term = taxonomyMatches[ 7 ];
+		}
+		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
+
+		//getTaxonomy( 'category' );
+		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
+	} else {
+		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
+		if ( authorMatches ) {
+			isAuthor = true;
+			if ( authorMatches[ 2 ] ) {
+				authorSlug = authorMatches[ 2 ];
+			}
+		}
+	}
+	return useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy, getAuthors } =
+				select( coreStore );
+			let archiveTypeLabel;
+			let archiveNameLabel;
+			if ( taxonomy ) {
+				archiveTypeLabel =
+					getTaxonomy( taxonomy )?.labels?.singular_name;
+			}
+			if ( term ) {
+				const records = getEntityRecords( 'taxonomy', taxonomy, {
+					slug: term,
+					per_page: 1,
+				} );
+				if ( records && records[ 0 ] ) {
+					archiveNameLabel = records[ 0 ].name;
+				}
+			}
+			if ( isAuthor ) {
+				archiveTypeLabel = 'Author';
+				if ( authorSlug ) {
+					const authorRecords = getAuthors( { slug: authorSlug } );
+					if ( authorRecords && authorRecords[ 0 ] ) {
+						archiveNameLabel = authorRecords[ 0 ].name;
+					}
+				}
+			}
+			return {
+				archiveTypeLabel,
+				archiveNameLabel,
+			};
+		},
+		[ authorSlug, isAuthor, taxonomy, term ]
+	);
+}

package/src/quote/block.json

@@ -36,6 +36,18 @@
 				"backgroundImage": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"dimensions": {
 			"minHeight": true,
 			"__experimentalDefaultControls": {
@@ -70,7 +82,9 @@
 			"allowEditing": false
 		},
 		"spacing": {
-			"blockGap": true
+			"blockGap": true,
+			"padding": true,
+			"margin": true
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/quote/theme.scss

@@ -10,19 +10,21 @@
 		font-style: normal;
 	}
 
-	&.has-text-align-right {
+	&:where(.has-text-align-right) {
 		border-left: none;
 		border-right: 0.25em solid currentColor;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&.has-text-align-center {
+	&:where(.has-text-align-center) {
 		border: none;
 		padding-left: 0;
 	}
 	// .is-style-large and .is-large are kept for backwards compatibility.
-	&.is-style-plain,
+	// They are not wrapped in `:where()` to keep specificity as it was before
+	// they were deprecated.
+	&:where(.is-style-plain),
 	&.is-style-large,
 	&.is-large {
 		border: none;

package/src/search/block.json

@@ -85,6 +85,9 @@
 				"width": true
 			}
 		},
+		"spacing": {
+			"margin": true
+		},
 		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",

package/src/search/editor.scss

@@ -7,7 +7,7 @@
 }
 
 .wp-block-search {
-	.wp-block-search__button {
+	:where(.wp-block-search__button) {
 		height: auto;
 		border-radius: initial;
 		display: flex;

package/src/site-logo/edit.js

@@ -348,14 +348,29 @@ const SiteLogo = ( {
 
 // This is a light wrapper around MediaReplaceFlow because the block has two
 // different MediaReplaceFlows, one for the inspector and one for the toolbar.
-function SiteLogoReplaceFlow( { onRemoveLogo, ...mediaReplaceProps } ) {
+function SiteLogoReplaceFlow( {
+	mediaURL,
+	onRemoveLogo,
+	...mediaReplaceProps
+} ) {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
 		>
-			<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
+			{ ( { onClose } ) =>
+				mediaURL && (
+					<MenuItem
+						onClick={ () => {
+							onRemoveLogo();
+							onClose();
+						} }
+					>
+						{ __( 'Reset' ) }
+					</MenuItem>
+				)
+			}
 		</MediaReplaceFlow>
 	);
 }
@@ -392,7 +407,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -403,7 +417,10 @@ export default function LogoEdit( {
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const _canUserEdit = canUser( 'update', 'settings' );
+		const _canUserEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const siteSettings = _canUserEdit
 			? getEditedEntityRecord( 'root', 'site' )
 			: undefined;
@@ -512,16 +529,18 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
+			onRemoveLogo,
 		} );
 	};
 
 	const mediaReplaceFlowProps = {
 		mediaURL: logoUrl,
+		name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),
 		onSelect: onSelectLogo,
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && ! temporaryURL && (
+	const controls = canUserEdit && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -587,8 +606,6 @@ export default function LogoEdit( {
 
 	const blockProps = useBlockProps( { className: classes } );
 
-	const label = __( 'Add a site logo' );
-
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
 			<PanelBody title={ __( 'Media' ) }>
@@ -628,7 +645,7 @@ export default function LogoEdit( {
 											{ isLoading ? (
 												<Spinner />
 											) : (
-												__( 'Add media' )
+												__( 'Choose logo' )
 											) }
 										</Button>
 										<DropZone onFilesDrop={ onFilesDrop } />
@@ -668,9 +685,9 @@ export default function LogoEdit( {
 							<Button
 								icon={ upload }
 								variant="primary"
-								label={ label }
+								label={ __( 'Choose logo' ) }
 								showTooltip
-								tooltipPosition="top center"
+								tooltipPosition="middle right"
 								onClick={ () => {
 									open();
 								} }

package/src/site-tagline/block.json

@@ -14,9 +14,18 @@
 		"level": {
 			"type": "number",
 			"default": 0
+		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		}
+	},
+	"example": {
+		"viewportWidth": 350,
+		"attributes": {
+			"textAlign": "center"
 		}
 	},
-	"example": {},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
@@ -51,7 +60,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
-	"editorStyle": "wp-block-site-tagline-editor"
+	"editorStyle": "wp-block-site-tagline-editor",
+	"style": "wp-block-site-tagline"
 }

package/src/site-tagline/edit.js

@@ -18,23 +18,24 @@ import {
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign, level } = attributes;
+	const { textAlign, level, levelOptions } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
 		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
 
 		return {
-			canUserEdit: canUser( 'update', 'settings' ),
+			canUserEdit: canEdit,
 			tagline: canEdit
 				? settings?.description
 				: readOnlySettings?.description,
@@ -79,8 +80,8 @@ export default function SiteTaglineEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/site-tagline/style.scss

@@ -0,0 +1,4 @@
+.wp-block-site-tagline {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/site-title/block.json

@@ -11,6 +11,10 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -62,6 +66,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",

package/src/site-title/edit.js

@@ -21,18 +21,19 @@ import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTitleEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { level, textAlign, isLink, linkTarget } = attributes;
+	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
 		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
 
@@ -94,8 +95,8 @@ export default function SiteTitleEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/site-title/index.js

@@ -17,7 +17,12 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			textAlign: 'center',
+		},
+	},
 	edit,
 	transforms,
 	deprecated,

package/src/site-title/style.scss

@@ -1,3 +1,8 @@
-:root :where(.wp-block-site-title a) {
-	color: inherit;
+.wp-block-site-title {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	:where(a) {
+		color: inherit;
+	}
 }

package/src/social-link/edit.js

@@ -58,7 +58,6 @@ const SocialLinkURLPopover = ( {
 			>
 				<div className="block-editor-url-input">
 					<URLInput
-						__nextHasNoMarginBottom
 						value={ url }
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )

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

@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const SoundCloudIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z" />
+		<Path d="M23.994 14.552a3.36 3.36 0 01-3.401 3.171h-8.176a.685.685 0 01-.679-.681V8.238a.749.749 0 01.452-.716S12.942 7 14.526 7a5.357 5.357 0 012.748.755 5.44 5.44 0 012.56 3.546c.282-.08.574-.12.868-.119a3.273 3.273 0 013.292 3.37zM10.718 8.795a.266.266 0 10-.528 0c-.224 2.96-.397 5.735 0 8.685a.265.265 0 00.528 0c.425-2.976.246-5.7 0-8.685zM9.066 9.82a.278.278 0 00-.553 0 33.183 33.183 0 000 7.663.278.278 0 00.55 0c.33-2.544.332-5.12.003-7.664zM7.406 9.56a.269.269 0 00-.535 0c-.253 2.7-.38 5.222 0 7.917a.266.266 0 10.531 0c.394-2.73.272-5.181.004-7.917zM5.754 10.331a.275.275 0 10-.55 0 28.035 28.035 0 000 7.155.272.272 0 00.54 0c.332-2.373.335-4.78.01-7.155zM4.087 12.12a.272.272 0 00-.544 0c-.393 1.843-.208 3.52.016 5.386a.26.26 0 00.512 0c.247-1.892.435-3.53.016-5.386zM2.433 11.838a.282.282 0 00-.56 0c-.349 1.882-.234 3.54.01 5.418.025.285.508.282.54 0 .269-1.907.394-3.517.01-5.418zM.762 12.76a.282.282 0 00-.56 0c-.32 1.264-.22 2.31.023 3.578a.262.262 0 00.521 0c.282-1.293.42-2.317.016-3.578z" />
 	</SVG>
 );

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

@@ -49,7 +49,7 @@
 }
 
 .wp-social-link-facebook {
-	background-color: #1778f2;
+	background-color: #0866ff;
 	color: #fff;
 }