@wordpress/block-library 7.13.1-next.957ca95e4c.0 → 7.14.1

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

@@ -6,6 +6,7 @@ import { loop as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -18,3 +19,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query-pagination/block.json

@@ -36,6 +36,19 @@
 			"default": {
 				"type": "flex"
 			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-query-pagination-editor",

package/src/query-pagination/edit.js

@@ -22,6 +22,11 @@ const TEMPLATE = [
 	[ 'core/query-pagination-numbers' ],
 	[ 'core/query-pagination-next' ],
 ];
+const ALLOWED_BLOCKS = [
+	'core/query-pagination-previous',
+	'core/query-pagination-numbers',
+	'core/query-pagination-next',
+];
 
 const getDefaultBlockLayout = ( blockTypeOrName ) => {
 	const layoutBlockSupportConfig = getBlockSupport(
@@ -55,11 +60,7 @@ export default function QueryPaginationEdit( {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: [
-			'core/query-pagination-previous',
-			'core/query-pagination-numbers',
-			'core/query-pagination-next',
-		],
+		allowedBlocks: ALLOWED_BLOCKS,
 		__experimentalLayout: usedLayout,
 	} );
 	return (

package/src/query-pagination/index.js

@@ -6,6 +6,7 @@ import { queryPagination as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -20,3 +21,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/query-pagination/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query-pagination-next/block.json

@@ -26,10 +26,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/query-pagination-next/index.js

@@ -6,6 +6,7 @@ import { queryPaginationNext as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/query-pagination-next/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

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

@@ -6,6 +6,7 @@ import { queryPaginationNumbers as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query-pagination-previous/block.json

@@ -26,10 +26,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

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

@@ -6,6 +6,7 @@ import { queryPaginationPrevious as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query-title/index.js

@@ -1,16 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { title as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import variations from './variations';
 import deprecated from './deprecated';
 
-/**
- * WordPress dependencies
- */
-import { title as icon } from '@wordpress/icons';
-
 const { name } = metadata;
 export { metadata, name };
 
@@ -20,3 +21,5 @@ export const settings = {
 	variations,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/query-title/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/quote/index.js

@@ -7,6 +7,7 @@ import { quote as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -37,3 +38,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/quote/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/quote/transforms.js

@@ -64,6 +64,16 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ '*' ],
 			isMatch: ( {}, blocks ) => {
+				// When a single block is selected make the tranformation
+				// available only to specific blocks that make sense.
+				if ( blocks.length === 1 ) {
+					return [
+						'core/paragraph',
+						'core/heading',
+						'core/list',
+						'core/pullquote',
+					].includes( blocks[ 0 ].name );
+				}
 				return ! blocks.some( ( { name } ) => name === 'core/quote' );
 			},
 			__experimentalConvert: ( blocks ) =>

package/src/quote/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/read-more/index.js

@@ -6,6 +6,7 @@ import { link as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/read-more/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/rss/index.js

@@ -6,6 +6,7 @@ import { rss as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -22,3 +23,5 @@ export const settings = {
 	},
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/rss/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/search/block.json

@@ -54,6 +54,21 @@
 				"text": true
 			}
 		},
+		"typography": {
+			"__experimentalSkipSerialization": true,
+			"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

package/src/search/edit.js

@@ -13,6 +13,7 @@ import {
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
+	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
@@ -112,6 +113,7 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
+	const typographyProps = useTypographyProps( attributes );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
@@ -208,11 +210,16 @@ export default function SearchEdit( {
 		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
 		const textFieldClasses = classnames(
 			'wp-block-search__input',
-			isButtonPositionInside ? undefined : borderProps.className
+			isButtonPositionInside ? undefined : borderProps.className,
+			typographyProps.className
 		);
-		const textFieldStyles = isButtonPositionInside
-			? { borderRadius }
-			: borderProps.style;
+		const textFieldStyles = {
+			...( isButtonPositionInside
+				? { borderRadius }
+				: borderProps.style ),
+			...typographyProps.style,
+			textDecoration: undefined,
+		};
 
 		return (
 			<input
@@ -239,12 +246,14 @@ export default function SearchEdit( {
 		const buttonClasses = classnames(
 			'wp-block-search__button',
 			colorProps.className,
+			typographyProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
 			buttonUseIcon ? 'has-icon' : undefined,
 			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,
+			...typographyProps.style,
 			...( isButtonPositionInside
 				? { borderRadius }
 				: borderProps.style ),
@@ -443,20 +452,31 @@ export default function SearchEdit( {
 
 	const blockProps = useBlockProps( {
 		className: getBlockClassNames(),
+		style: {
+			...typographyProps.style,
+			// Input opts out of text decoration.
+			textDecoration: undefined,
+		},
 	} );
 
+	const labelClassnames = classnames(
+		'wp-block-search__label',
+		typographyProps.className
+	);
+
 	return (
 		<div { ...blockProps }>
 			{ controls }
 
 			{ showLabel && (
 				<RichText
-					className="wp-block-search__label"
+					className={ labelClassnames }
 					aria-label={ __( 'Label text' ) }
 					placeholder={ __( 'Add label…' ) }
 					withoutInteractiveFormatting
 					value={ label }
 					onChange={ ( html ) => setAttributes( { label: html } ) }
+					style={ typographyProps.style }
 				/>
 			) }
 

package/src/search/index.js

@@ -6,6 +6,7 @@ import { search as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import variations from './variations';
@@ -20,3 +21,5 @@ export const settings = {
 	variations,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/search/index.php

@@ -37,6 +37,7 @@ function render_block_core_search( $attributes ) {
 	$query_params_markup = '';
 	$inline_styles       = styles_for_block_core_search( $attributes );
 	$color_classes       = get_color_classes_for_block_core_search( $attributes );
+	$typography_classes  = get_typography_classes_for_block_core_search( $attributes );
 	$is_button_inside    = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
@@ -50,19 +51,31 @@ function render_block_core_search( $attributes ) {
 		$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_markup = sprintf(
-			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
-			$input_id,
+			'<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 = ! $is_button_inside ? $border_color_classes : '';
-		$input_markup  = sprintf(
+		$input_classes = array( 'wp-block-search__input' );
+		if ( $is_button_inside ) {
+			$input_classes[] = $border_color_classes;
+		}
+		if ( ! empty( $typography_classes ) ) {
+			$input_classes[] = $typography_classes;
+		}
+		$input_markup = sprintf(
 			'<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
 			$input_id,
-			esc_attr( $input_classes ),
+			esc_attr( implode( ' ', $input_classes ) ),
 			get_search_query(),
 			esc_attr( $attributes['placeholder'] ),
 			$inline_styles['input']
@@ -80,11 +93,14 @@ function render_block_core_search( $attributes ) {
 	}
 
 	if ( $show_button ) {
-		$button_classes         = array();
+		$button_classes         = array( 'wp-block-search__button' );
 		$button_internal_markup = '';
 		if ( ! empty( $color_classes ) ) {
 			$button_classes[] = $color_classes;
 		}
+		if ( ! empty( $typography_classes ) ) {
+			$button_classes[] = $typography_classes;
+		}
 		$aria_label = '';
 
 		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
@@ -105,9 +121,9 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_classes[] = wp_theme_get_element_class_name( 'button' );
 		$button_markup    = sprintf(
-			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
+			'<button type="submit" class="%s" %s %s>%s</button>',
 			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],
 			$aria_label,
@@ -122,7 +138,9 @@ function render_block_core_search( $attributes ) {
 		$inline_styles['wrapper'],
 		$input_markup . $query_params_markup . $button_markup
 	);
-	$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	$wrapper_attributes   = get_block_wrapper_attributes(
+		array( 'class' => $classnames )
+	);
 
 	return sprintf(
 		'<form role="search" method="get" action="%s" %s>%s</form>',
@@ -270,8 +288,10 @@ function styles_for_block_core_search( $attributes ) {
 	$wrapper_styles   = array();
 	$button_styles    = array();
 	$input_styles     = array();
+	$label_styles     = array();
 	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
+	$show_label       = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel'];
 
 	// Add width styles.
 	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
@@ -360,13 +380,98 @@ function styles_for_block_core_search( $attributes ) {
 		$button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
 	}
 
+	// Get typography styles to be shared across inner elements.
+	$typography_styles = get_typography_styles_for_block_core_search( $attributes );
+	if ( ! empty( $typography_styles ) ) {
+		$label_styles [] = $typography_styles;
+		$button_styles[] = $typography_styles;
+		$input_styles [] = $typography_styles;
+	}
+
+	// Typography text-decoration is only applied to the label and button.
+	if ( ! empty( $attributes['style']['typography']['textDecoration'] ) ) {
+		$text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) );
+		$button_styles[]       = $text_decoration_value;
+		// Input opts out of text decoration.
+		if ( $show_label ) {
+			$label_styles[] = $text_decoration_value;
+		}
+	}
+
 	return array(
 		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
 		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
 		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
+		'label'   => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '',
 	);
 }
 
+/**
+ * Returns typography classnames depending on whether there are named font sizes/families .
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The typography color classnames to be applied to the block elements.
+ */
+function get_typography_classes_for_block_core_search( $attributes ) {
+	$typography_classes    = array();
+	$has_named_font_family = ! empty( $attributes['fontFamily'] );
+	$has_named_font_size   = ! empty( $attributes['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		$typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) );
+	}
+
+	if ( $has_named_font_family ) {
+		$typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) );
+	}
+
+	return implode( ' ', $typography_classes );
+}
+
+/**
+ * Returns typography styles to be included in an HTML style tag.
+ * This excludes text-decoration, which is applied only to the label and button elements of the search block.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string A string of typography CSS declarations.
+ */
+function get_typography_styles_for_block_core_search( $attributes ) {
+	$typography_styles = array();
+
+	// Add typography styles.
+	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
+		$typography_styles[] = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
+		$typography_styles[] = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
+		$typography_styles[] = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
+		$typography_styles[] = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
+		$typography_styles[] = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
+		$typography_styles[] = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) );
+	}
+
+	if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
+		$typography_styles[] = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) );
+	}
+
+	return implode( '', $typography_styles );
+}
+
 /**
  * Returns border color classnames depending on whether there are named or custom border colors.
  *

package/src/search/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/search/style.scss

@@ -10,6 +10,7 @@
 		min-width: 1.5em;
 		min-height: 1.5em;
 		fill: currentColor;
+		vertical-align: text-bottom;
 	}
 }
 
@@ -38,9 +39,9 @@
 	margin-right: 0;
 	min-width: 3em;
 	border: 1px solid #949494;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
+	// !important used to forcibly prevent undesired application of
+	// text-decoration styles on the input field.
+	text-decoration: unset !important;
 }
 
 .wp-block-search.wp-block-search__button-only {