@wordpress/block-library 9.0.0 → 9.1.0

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

@@ -10,6 +10,7 @@ import {
 	initializeEditor,
 	triggerBlockListLayout,
 	typeInRichText,
+	screen,
 	openBlockSettings,
 	waitFor,
 } from 'test/helpers';
@@ -21,7 +22,9 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 
 beforeAll( () => {
@@ -90,7 +93,7 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inline appender', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
 
@@ -141,7 +144,7 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inserter', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
 
@@ -200,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,
 				} );
 
@@ -248,10 +290,9 @@ describe( 'Buttons block', () => {
 			'Justify items right',
 		].forEach( ( justificationOption ) =>
 			it( `sets ${ justificationOption } option`, async () => {
-				const initialHtml = `<!-- wp:buttons -->
-				<div class="wp-block-buttons"><!-- wp:button /--></div>
-				<!-- /wp:buttons -->`;
-				const screen = await initializeEditor( { initialHtml } );
+				await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
 
 				const [ block ] = await screen.findAllByLabelText(
 					/Buttons Block\. Row 1/
@@ -275,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
@@ -316,7 +357,7 @@ describe( 'Buttons block', () => {
 
 		it( 'sets a background color', async () => {
 			// Arrange
-			const screen = await initializeEditor();
+			await initializeEditor();
 			await addBlock( screen, 'Buttons' );
 
 			// Act
@@ -353,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
@@ -395,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/embed/variations.js

@@ -259,14 +259,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
 		attributes: { providerNameSlug: 'scribd', responsive: true },
 	},
-	{
-		name: 'slideshare',
-		title: 'Slideshare',
-		icon: embedContentIcon,
-		description: __( 'Embed Slideshare content.' ),
-		patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ],
-		attributes: { providerNameSlug: 'slideshare', responsive: true },
-	},
 	{
 		name: 'smugmug',
 		title: 'SmugMug',

package/src/gallery/v1/gallery-image.js

@@ -222,6 +222,8 @@ class GalleryImage extends Component {
 						onClick={ isFirstItem ? undefined : onMoveBackward }
 						label={ __( 'Move image backward' ) }
 						aria-disabled={ isFirstItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
@@ -229,6 +231,8 @@ class GalleryImage extends Component {
 						onClick={ isLastItem ? undefined : onMoveForward }
 						label={ __( 'Move image forward' ) }
 						aria-disabled={ isLastItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>
@@ -237,12 +241,16 @@ class GalleryImage extends Component {
 						icon={ edit }
 						onClick={ this.onEdit }
 						label={ __( 'Replace image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
 						icon={ closeSmall }
 						onClick={ onRemove }
 						label={ __( 'Remove image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>

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/media-text/style.scss

@@ -15,27 +15,28 @@
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: start;
 	}
 }
+
 .wp-block-media-text,
 .wp-block-media-text.is-vertically-aligned-center {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: center;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: end;
 	}
 }
 
-.wp-block-media-text .wp-block-media-text__media {
+.wp-block-media-text > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -43,7 +44,7 @@
 	margin: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content {
+.wp-block-media-text > .wp-block-media-text__content {
 	direction: ltr;
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -53,14 +54,14 @@
 	word-break: break-word;
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -75,18 +76,18 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media > a {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
 	display: block;
 	height: 100%;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;
@@ -107,11 +108,11 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		.wp-block-media-text__media {
+		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
 		}
-		.wp-block-media-text__content {
+		> .wp-block-media-text__content {
 			grid-column: 1;
 			grid-row: 2;
 		}

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,21 +457,11 @@ $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;
 }
 
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
-	right: $sidebar-width;
-}
-
 // When fullscreen.
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
@@ -483,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;