@wordpress/block-library 9.0.1 → 9.1.0

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

@@ -10,6 +10,7 @@ import {
 	initializeEditor,
 	triggerBlockListLayout,
 	typeInRichText,
+	screen,
 	openBlockSettings,
 	waitFor,
 } from 'test/helpers';
@@ -92,7 +93,7 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inline appender', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
 
@@ -143,7 +144,7 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inserter', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
 
@@ -202,9 +203,48 @@ describe( 'Buttons block', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
+		it( 'shows only the button block when using the inserter', async () => {
+			await initializeEditor();
+
+			// Add block
+			await addBlock( screen, 'Buttons' );
+
+			// Get block
+			const buttonsBlock = await getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+			await triggerBlockListLayout( buttonsBlock );
+
+			// Get inner button block
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open the block inserter
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
+
+			const inserterList = screen.getByTestId( 'InserterUI-Blocks' );
+			// onScroll event used to force the FlatList to render all items
+			fireEvent.scroll( inserterList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+
+			// Check the Button block is in the list
+			const buttonInserterBlock =
+				await within( inserterList ).findByText( 'Button' );
+			expect( buttonInserterBlock ).toBeVisible();
+
+			// Check the Paragraph core block is not in the list
+			expect(
+				within( inserterList ).queryByLabelText( 'Paragraph block' )
+			).toBeNull();
+		} );
+
 		describe( 'removing button along with buttons block', () => {
 			it( 'removes the button and buttons block when deleting the block using the block delete action', async () => {
-				const screen = await initializeEditor( {
+				await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
 
@@ -250,7 +290,7 @@ describe( 'Buttons block', () => {
 			'Justify items right',
 		].forEach( ( justificationOption ) =>
 			it( `sets ${ justificationOption } option`, async () => {
-				const screen = await initializeEditor( {
+				await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
 
@@ -276,7 +316,7 @@ describe( 'Buttons block', () => {
 	describe( 'color customization', () => {
 		it( 'sets a text color', async () => {
 			// Arrange
-			const screen = await initializeEditor();
+			await initializeEditor();
 			await addBlock( screen, 'Buttons' );
 
 			// Act
@@ -317,7 +357,7 @@ describe( 'Buttons block', () => {
 
 		it( 'sets a background color', async () => {
 			// Arrange
-			const screen = await initializeEditor();
+			await initializeEditor();
 			await addBlock( screen, 'Buttons' );
 
 			// Act
@@ -354,7 +394,7 @@ describe( 'Buttons block', () => {
 
 		it( 'sets a gradient background color', async () => {
 			// Arrange
-			const screen = await initializeEditor();
+			await initializeEditor();
 			await addBlock( screen, 'Buttons' );
 
 			// Act
@@ -396,7 +436,7 @@ describe( 'Buttons block', () => {
 
 		it( 'sets a custom gradient background color', async () => {
 			// Arrange
-			const screen = await initializeEditor();
+			await initializeEditor();
 			await addBlock( screen, 'Buttons' );
 
 			// Act

package/src/comment-date/edit.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	InspectorControls,
 	useBlockProps,
@@ -64,7 +68,9 @@ export default function Edit( {
 	let commentDate =
 		date instanceof Date ? (
 			<time dateTime={ dateI18n( 'c', date ) }>
-				{ dateI18n( format || siteFormat, date ) }
+				{ format === 'human-diff'
+					? humanTimeDiff( date )
+					: dateI18n( format || siteFormat, date ) }
 			</time>
 		) : (
 			<time>{ date }</time>

package/src/comment-date/index.php

@@ -28,11 +28,13 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$classes = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
-	$formatted_date     = get_comment_date(
-		isset( $attributes['format'] ) ? $attributes['format'] : '',
-		$comment
-	);
-	$link               = get_comment_link( $comment );
+	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+		// translators: %s: human-readable time difference.
+		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
+	} else {
+		$formatted_date = get_comment_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $comment );
+	}
+	$link = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );

package/src/list-item/edit.native.js

@@ -21,8 +21,7 @@ import { useState, useCallback, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge, useEnter } from './hooks';
-import { convertToListItems } from './utils';
+import { useMerge, useEnter } from './hooks';
 import { IndentUI } from './edit.js';
 import styles from './style.scss';
 import ListStyleType from './list-style-type';
@@ -32,7 +31,6 @@ const OPACITY = '9e';
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	onReplace,
 	clientId,
 	style,
 	mergeBlocks,
@@ -118,24 +116,7 @@ export default function ListItemEdit( {
 
 	const preventDefault = useRef( false );
 	const { onEnter } = useEnter( { content, clientId }, preventDefault );
-	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
-	const onSplitList = useCallback(
-		( value ) => {
-			if ( ! preventDefault.current ) {
-				return onSplit( value );
-			}
-		},
-		[ clientId, onSplit ]
-	);
-	const onReplaceList = useCallback(
-		( blocks, ...args ) => {
-			if ( ! preventDefault.current ) {
-				onReplace( convertToListItems( blocks ), ...args );
-			}
-		},
-		[ clientId, onReplace, convertToListItems ]
-	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {
 			const { width } = nativeEvent.layout;
@@ -166,6 +147,7 @@ export default function ListItemEdit( {
 					onLayout={ onLayout }
 				>
 					<RichText
+						__unstableUseSplitSelection
 						identifier="content"
 						tagName="p"
 						onChange={ ( nextContent ) =>
@@ -176,9 +158,7 @@ export default function ListItemEdit( {
 						placeholderTextColor={
 							defaultPlaceholderTextColorWithOpacity
 						}
-						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ onReplaceList }
 						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
 						deleteEnter

package/src/missing/edit.native.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	TouchableOpacity,
-} from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -25,6 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -48,11 +44,40 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	toggleSheet() {
+		const { attributes, block, clientId } = this.props;
+		const { originalName } = attributes;
+		const title = this.getTitle();
+		const blockContent = serialize( block ? [ block ] : [] );
+
+		if ( this.canEditUnsupportedBlock() ) {
+			requestUnsupportedBlockFallback(
+				blockContent,
+				clientId,
+				originalName,
+				title
+			);
+			return;
+		}
+
 		this.setState( {
 			showHelp: ! this.state.showHelp,
 		} );
 	}
 
+	canEditUnsupportedBlock() {
+		const {
+			canEnableUnsupportedBlockEditor,
+			isEditableInUnsupportedBlockEditor,
+			isUnsupportedBlockEditorSupported,
+		} = this.props;
+
+		return (
+			! canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported &&
+			isEditableInUnsupportedBlockEditor
+		);
+	}
+
 	closeSheet() {
 		this.setState( {
 			showHelp: false,
@@ -171,7 +196,8 @@ export class UnsupportedBlockEdit extends Component {
 
 	render() {
 		const { originalName } = this.props.attributes;
-		const { getStylesFromColorScheme, preferredColorScheme } = this.props;
+		const { isSelected, getStylesFromColorScheme, preferredColorScheme } =
+			this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = this.getTitle();
@@ -186,7 +212,11 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		const subtitle = (
-			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
+			<Text style={ subTitleStyle }>
+				{ this.canEditUnsupportedBlock()
+					? __( 'Tap to edit' )
+					: __( 'Unsupported' ) }
+			</Text>
 		);
 
 		const icon = blockType
@@ -198,8 +228,9 @@ export class UnsupportedBlockEdit extends Component {
 		);
 		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<TouchableWithoutFeedback
-				disabled={ ! this.props.isSelected }
+			<TouchableOpacity
+				disabled={ ! isSelected }
+				activeOpacity={ 0.5 }
 				accessibilityLabel={ __( 'Help button' ) }
 				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
@@ -211,7 +242,8 @@ export class UnsupportedBlockEdit extends Component {
 						styles.unsupportedBlockDark
 					) }
 				>
-					{ this.renderHelpIcon() }
+					{ ! this.canEditUnsupportedBlock() &&
+						this.renderHelpIcon() }
 					<View style={ styles.unsupportedBlockHeader }>
 						<Icon
 							className={ iconClassName }
@@ -223,7 +255,7 @@ export class UnsupportedBlockEdit extends Component {
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>
-			</TouchableWithoutFeedback>
+			</TouchableOpacity>
 		);
 	}
 }

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

@@ -14,7 +14,16 @@ exports[`Missing block renders without crashing 1`] = `
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -23,72 +32,79 @@ exports[`Missing block renders without crashing 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "opacity": 1,
+    }
+  }
 >
-  <View
-    accessibilityHint="Tap here to show help"
-    accessibilityLabel="Help button"
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
+  <View>
+    <View
+      accessibilityHint="Tap here to show help"
+      accessibilityLabel="Help button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
       }
-    }
-  >
-    <Svg
-      height={24}
-      label="Help icon"
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      Path
-    </Svg>
-  </View>
-  <View>
-    <Svg
-      fill="white"
-      height={24}
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
     >
-      Path
-    </Svg>
+      <Svg
+        height={24}
+        label="Help icon"
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+    </View>
+    <View>
+      <Svg
+        fill="white"
+        height={24}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+      <Text>
+        missing/block/title
+      </Text>
+    </View>
     <Text>
-      missing/block/title
+      Unsupported
     </Text>
   </View>
-  <Text>
-    Unsupported
-  </Text>
 </View>
 `;

package/src/navigation/editor.scss

@@ -457,12 +457,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-	@include break-medium() {
-		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
-	}
-}
-
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
@@ -479,12 +473,6 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-		@include break-medium() {
-			top: $header-height + $block-toolbar-height + $border-width;
-		}
-	}
-
 	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 		top: $header-height + $block-toolbar-height + $border-width;

package/src/post-content/block.json

@@ -11,11 +11,23 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"layout": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"dimensions": {
 			"minHeight": true
 		},
 		"spacing": {
-			"blockGap": true
+			"blockGap": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"color": {
 			"gradients": true,

package/src/post-date/edit.js

@@ -8,7 +8,11 @@ import clsx from 'clsx';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
-import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -82,7 +86,9 @@ export default function PostDateEdit( {
 
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
-			{ dateI18n( format || siteFormat, date ) }
+			{ format === 'human-diff'
+				? humanTimeDiff( date )
+				: dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
 		dateLabel

package/src/post-date/index.php

@@ -20,8 +20,14 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID          = $block->context['postId'];
-	$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	$post_ID = $block->context['postId'];
+
+	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+		// translators: %s: human-readable time difference.
+		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID ) ) );
+	} else {
+		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	}
 	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
 	$classes          = array();
 
@@ -38,7 +44,12 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	 */
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
 		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
-			$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			if ( 'human-diff' === $attributes['format'] ) {
+				// translators: %s: human-readable time difference.
+				$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
+			} else {
+				$formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			}
 			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
 			$classes[]        = 'wp-block-post-date__modified-date';
 		} else {

package/src/pullquote/block.json

@@ -26,6 +26,13 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "left", "right", "wide", "full" ],
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"background": true,
@@ -35,6 +42,12 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/query/edit/inspector-controls/create-new-post-link.js

@@ -1,23 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
-const CreateNewPostLink = ( {
-	attributes: { query: { postType } = {} } = {},
-} ) => {
-	if ( ! postType ) {
-		return null;
-	}
+const CreateNewPostLink = ( { postType } ) => {
 	const newPostUrl = addQueryArgs( 'post-new.php', {
 		post_type: postType,
 	} );
+
+	const addNewItemLabel = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return getPostType( postType )?.labels?.add_new_item;
+		},
+		[ postType ]
+	);
 	return (
 		<div className="wp-block-query__create-new-link">
 			{ createInterpolateElement(
-				__( '<a>Add new post</a>' ),
+				'<a>' + addNewItemLabel + '</a>',
 				// eslint-disable-next-line jsx-a11y/anchor-has-content
 				{ a: <a href={ newPostUrl } /> }
 			) }

package/src/query/edit/inspector-controls/index.js

@@ -131,9 +131,11 @@ export default function QueryInspectorControls( props ) {
 
 	return (
 		<>
-			<BlockInfo>
-				<CreateNewPostLink { ...props } />
-			</BlockInfo>
+			{ !! postType && (
+				<BlockInfo>
+					<CreateNewPostLink postType={ postType } />
+				</BlockInfo>
+			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (