@wordpress/block-library 8.11.0 → 8.12.0

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

@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -30,16 +30,18 @@ export default function QueryPaginationPreviousEdit( {
 					{ displayArrow }
 				</span>
 			) }
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Previous page link' ) }
-				placeholder={ __( 'Previous Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Previous page link' ) }
+					placeholder={ __( 'Previous Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 		</a>
 	);
 }

package/src/query-pagination-previous/index.php

@@ -19,9 +19,14 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Previous Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label = $pagination_arrow . $label;
 	}
@@ -29,7 +34,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 

package/src/query-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-title",
 	"title": "Query Title",
 	"category": "theme",

package/src/quote/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/quote",
 	"title": "Quote",
 	"category": "text",

package/src/read-more/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/read-more",
 	"title": "Read More",
 	"category": "theme",

package/src/rss/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/rss",
 	"title": "RSS",
 	"category": "widgets",

package/src/search/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/search",
 	"title": "Search",
 	"category": "widgets",
@@ -42,6 +42,14 @@
 		"query": {
 			"type": "object",
 			"default": {}
+		},
+		"buttonBehavior": {
+			"type": "string",
+			"default": "expand-searchfield"
+		},
+		"isSearchFieldHidden": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

package/src/search/edit.js

@@ -19,7 +19,7 @@ import {
 	useSetting,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -59,6 +59,8 @@ import {
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
 
+const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
+
 export default function SearchEdit( {
 	className,
 	attributes,
@@ -77,6 +79,8 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		buttonBehavior,
+		isSearchFieldHidden,
 		style,
 	} = attributes;
 
@@ -130,12 +134,33 @@ export default function SearchEdit( {
 	const isButtonPositionOutside = 'button-outside' === buttonPosition;
 	const hasNoButton = 'no-button' === buttonPosition;
 	const hasOnlyButton = 'button-only' === buttonPosition;
+	const searchFieldRef = useRef();
+	const buttonRef = useRef();
 
 	const units = useCustomUnits( {
 		availableUnits: [ '%', 'px' ],
 		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
 	} );
 
+	useEffect( () => {
+		if ( hasOnlyButton && ! isSelected ) {
+			setAttributes( {
+				isSearchFieldHidden: true,
+			} );
+		}
+	}, [ hasOnlyButton, isSelected, setAttributes ] );
+
+	// Show the search field when width changes.
+	useEffect( () => {
+		if ( ! hasOnlyButton || ! isSelected ) {
+			return;
+		}
+
+		setAttributes( {
+			isSearchFieldHidden: false,
+		} );
+	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
+
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
@@ -152,6 +177,12 @@ export default function SearchEdit( {
 				: undefined,
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
+				: undefined,
+			hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior
+				? 'wp-block-search__button-behavior-expand'
+				: undefined,
+			hasOnlyButton && isSearchFieldHidden
+				? 'wp-block-search__searchfield-hidden'
 				: undefined
 		);
 	};
@@ -165,6 +196,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-outside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -176,6 +208,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-inside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -187,6 +220,19 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'no-button',
+					isSearchFieldHidden: false,
+				} );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Button Only' ),
+			isActive: buttonPosition === 'button-only',
+			icon: buttonOnly,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'button-only',
+					isSearchFieldHidden: true,
 				} );
 			},
 		},
@@ -247,6 +293,7 @@ export default function SearchEdit( {
 				onChange={ ( event ) =>
 					setAttributes( { placeholder: event.target.value } )
 				}
+				ref={ searchFieldRef }
 			/>
 		);
 	};
@@ -268,6 +315,13 @@ export default function SearchEdit( {
 				? { borderRadius }
 				: borderProps.style ),
 		};
+		const handleButtonClick = () => {
+			if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) {
+				setAttributes( {
+					isSearchFieldHidden: ! isSearchFieldHidden,
+				} );
+			}
+		};
 
 		return (
 			<>
@@ -281,6 +335,8 @@ export default function SearchEdit( {
 								? stripHTML( buttonText )
 								: __( 'Search' )
 						}
+						onClick={ handleButtonClick }
+						ref={ buttonRef }
 					>
 						<Icon icon={ search } />
 					</button>
@@ -297,6 +353,7 @@ export default function SearchEdit( {
 						onChange={ ( html ) =>
 							setAttributes( { buttonText: html } )
 						}
+						onClick={ handleButtonClick }
 					/>
 				) }
 			</>
@@ -516,14 +573,15 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside || isButtonPositionOutside ) && (
+				{ ( isButtonPositionInside ||
+					isButtonPositionOutside ||
+					hasOnlyButton ) && (
 					<>
 						{ renderTextField() }
 						{ renderButton() }
 					</>
 				) }
 
-				{ hasOnlyButton && renderButton() }
 				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>

package/src/search/index.php

@@ -29,11 +29,11 @@ function render_block_core_search( $attributes ) {
 	$classnames          = classnames_for_block_core_search( $attributes );
 	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
 	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input          = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
-	$input_markup        = '';
-	$button_markup       = '';
+	$button_behavior     = ( ! empty( $attributes['buttonBehavior'] ) ) ? $attributes['buttonBehavior'] : 'default';
+	$button              = '';
 	$query_params_markup = '';
 	$inline_styles       = styles_for_block_core_search( $attributes );
 	$color_classes       = get_color_classes_for_block_core_search( $attributes );
@@ -44,42 +44,37 @@ function render_block_core_search( $attributes ) {
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
-
-	$label_markup = sprintf(
-		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		esc_attr( $input_id ),
-		$label_inner_html
-	);
-	if ( $show_label && ! empty( $attributes['label'] ) ) {
-		$label_classes = array( 'wp-block-search__label' );
-		if ( ! empty( $typography_classes ) ) {
-			$label_classes[] = $typography_classes;
+	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
+	if ( $label->next_tag() ) {
+		$label->set_attribute( 'for', $input_id );
+		$label->add_class( 'wp-block-search__label' );
+		if ( $show_label && ! empty( $attributes['label'] ) ) {
+			if ( ! empty( $typography_classes ) ) {
+				$label->add_class( $typography_classes );
+			}
+		} else {
+			$label->add_class( 'screen-reader-text' );
 		}
-		$label_markup = sprintf(
-			'<label for="%1$s" class="%2$s" %3$s>%4$s</label>',
-			esc_attr( $input_id ),
-			esc_attr( implode( ' ', $label_classes ) ),
-			$inline_styles['label'],
-			$label_inner_html
-		);
 	}
 
-	if ( $show_input ) {
-		$input_classes = array( 'wp-block-search__input' );
-		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
-			$input_classes[] = $border_color_classes;
-		}
-		if ( ! empty( $typography_classes ) ) {
-			$input_classes[] = $typography_classes;
+	$input         = new WP_HTML_Tag_Processor( sprintf( '<input type="search" name="s" required %s/>', $inline_styles['input'] ) );
+	$input_classes = array( 'wp-block-search__input' );
+	if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+		$input_classes[] = $border_color_classes;
+	}
+	if ( ! empty( $typography_classes ) ) {
+		$input_classes[] = $typography_classes;
+	}
+	if ( $input->next_tag() ) {
+		$input->add_class( implode( ' ', $input_classes ) );
+		$input->set_attribute( 'id', $input_id );
+		$input->set_attribute( 'value', get_search_query() );
+		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
+		if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) {
+			$input->set_attribute( 'aria-hidden', 'true' );
+			$input->set_attribute( 'tabindex', '-1' );
+			wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) );
 		}
-		$input_markup = sprintf(
-			'<input type="search" id="%s" class="%s" name="s" value="%s" placeholder="%s" %s required />',
-			$input_id,
-			esc_attr( implode( ' ', $input_classes ) ),
-			get_search_query(),
-			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['input']
-		);
 	}
 
 	if ( count( $query_params ) > 0 ) {
@@ -101,7 +96,6 @@ function render_block_core_search( $attributes ) {
 		if ( ! empty( $typography_classes ) ) {
 			$button_classes[] = $typography_classes;
 		}
-		$aria_label = '';
 
 		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
 			$button_classes[] = $border_color_classes;
@@ -111,9 +105,7 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes[] = 'has-icon';
-
+			$button_classes[]       = 'has-icon';
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
@@ -122,13 +114,18 @@ function render_block_core_search( $attributes ) {
 
 		// Include the button element class.
 		$button_classes[] = wp_theme_get_element_class_name( 'button' );
-		$button_markup    = sprintf(
-			'<button type="submit" class="%s" %s %s>%s</button>',
-			esc_attr( implode( ' ', $button_classes ) ),
-			$inline_styles['button'],
-			$aria_label,
-			$button_internal_markup
-		);
+		$button           = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
+
+		if ( $button->next_tag() ) {
+			$button->add_class( implode( ' ', $button_classes ) );
+			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
+				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
+				$button->set_attribute( 'aria-expanded', 'false' );
+			} else {
+				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
+			}
+		}
 	}
 
 	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
@@ -136,7 +133,7 @@ function render_block_core_search( $attributes ) {
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
 		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
-		$input_markup . $query_params_markup . $button_markup
+		$input . $query_params_markup . $button
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
@@ -146,7 +143,7 @@ function render_block_core_search( $attributes ) {
 		'<form role="search" method="get" action="%s" %s>%s</form>',
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
-		$label_markup . $field_markup
+		$label . $field_markup
 	);
 }
 
@@ -188,6 +185,9 @@ function classnames_for_block_core_search( $attributes ) {
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
 			$classnames[] = 'wp-block-search__button-only';
+			if ( ! empty( $attributes['buttonBehavior'] ) && 'expand-searchfield' === $attributes['buttonBehavior'] ) {
+				$classnames[] = 'wp-block-search__button-behavior-expand wp-block-search__searchfield-hidden';
+			}
 		}
 	}
 
@@ -294,10 +294,9 @@ function styles_for_block_core_search( $attributes ) {
 	$show_label       = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel'];
 
 	// Add width styles.
-	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
-	$button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
+	$has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
 
-	if ( $has_width && ! $button_only ) {
+	if ( $has_width ) {
 		$wrapper_styles[] = sprintf(
 			'width: %d%s;',
 			esc_attr( $attributes['width'] ),

package/src/search/style.scss

@@ -81,3 +81,42 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
 	margin: auto;
 }
+
+.wp-block-search__button-behavior-expand {
+	.wp-block-search__inside-wrapper {
+		transition-property: width;
+		min-width: 0 !important;
+	}
+
+	.wp-block-search__input {
+		transition-duration: 300ms;
+		flex-basis: 100%;
+	}
+
+	// !important here to override inline styles on button only deselected view.
+	&.wp-block-search__searchfield-hidden {
+		overflow: hidden;
+
+		.wp-block-search__inside-wrapper {
+			overflow: hidden;
+		}
+
+		.wp-block-search__input {
+			width: 0 !important;
+			min-width: 0 !important;
+			padding-left: 0 !important;
+			padding-right: 0 !important;
+			border-left-width: 0 !important;
+			border-right-width: 0 !important;
+			flex-grow: 0;
+			margin: 0;
+			flex-basis: 0;
+		}
+	}
+}
+
+.wp-block[data-align="right"] .wp-block-search__button-behavior-expand {
+	.wp-block-search__inside-wrapper {
+		float: right;
+	}
+}

package/src/search/view.js

@@ -0,0 +1,68 @@
+window.addEventListener( 'DOMContentLoaded', () => {
+	const hiddenClass = 'wp-block-search__searchfield-hidden';
+
+	Array.from(
+		document.getElementsByClassName(
+			'wp-block-search__button-behavior-expand'
+		)
+	).forEach( ( block ) => {
+		const searchField = block.querySelector( '.wp-block-search__input' );
+		const searchButton = block.querySelector( '.wp-block-search__button' );
+		const searchLabel = block.querySelector( '.wp-block-search__label' );
+		const ariaLabel = searchButton.getAttribute( 'aria-label' );
+		const id = searchField.getAttribute( 'id' );
+
+		const toggleSearchField = ( showSearchField ) => {
+			if ( showSearchField ) {
+				searchField.removeAttribute( 'aria-hidden' );
+				searchField.removeAttribute( 'tabindex' );
+				searchButton.removeAttribute( 'aria-expanded' );
+				searchButton.removeAttribute( 'aria-controls' );
+				searchButton.setAttribute( 'type', 'submit' );
+				searchButton.setAttribute( 'aria-label', 'Submit Search' );
+
+				return block.classList.remove( hiddenClass );
+			}
+
+			searchButton.removeAttribute( 'type' );
+			searchField.setAttribute( 'aria-hidden', 'true' );
+			searchField.setAttribute( 'tabindex', '-1' );
+			searchButton.setAttribute( 'aria-expanded', 'false' );
+			searchButton.setAttribute( 'aria-controls', id );
+			searchButton.setAttribute( 'aria-label', ariaLabel );
+			return block.classList.add( hiddenClass );
+		};
+
+		const hideSearchField = ( e ) => {
+			if ( ! e.target.closest( '.wp-block-search' ) ) {
+				return toggleSearchField( false );
+			}
+
+			if ( e.key === 'Escape' ) {
+				searchButton.focus();
+				return toggleSearchField( false );
+			}
+		};
+
+		const handleButtonClick = ( e ) => {
+			if ( block.classList.contains( hiddenClass ) ) {
+				e.preventDefault();
+				searchField.focus();
+				toggleSearchField( true );
+			}
+		};
+
+		searchButton.removeAttribute( 'type' );
+		searchField.addEventListener( 'keydown', ( e ) => {
+			hideSearchField( e );
+		} );
+		searchButton.addEventListener( 'click', handleButtonClick );
+		searchButton.addEventListener( 'keydown', ( e ) => {
+			hideSearchField( e );
+		} );
+		if ( searchLabel ) {
+			searchLabel.addEventListener( 'click', handleButtonClick );
+		}
+		document.body.addEventListener( 'click', hideSearchField );
+	} );
+} );

package/src/separator/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/separator",
 	"title": "Separator",
 	"category": "design",

package/src/shortcode/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/shortcode",
 	"title": "Shortcode",
 	"category": "widgets",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"text": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/site-logo/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-logo",
 	"title": "Site Logo",
 	"category": "theme",

package/src/site-logo/index.php

@@ -13,7 +13,7 @@
  * @return string The render.
  */
 function render_block_core_site_logo( $attributes ) {
-	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
+	$adjust_width_height_filter = static function ( $image ) use ( $attributes ) {
 		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}

package/src/site-tagline/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",

package/src/site-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-title",
 	"title": "Site Title",
 	"category": "theme",

package/src/social-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-link",
 	"title": "Social Icon",
 	"category": "widgets",
@@ -24,7 +24,9 @@
 	"usesContext": [
 		"openInNewTab",
 		"showLabels",
+		"iconColor",
 		"iconColorValue",
+		"iconBackgroundColor",
 		"iconBackgroundColorValue"
 	],
 	"supports": {

package/src/social-link/edit.js

@@ -92,10 +92,19 @@ const SocialLinkEdit = ( {
 	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
-	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
+	const {
+		showLabels,
+		iconColor,
+		iconColorValue,
+		iconBackgroundColor,
+		iconBackgroundColorValue,
+	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-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