@wordpress/block-library 7.6.0 → 7.7.0

package/src/post-comments-form/form.js

@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
@@ -27,7 +33,11 @@ const CommentsForm = () => {
 					<input
 						name="submit"
 						type="submit"
-						className="submit wp-block-button__link"
+						className={ classnames(
+							'submit',
+							'wp-block-button__link',
+							__experimentalElementButtonClassName
+						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
 					/>

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-date/edit.js

@@ -18,13 +18,13 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
+	__experimentalPublishDateTimePicker as PublishDateTimePicker,
 } from '@wordpress/block-editor';
 import {
 	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	DateTimePicker,
 	PanelBody,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -101,13 +101,14 @@ export default function PostDateEdit( {
 					<ToolbarGroup>
 						<Dropdown
 							popoverProps={ { anchorRef: timeRef.current } }
-							renderContent={ () => (
-								<DateTimePicker
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
 									currentDate={ date }
 									onChange={ setDate }
 									is12Hour={ is12HourFormat(
 										siteTimeFormat
 									) }
+									onClose={ onClose }
 								/>
 							) }
 							renderToggle={ ( { isOpen, onToggle } ) => {

package/src/query-pagination/index.php

@@ -20,7 +20,6 @@ function render_block_core_query_pagination( $attributes, $content ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'role'       => 'navigation',
 			'aria-label' => __( 'Pagination' ),
 		)
 	);

package/src/search/block.json

@@ -38,6 +38,10 @@
 		"buttonUseIcon": {
 			"type": "boolean",
 			"default": false
+		},
+		"query": {
+			"type": "object",
+			"default": {}
 		}
 	},
 	"supports": {

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';
@@ -241,7 +242,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,

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;
@@ -91,6 +101,9 @@ function render_block_core_search( $attributes ) {
 				</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/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,32 @@ 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,76 @@
 /**
  * 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/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/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/table-of-contents/edit.js

@@ -13,7 +13,7 @@ import {
 	store as blockEditorStore,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import {
 	PanelBody,
 	Placeholder,
@@ -57,9 +57,16 @@ export default function TableOfContentsEdit( {
 	const blockProps = useBlockProps();
 	const disabledRef = useDisabled();
 
-	const listBlockExists = useSelect(
-		( select ) => !! select( blocksStore ).getBlockType( 'core/list' ),
-		[]
+	const canInsertList = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, canInsertBlockType } = select(
+				blockEditorStore
+			);
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return canInsertBlockType( 'core/list', rootClientId );
+		},
+		[ clientId ]
 	);
 
 	const {
@@ -187,7 +194,13 @@ export default function TableOfContentsEdit( {
 							headingAttributes.anchor !== '';
 
 						_latestHeadings.push( {
-							content: stripHTML( headingAttributes.content ),
+							// Convert line breaks to spaces, and get rid of HTML tags in the headings.
+							content: stripHTML(
+								headingAttributes.content.replace(
+									/(<br *\/?>)+/g,
+									' '
+								)
+							),
 							level: headingAttributes.level,
 							link: canBeLinked
 								? `${ headingPageLink }#${ headingAttributes.anchor }`
@@ -216,7 +229,7 @@ export default function TableOfContentsEdit( {
 
 	const headingTree = linearToNestedHeadingList( headings );
 
-	const toolbarControls = listBlockExists && (
+	const toolbarControls = canInsertList && (
 		<BlockControls>
 			<ToolbarGroup>
 				<ToolbarButton