@wordpress/block-library 7.9.0 → 7.12.0

package/src/quote/transforms.js

@@ -1,188 +1,154 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
 		{
 			type: 'block',
-			isMultiBlock: true,
-			blocks: [ 'core/paragraph' ],
-			transform: ( attributes ) => {
-				return createBlock( 'core/quote', {
-					value: toHTMLString( {
-						value: join(
-							attributes.map( ( { content } ) =>
-								create( { html: content } )
-							),
-							'\u2028'
-						),
-						multilineTag: 'p',
-					} ),
-					anchor: attributes.anchor,
-				} );
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation, anchor, fontSize, style } ) => {
+				return createBlock(
+					'core/quote',
+					{
+						citation,
+						anchor,
+						fontSize,
+						style,
+					},
+					parseWithAttributeSchema( value, {
+						type: 'array',
+						source: 'query',
+						selector: 'p',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+						},
+					} ).map( ( { content } ) =>
+						createBlock( 'core/paragraph', { content } )
+					)
+				);
 			},
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/heading' ],
-			transform: ( { content, anchor } ) => {
-				return createBlock( 'core/quote', {
-					value: `<p>${ content }</p>`,
-					anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor } ) =>
-				createBlock( 'core/quote', {
-					value,
-					citation,
-					anchor,
-				} ),
+			blocks: [ 'core/group' ],
+			transform: ( { anchor }, innerBlocks ) =>
+				createBlock( 'core/quote', { anchor }, innerBlocks ),
 		},
 		{
 			type: 'prefix',
 			prefix: '>',
-			transform: ( content ) => {
-				return createBlock( 'core/quote', {
-					value: `<p>${ content }</p>`,
-				} );
-			},
+			transform: ( content ) =>
+				createBlock( 'core/quote', {}, [
+					createBlock( 'core/paragraph', { content } ),
+				] ),
 		},
 		{
 			type: 'raw',
-			isMatch: ( node ) => {
-				const isParagraphOrSingleCite = ( () => {
-					let hasCitation = false;
-					return ( child ) => {
-						// Child is a paragraph.
-						if ( child.nodeName === 'P' ) {
-							return true;
-						}
-						// Child is a cite and no other cite child exists before it.
-						if ( ! hasCitation && child.nodeName === 'CITE' ) {
-							hasCitation = true;
-							return true;
-						}
-					};
-				} )();
-				return (
-					node.nodeName === 'BLOCKQUOTE' &&
-					// The quote block can only handle multiline paragraph
-					// content with an optional cite child.
-					Array.from( node.childNodes ).every(
-						isParagraphOrSingleCite
-					)
-				);
-			},
-			schema: ( { phrasingContentSchema } ) => ( {
+			schema: () => ( {
 				blockquote: {
-					children: {
-						p: {
-							children: phrasingContentSchema,
-						},
-						cite: {
-							children: phrasingContentSchema,
-						},
-					},
+					children: '*',
 				},
 			} ),
-		},
-	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ 'core/paragraph' ],
-			transform: ( { value, citation } ) => {
-				const paragraphs = [];
-				if ( value && value !== '<p></p>' ) {
-					paragraphs.push(
-						...split(
-							create( { html: value, multilineTag: 'p' } ),
-							'\u2028'
-						).map( ( piece ) =>
-							createBlock( 'core/paragraph', {
-								content: toHTMLString( { value: piece } ),
-							} )
-						)
-					);
-				}
-				if ( citation && citation !== '<p></p>' ) {
-					paragraphs.push(
-						createBlock( 'core/paragraph', {
-							content: citation,
-						} )
-					);
-				}
-
-				if ( paragraphs.length === 0 ) {
-					return createBlock( 'core/paragraph', {
-						content: '',
-					} );
-				}
-				return paragraphs;
+			selector: 'blockquote',
+			transform: ( node, handler ) => {
+				return createBlock(
+					'core/quote',
+					// Don't try to parse any `cite` out of this content.
+					// * There may be more than one cite.
+					// * There may be more attribution text than just the cite.
+					// * If the cite is nested in the quoted text, it's wrong to
+					//   remove it.
+					{},
+					handler( {
+						HTML: node.innerHTML,
+						mode: 'BLOCKS',
+					} )
+				);
 			},
 		},
-
 		{
 			type: 'block',
-			blocks: [ 'core/heading' ],
-			transform: ( { value, citation, ...attrs } ) => {
-				// If there is no quote content, use the citation as the
-				// content of the resulting heading. A nonexistent citation
-				// will result in an empty heading.
-				if ( value === '<p></p>' ) {
-					return createBlock( 'core/heading', {
-						content: citation,
-					} );
-				}
-
-				const pieces = split(
-					create( { html: value, multilineTag: 'p' } ),
-					'\u2028'
-				);
-
-				const headingBlock = createBlock( 'core/heading', {
-					content: toHTMLString( { value: pieces[ 0 ] } ),
-				} );
-
-				if ( ! citation && pieces.length === 1 ) {
-					return headingBlock;
-				}
-
-				const quotePieces = pieces.slice( 1 );
-
-				const quoteBlock = createBlock( 'core/quote', {
-					...attrs,
-					citation,
-					value: toHTMLString( {
-						value: quotePieces.length
-							? join( pieces.slice( 1 ), '\u2028' )
-							: create(),
-						multilineTag: 'p',
-					} ),
-				} );
-
-				return [ headingBlock, quoteBlock ];
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			isMatch: ( {}, blocks ) => {
+				return ! blocks.some( ( { name } ) => name === 'core/quote' );
 			},
+			__experimentalConvert: ( blocks ) =>
+				createBlock(
+					'core/quote',
+					{},
+					blocks.map( ( block ) =>
+						createBlock(
+							block.name,
+							block.attributes,
+							block.innerBlocks
+						)
+					)
+				),
 		},
-
+	],
+	to: [
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor } ) => {
+			isMatch: ( {}, block ) => {
+				return block.innerBlocks.every(
+					( { name } ) => name === 'core/paragraph'
+				);
+			},
+			transform: (
+				{ citation, anchor, fontSize, style },
+				innerBlocks
+			) => {
+				const value = innerBlocks
+					.map(
+						( { attributes } ) => `<p>${ attributes.content }</p>`
+					)
+					.join( '' );
 				return createBlock( 'core/pullquote', {
 					value,
 					citation,
 					anchor,
+					fontSize,
+					style,
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { citation, anchor }, innerBlocks ) =>
+				createBlock(
+					'core/group',
+					{ anchor },
+					citation
+						? [
+								...innerBlocks,
+								createBlock( 'core/paragraph', {
+									content: citation,
+								} ),
+						  ]
+						: innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( { citation }, innerBlocks ) =>
+				citation
+					? [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: citation,
+							} ),
+					  ]
+					: innerBlocks,
+		},
 	],
 };
 

package/src/search/style.scss

@@ -34,6 +34,8 @@
 .wp-block-search__input {
 	padding: 8px;
 	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
 	min-width: 3em;
 	border: 1px solid #949494;
 	font-size: inherit;

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

@@ -11,7 +11,14 @@ exports[`Search Block renders block with button inside option 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -119,7 +126,14 @@ exports[`Search Block renders block with button inside option 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -191,7 +205,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -359,7 +380,14 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -431,7 +459,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -539,7 +574,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -611,7 +653,14 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}

package/src/search/theme.scss

@@ -3,3 +3,8 @@
 		font-weight: bold;
 	}
 }
+
+.wp-block-search__button {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}

package/src/separator/edit.js

@@ -37,7 +37,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 			'has-css-opacity': opacity === 'css',
 			'has-alpha-channel-opacity': opacity === 'alpha-channel',
 		},
-		colorProps.classname
+		colorProps.className
 	);
 
 	const styles = {

package/src/separator/test/edit.js

@@ -66,7 +66,8 @@ describe( 'Separator block edit method', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			// For backwards compatibility the has-text-color class is also added even though it is only needed for
 			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -85,7 +86,8 @@ describe( 'Separator block edit method', () => {
 		};
 		render( <SeparatorEdit { ...props } /> );
 		expect( useBlockProps ).toHaveBeenCalledWith( {
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -106,7 +108,7 @@ describe( 'Separator block edit method', () => {
 		// background color classes are added by useBlockProps which has to be mocked.
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className:
-				'has-text-color has-banana-color has-alpha-channel-opacity',
+				'has-text-color has-banana-color has-alpha-channel-opacity has-banana-background-color has-background',
 			style: undefined,
 		} );
 	} );

package/src/site-logo/edit.js

@@ -358,7 +358,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
 	const {
@@ -420,13 +419,7 @@ export default function LogoEdit( {
 			site_icon: newValue ?? null,
 		} );
 
-	let alt = null;
-	if ( mediaItemData ) {
-		alt = mediaItemData.alt_text;
-		if ( logoUrl !== mediaItemData.source_url ) {
-			setLogoUrl( mediaItemData.source_url );
-		}
-	}
+	const { alt_text: alt, source_url: logoUrl } = mediaItemData ?? {};
 
 	const onInitialSelectLogo = ( media ) => {
 		// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no
@@ -452,7 +445,6 @@ export default function LogoEdit( {
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
 			setLogo( undefined );
-			setLogoUrl( media.url );
 			return;
 		}
 
@@ -461,7 +453,6 @@ export default function LogoEdit( {
 
 	const onRemoveLogo = () => {
 		setLogo( null );
-		setLogoUrl( undefined );
 		setAttributes( { width: undefined } );
 	};
 
@@ -542,7 +533,7 @@ export default function LogoEdit( {
 			{ !! logoUrl && logoImage }
 			{ ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
-					{ isLoading && (
+					{ !! isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>

package/src/site-title/edit/level-toolbar.js

@@ -21,6 +21,7 @@ export default function LevelControl( { level, onChange } ) {
 					  sprintf( __( 'Heading %d' ), currentLevel ),
 			isActive,
 			onClick: () => onChange( currentLevel ),
+			role: 'menuitemradio',
 		};
 	} );
 	return (

package/src/site-title/index.php

@@ -21,22 +21,21 @@ function render_block_core_site_title( $attributes ) {
 	$tag_name         = 'h1';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
-
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( $attributes['isLink'] ) {
-		$link_attrs = array(
-			'href="' . esc_url( get_bloginfo( 'url' ) ) . '"',
-			'rel="' . esc_attr( 'home' ) . '"',
+		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
+
+		$site_title = sprintf(
+			'<a href="%1$s" target="%2$s" rel="home"%3$s>%4$s</a>',
+			esc_url( home_url() ),
+			esc_attr( $link_target ),
 			$aria_current,
+			esc_html( $site_title )
 		);
-		if ( '_blank' === $attributes['linkTarget'] ) {
-			$link_attrs[] = 'target="_blank"';
-		}
-		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), esc_html( $site_title ) );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/social-link/editor.scss

@@ -9,6 +9,9 @@
 		height: auto;
 		line-height: 0;
 
+		// This rule ensures social link buttons display correctly in template parts.
+		opacity: 1;
+
 		// This rule is duplicated from the style.scss and needs to be the same as there.
 		padding: 0.25em;
 	}

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

@@ -37,6 +37,7 @@ export * from './twitch';
 export * from './twitter';
 export * from './vimeo';
 export * from './vk';
+export * from './whatsapp';
 export * from './wordpress';
 export * from './yelp';
 export * from './youtube';

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

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const WhatsAppIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z" />
+	</SVG>
+);

package/src/social-link/index.php

@@ -27,6 +27,22 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		return '';
 	}
 
+	/**
+	 * Prepend emails with `mailto:` if not set.
+	 * The `is_email` returns false for emails with schema.
+	 */
+	if ( is_email( $url ) ) {
+		$url = 'mailto:' . $url;
+	}
+
+	/**
+	 * Prepend URL with https:// if it doesn't appear to contain a scheme
+	 * and it's not a relative link starting with //.
+	 */
+	if ( ! parse_url( $url, PHP_URL_SCHEME ) && ! str_starts_with( $url, '//' ) ) {
+		$url = 'https://' . $url;
+	}
+
 	$rel_target_attributes = '';
 	if ( $open_in_new_tab ) {
 		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
@@ -266,6 +282,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'WordPress',
 			'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="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>',
 		),
+		'whatsapp'      => array(
+			'name' => 'WhatsApp',
+			'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="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path></svg>',
+		),
 		'yelp'          => array(
 			'name' => 'Yelp',
 			'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="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',
@@ -276,7 +296,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'share'         => array(
 			'name' => 'Share Icon',
-			'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
+			'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
 		),
 	);
 

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

@@ -189,6 +189,11 @@
 	color: #fff;
 }
 
+.wp-social-link-whatsapp {
+	background-color: #25d366;
+	color: #fff;
+}
+
 .wp-social-link-yelp {
 	background-color: #d32422;
 	color: #fff;

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

@@ -143,6 +143,11 @@
 	color: #4680c2;
 }
 
+.wp-social-link-whatsapp {
+	background-color: #25d366;
+	color: #fff;
+}
+
 .wp-social-link-wordpress {
 	color: #3499cd;
 }