@wordpress/block-library 7.5.0 → 7.8.0

package/src/search/edit.js

@@ -14,6 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -79,9 +80,8 @@ export default function SearchEdit( {
 
 	const insertedInNavigationBlock = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
-				blockEditorStore
-			);
+			const { getBlockParentsByBlockName, wasBlockJustInserted } =
+				select( blockEditorStore );
 			return (
 				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
 					?.length && wasBlockJustInserted( clientId )
@@ -89,9 +89,8 @@ export default function SearchEdit( {
 		},
 		[ clientId ]
 	);
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( ! insertedInNavigationBlock ) return;
 		// This side-effect should not create an undo level.
@@ -217,6 +216,7 @@ export default function SearchEdit( {
 
 		return (
 			<input
+				type="search"
 				className={ textFieldClasses }
 				style={ textFieldStyles }
 				aria-label={ __( 'Optional placeholder text' ) }
@@ -240,7 +240,8 @@ export default function SearchEdit( {
 			'wp-block-search__button',
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
-			buttonUseIcon ? 'has-icon' : undefined
+			buttonUseIcon ? 'has-icon' : undefined,
+			__experimentalElementButtonClassName
 		);
 		const buttonStyles = {
 			...colorProps.style,
@@ -415,12 +416,8 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const {
-					topLeft,
-					topRight,
-					bottomLeft,
-					bottomRight,
-				} = borderRadius;
+				const { topLeft, topRight, bottomLeft, bottomRight } =
+					borderRadius;
 
 				return {
 					...styles,

package/src/search/edit.native.js

@@ -53,14 +53,12 @@ export default function SearchEdit( {
 } ) {
 	const [ isButtonSelected, setIsButtonSelected ] = useState( false );
 	const [ isLabelSelected, setIsLabelSelected ] = useState( false );
-	const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
-		false
-	);
+	const [ isPlaceholderSelected, setIsPlaceholderSelected ] =
+		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	const textInputRef = useRef( null );
 

package/src/search/index.php

@@ -13,8 +13,6 @@
  * @return string The search block markup.
  */
 function render_block_core_search( $attributes ) {
-	static $instance_id = 0;
-
 	// Older versions of the Search block defaulted the label and buttonText
 	// attributes to `__( 'Search' )` meaning that many posts contain `<!--
 	// wp:search /-->`. Support these by defaulting an undefined label and
@@ -27,17 +25,19 @@ function render_block_core_search( $attributes ) {
 		)
 	);
 
-	$input_id         = 'wp-block-search__input-' . ++$instance_id;
-	$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;
-	$input_markup     = '';
-	$button_markup    = '';
-	$inline_styles    = styles_for_block_core_search( $attributes );
-	$color_classes    = get_color_classes_for_block_core_search( $attributes );
-	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+	$input_id            = wp_unique_id( 'wp-block-search__input-' );
+	$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;
+	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
+	$input_markup        = '';
+	$button_markup       = '';
+	$query_params_markup = '';
+	$inline_styles       = styles_for_block_core_search( $attributes );
+	$color_classes       = get_color_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.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
@@ -63,12 +63,22 @@ function render_block_core_search( $attributes ) {
 			'<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( get_search_query() ),
+			get_search_query(),
 			esc_attr( $attributes['placeholder'] ),
 			$inline_styles['input']
 		);
 	}
 
+	if ( count( $query_params ) > 0 ) {
+		foreach ( $query_params as $param => $value ) {
+			$query_params_markup .= sprintf(
+				'<input type="hidden" name="%s" value="%s" />',
+				esc_attr( $param ),
+				esc_attr( $value )
+			);
+		}
+	}
+
 	if ( $show_button ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
@@ -86,11 +96,14 @@ function render_block_core_search( $attributes ) {
 			$button_classes .= ' has-icon';
 
 			$button_internal_markup =
-				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
+				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
 				</svg>';
 		}
 
+		// Include the button element class.
+		$button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
+
 		$button_markup = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( $button_classes ),
@@ -105,7 +118,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 . $button_markup
+		$input_markup . $query_params_markup . $button_markup
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 

package/src/search/style.scss

@@ -47,7 +47,8 @@
 	}
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: 4px;
 	border: 1px solid #949494;
 

package/src/separator/editor.scss

@@ -7,5 +7,6 @@
 	// due to the way that color block supports adds additional background color styles.
 	&.wp-block-separator.is-style-dots {
 		background: none !important;
+		border: none;
 	}
 }

package/src/separator/use-deprecated-opacity.js

@@ -9,10 +9,8 @@ export default function useDeprecatedOpacity(
 	currentColor,
 	setAttributes
 ) {
-	const [
-		deprecatedOpacityWithNoColor,
-		setDeprecatedOpacityWithNoColor,
-	] = useState( false );
+	const [ deprecatedOpacityWithNoColor, setDeprecatedOpacityWithNoColor ] =
+		useState( false );
 	const previousColor = usePrevious( currentColor );
 
 	// A separator with no color set will always have previousColor set to undefined,

package/src/shortcode/edit.native.js

@@ -9,6 +9,7 @@ import { View, Text } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { PlainText } from '@wordpress/block-editor';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,11 +24,16 @@ export function ShortcodeEdit( props ) {
 		onFocus,
 		onBlur,
 		getStylesFromColorScheme,
+		blockWidth,
 	} = props;
 	const titleStyle = getStylesFromColorScheme(
 		styles.blockTitle,
 		styles.blockTitleDark
 	);
+	const shortcodeContainerStyle = getStylesFromColorScheme(
+		styles.blockShortcodeContainer,
+		styles.blockShortcodeContainerDark
+	);
 	const shortcodeStyle = getStylesFromColorScheme(
 		styles.blockShortcode,
 		styles.blockShortcodeDark
@@ -37,24 +43,33 @@ export function ShortcodeEdit( props ) {
 		styles.placeholderDark
 	);
 
+	const maxWidth =
+		blockWidth -
+		shortcodeContainerStyle.paddingLeft +
+		shortcodeContainerStyle.paddingRight;
+
+	const onChange = useCallback(
+		( text ) => setAttributes( { text } ),
+		[ setAttributes ]
+	);
+
 	return (
 		<View>
 			<Text style={ titleStyle }>{ __( 'Shortcode' ) }</Text>
-			<PlainText
-				value={ attributes.text }
-				style={ shortcodeStyle }
-				multiline={ true }
-				underlineColorAndroid="transparent"
-				onChange={ ( text ) => setAttributes( { text } ) }
-				placeholder={ __( 'Add a shortcode…' ) }
-				aria-label={ __( 'Shortcode' ) }
-				isSelected={ props.isSelected }
-				onFocus={ onFocus }
-				onBlur={ onBlur }
-				autoCorrect={ false }
-				autoComplete="off"
-				placeholderTextColor={ placeholderStyle.color }
-			/>
+			<View style={ shortcodeContainerStyle }>
+				<PlainText
+					__experimentalVersion={ 2 }
+					value={ attributes.text }
+					style={ shortcodeStyle }
+					onChange={ onChange }
+					placeholder={ __( 'Add a shortcode…' ) }
+					onFocus={ onFocus }
+					onBlur={ onBlur }
+					placeholderTextColor={ placeholderStyle.color }
+					maxWidth={ maxWidth }
+					disableAutocorrection
+				/>
+			</View>
 		</View>
 	);
 }

package/src/shortcode/style.native.scss

@@ -11,18 +11,25 @@
 	color: $gray-50;
 }
 
+.blockShortcodeContainer {
+	padding: 12px;
+	border-radius: 4px;
+	background-color: $gray-light;
+}
+
+.blockShortcodeContainerDark {
+	background-color: $gray-100;
+}
+
 .blockShortcode {
 	font-family: $default-monospace-font;
 	font-weight: 400;
 	font-size: 14px;
-	padding: 12px;
-	border-radius: 4px;
-	background-color: $gray-light;
+	color: $gray-900;
 }
 
 .blockShortcodeDark {
 	color: $white;
-	background-color: $gray-100;
 }
 
 .placeholder {

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcode block edits content 1`] = `
+"<!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode -->"
+`;
+
+exports[`Shortcode block inserts block 1`] = `"<!-- wp:shortcode /-->"`;

package/src/shortcode/test/edit.native.js

@@ -1,58 +1,73 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { TextInput } from 'react-native';
+import {
+	getEditorHtml,
+	initializeEditor,
+	fireEvent,
+	waitFor,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Shortcode block', () => {
+	it( 'inserts block', async () => {
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
-const Shortcode = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
 
-describe( 'Shortcode', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
 		} );
-	} );
 
-	afterAll( () => {
-		unregisterBlockType( name );
-	} );
+		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create(
-			<Shortcode attributes={ { text: '' } } />
-		);
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+		expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = renderer.create(
-			<Shortcode
-				attributes={ {
-					text:
-						'[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]',
-				} }
-			/>
-		);
-		const testInstance = component.root;
-		const textInput = testInstance.findByType( TextInput );
-		expect( textInput ).toBeTruthy();
-		expect( textInput.props.value ).toBe(
-			'[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]'
+	it( 'edits content', async () => {
+		const { getByA11yLabel, getByPlaceholderText } = await initializeEditor(
+			{
+				initialHtml: '<!-- wp:shortcode /-->',
+			}
 		);
+		const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ );
+		fireEvent.press( shortcodeBlock );
+
+		const textField = getByPlaceholderText( 'Add a shortcode…' );
+		fireEvent( textField, 'focus' );
+		fireEvent( textField, 'onChange', {
+			nativeEvent: {
+				eventCount: 1,
+				target: undefined,
+				text: '[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]',
+			},
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );

package/src/site-logo/edit.js

@@ -40,7 +40,6 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -370,9 +369,8 @@ export default function LogoEdit( {
 		mediaItemData,
 		isRequestingMediaItem,
 	} = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } = select(
-			coreStore
-		);
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
 		const siteSettings = getEditedEntityRecord( 'root', 'site' );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
 		const _siteLogo = siteSettings?.site_logo;
@@ -469,7 +467,7 @@ export default function LogoEdit( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = canUserEdit && logoUrl && (
@@ -520,20 +518,8 @@ export default function LogoEdit( {
 			<Placeholder
 				className={ placeholderClassName }
 				preview={ logoImage }
+				withIllustration={ true }
 			>
-				{
-					<SVG
-						className="components-placeholder__illustration"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 60 60"
-					>
-						<Path
-							vectorEffect="non-scaling-stroke"
-							d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
-						/>
-					</SVG>
-				}
 				{ content }
 			</Placeholder>
 		);

package/src/site-logo/editor.scss

@@ -131,20 +131,6 @@
 		.components-button.components-button > svg {
 			color: $white;
 		}
-
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
 	}
 
 	// Show upload button on block selection.

package/src/site-logo/style.scss

@@ -11,6 +11,12 @@
 		height: auto;
 	}
 
+	// Constrain the image to its container.
+	img {
+		height: auto;
+		max-width: 100%;
+	}
+
 	// Inherit border radius from style variations.
 	a,
 	img {

package/src/social-links/deprecated.js

@@ -99,12 +99,14 @@ const deprecated = [
 			const className = classNames( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+				[ `items-justified-${ itemsJustification }` ]:
+					itemsJustification,
 			} );
 
 			const style = {
 				'--wp--social-links--icon-color': iconColorValue,
-				'--wp--social-links--icon-background-color': iconBackgroundColorValue,
+				'--wp--social-links--icon-background-color':
+					iconBackgroundColorValue,
 			};
 
 			return (

package/src/social-links/edit.js

@@ -215,16 +215,17 @@ export function SocialLinksEdit( props ) {
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
 					colorSettings={ colorSettings }
-				/>
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
+				>
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
+						/>
+					) }
+				</PanelColorSettings>
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
 		</Fragment>

package/src/social-links/edit.native.js

@@ -68,11 +68,9 @@ function SocialLinksEdit( {
 	);
 
 	function renderPlaceholder() {
-		return [
-			...new Array( innerBlocks.length || 1 ),
-		].map( ( _, index ) => (
-			<View style={ placeholderStyle } key={ index } />
-		) );
+		return [ ...new Array( innerBlocks.length || 1 ) ].map(
+			( _, index ) => <View style={ placeholderStyle } key={ index } />
+		);
 	}
 
 	function filterInnerBlocks( blockIds ) {

package/src/spacer/controls.js

@@ -43,9 +43,8 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
-	const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue(
-		value
-	);
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( value );
 	const computedValue = [
 		parsedQuantity,
 		isResizing ? 'px' : parsedUnit,

package/src/spacer/test/index.native.js

@@ -28,11 +28,8 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor();
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
 		fireEvent.press( getByA11yLabel( 'Add block' ) );
 
@@ -56,14 +53,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
@@ -87,14 +80,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );

package/src/table/block.json

@@ -156,7 +156,12 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"styles": [
 		{