@wordpress/block-library 7.8.0 → 7.9.0

package/src/search/index.php

@@ -80,20 +80,23 @@ function render_block_core_search( $attributes ) {
 	}
 
 	if ( $show_button ) {
+		$button_classes         = array();
 		$button_internal_markup = '';
-		$button_classes         = $color_classes;
-		$aria_label             = '';
+		if ( ! empty( $color_classes ) ) {
+			$button_classes[] = $color_classes;
+		}
+		$aria_label = '';
 
-		if ( ! $is_button_inside ) {
-			$button_classes .= ' ' . $border_color_classes;
+		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+			$button_classes[] = $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
 				$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';
+			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+			$button_classes[] = 'has-icon';
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
@@ -102,11 +105,10 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
-
-		$button_markup = sprintf(
+		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_markup    = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
-			esc_attr( $button_classes ),
+			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],
 			$aria_label,
 			$button_internal_markup

package/src/search/style.scss

@@ -1,13 +1,6 @@
 .wp-block-search__button {
-	background: #f7f7f7;
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
-	color: #32373c;
 	margin-left: 0.625em;
 	word-break: normal;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
 
 	&.has-icon {
 		line-height: 0;
@@ -20,6 +13,13 @@
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for search buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-search__button) {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}
+
 .wp-block-search__inside-wrapper {
 	display: flex;
 	flex: auto;
@@ -62,7 +62,8 @@
 		}
 	}
 
-	.wp-block-search__button {
+	// For lower specificity.
+	:where(.wp-block-search__button) {
 		padding: 0.125em 0.5em;
 	}
 }

package/src/table/edit.js

@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -509,6 +510,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }

package/src/table/save.js

@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -82,7 +83,11 @@ export default function save( { attributes } ) {
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					tagName="figcaption"
+					value={ caption }
+					className={ __experimentalGetElementClassName( 'caption' ) }
+				/>
 			) }
 		</figure>
 	);

package/src/video/edit.js

@@ -26,6 +26,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -266,6 +267,9 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Video caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }

package/src/video/save.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -38,7 +42,11 @@ export default function save( { attributes } ) {
 				</video>
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);