@wordpress/block-library 8.7.0 → 8.8.0

package/src/navigation/deprecated.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -331,22 +326,23 @@ const migrateTypographyPresets = function ( attributes ) {
 		...attributes,
 		style: {
 			...attributes.style,
-			typography: mapValues(
-				attributes.style.typography,
-				( value, key ) => {
-					const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
-					if ( prefix && value.startsWith( prefix ) ) {
-						const newValue = value.slice( prefix.length );
-						if (
-							'textDecoration' === key &&
-							'strikethrough' === newValue
-						) {
-							return 'line-through';
+			typography: Object.fromEntries(
+				Object.entries( attributes.style.typography ?? {} ).map(
+					( [ key, value ] ) => {
+						const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
+						if ( prefix && value.startsWith( prefix ) ) {
+							const newValue = value.slice( prefix.length );
+							if (
+								'textDecoration' === key &&
+								'strikethrough' === newValue
+							) {
+								return [ key, 'line-through' ];
+							}
+							return [ key, newValue ];
 						}
-						return newValue;
+						return [ key, value ];
 					}
-					return value;
-				}
+				)
 			),
 		},
 	};

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -120,53 +120,41 @@ export default function UnsavedInnerBlocks( {
 	const { hasResolvedNavigationMenus } = useNavigationMenu();
 
 	// Automatically save the uncontrolled blocks.
-	useEffect(
-		() => {
-			// The block will be disabled when used in a BlockPreview.
-			// In this case avoid automatic creation of a wp_navigation post.
-			// Otherwise the user will be spammed with lots of menus!
-			//
-			// Also ensure other navigation menus have loaded so an
-			// accurate name can be created.
-			//
-			// Don't try saving when another save is already
-			// in progress.
-			//
-			// And finally only create the menu when the block is selected,
-			// which is an indication they want to start editing.
-			if (
-				isDisabled ||
-				isSaving ||
-				! hasResolvedDraftNavigationMenus ||
-				! hasResolvedNavigationMenus ||
-				! hasSelection ||
-				! innerBlocksAreDirty
-			) {
-				return;
-			}
+	useEffect( () => {
+		// The block will be disabled when used in a BlockPreview.
+		// In this case avoid automatic creation of a wp_navigation post.
+		// Otherwise the user will be spammed with lots of menus!
+		//
+		// Also ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		//
+		// Don't try saving when another save is already
+		// in progress.
+		//
+		// And finally only create the menu when the block is selected,
+		// which is an indication they want to start editing.
+		if (
+			isDisabled ||
+			isSaving ||
+			! hasResolvedDraftNavigationMenus ||
+			! hasResolvedNavigationMenus ||
+			! hasSelection ||
+			! innerBlocksAreDirty
+		) {
+			return;
+		}
 
-			createNavigationMenu( null, blocks );
-		},
-		/* The dependency "blocks" is intentionally omitted here.
-		 * This is because making blocks a dependency would cause
-		 * createNavigationMenu to run on every block change whereas
-		 * we only want it to run when the blocks are first detected
-		 * as dirty.
-		 * A better solution might be to add a hard saving lock using
-		 * a ref to avoid having to disbale theses eslint rules.
-		 */
-		/* eslint-disable react-hooks/exhaustive-deps */
-		[
-			createNavigationMenu,
-			isDisabled,
-			isSaving,
-			hasResolvedDraftNavigationMenus,
-			hasResolvedNavigationMenus,
-			innerBlocksAreDirty,
-			hasSelection,
-		]
-		/* eslint-enable react-hooks/exhaustive-deps */
-	);
+		createNavigationMenu( null, blocks );
+	}, [
+		blocks,
+		createNavigationMenu,
+		isDisabled,
+		isSaving,
+		hasResolvedDraftNavigationMenus,
+		hasResolvedNavigationMenus,
+		innerBlocksAreDirty,
+		hasSelection,
+	] );
 
 	const Wrapper = isSaving ? Disabled : 'div';
 

package/src/navigation/index.php

@@ -471,10 +471,6 @@ function block_core_navigation_get_fallback_blocks() {
 		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 	}
 
-	// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
-	// In this case default empty blocks.
-	$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : array();
-
 	/**
 	 * Filters the fallback experience for the Navigation block.
 	 *

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

@@ -1,13 +1,33 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	act,
+	addBlock,
+	getBlock,
+	changeTextOfRichText,
+	changeAndSelectTextOfRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import Paragraph from '../edit';
 
+setupCoreBlocks();
+
 const getTestComponentWithContent = ( content ) => {
 	return render(
 		<Paragraph
@@ -24,4 +44,339 @@ describe( 'Paragraph block', () => {
 		const screen = getTestComponentWithContent( '' );
 		expect( screen.container ).toBeTruthy();
 	} );
+
+	it( 'should bold text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ selectionStart: 2, selectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Bold' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <strong>quick</strong> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should italicize text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ selectionStart: 2, selectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <em>quick</em> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should strikethrough text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ selectionStart: 2, selectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Strikethrough' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <s>quick</s> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should left align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text left' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"left"} -->
+		<p class="has-text-align-left">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should center align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text center' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should right align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text right' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"right"} -->
+		<p class="has-text-align-right">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should preserve alignment when split', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text center' ) );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		const string = 'A quick brown fox jumps over the lazy dog.';
+		changeAndSelectTextOfRichText( paragraphTextInput, string, {
+			selectionStart: string.length / 2,
+			selectionEnd: string.length / 2,
+		} );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">A quick brown fox jum</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">ps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should link text without selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () =>
+			fireEvent.press(
+				screen.getByLabelText( 'Link to, Search or type URL' )
+			)
+		);
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Search or type URL' ),
+			'wordpress.org'
+		);
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Add link text' ),
+			'WordPress'
+		);
+		jest.useFakeTimers();
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
+		// Await link picker navigation delay
+		act( () => jest.runOnlyPendingTimers() );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p><a href="http://wordpress.org">WordPress</a></p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		jest.useRealTimers();
+	} );
+
+	it( 'should link text with selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				selectionStart: 2,
+				selectionEnd: 7,
+			}
+		);
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () =>
+			fireEvent.press(
+				screen.getByLabelText( 'Link to, Search or type URL' )
+			)
+		);
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Search or type URL' ),
+			'wordpress.org'
+		);
+		jest.useFakeTimers();
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
+		// Await link picker navigation delay
+		act( () => jest.runOnlyPendingTimers() );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		jest.useRealTimers();
+	} );
+
+	it( 'should link text with clipboard contents', async () => {
+		// Arrange
+		Clipboard.getString.mockResolvedValue( 'https://wordpress.org' );
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				selectionStart: 2,
+				selectionEnd: 7,
+			}
+		);
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () =>
+			fireEvent.press(
+				screen.getByLabelText( 'Link to, Search or type URL' )
+			)
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="https://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		Clipboard.getString.mockReset();
+	} );
+
+	it( 'should not remove leading or trailing whitespace when formatting', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		changeAndSelectTextOfRichText(
+			paragraphTextInput,
+			'     some text      ',
+			{
+				selectionStart: 5,
+				selectionEnd: 14,
+			}
+		);
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>     <em>some text</em>      </p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

package/src/post-author/block.json

@@ -64,6 +64,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"
 }

package/src/post-excerpt/index.php

@@ -25,11 +25,11 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	* wp_trim_words is used instead.
 	*/
 	$excerpt_length = $attributes['excerptLength'];
+	$excerpt        = get_the_excerpt( $block->context['postId'] );
 	if ( isset( $excerpt_length ) ) {
-		$excerpt = wp_trim_words( get_the_excerpt(), $excerpt_length );
-	} else {
-		$excerpt = get_the_excerpt();
+		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
 	}
+
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';

package/src/post-excerpt/style.scss

@@ -1,4 +1,5 @@
-.wp-block-post-excerpt {
+// Lowest specificity on wrapper margins to avoid overriding layout styles.
+:where(.wp-block-post-excerpt) {
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

package/src/post-featured-image/dimension-controls.js

@@ -70,6 +70,10 @@ const DimensionControls = ( {
 		} );
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
+
+	const showScaleControl =
+		height || ( aspectRatio && aspectRatio !== 'auto' );
+
 	return (
 		<InspectorControls group="dimensions">
 			<ToolsPanelItem
@@ -170,7 +174,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ ( height || aspectRatio ) && (
+			{ showScaleControl && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }

package/src/post-featured-image/edit.js

@@ -183,10 +183,15 @@ export default function PostFeaturedImageEdit( {
 	let image;
 
 	/**
-	 * A post featured image block placed in a query loop
-	 * does not have image replacement or upload options.
+	 * A Post Featured Image block should not have image replacement
+	 * or upload options in the following cases:
+	 * - Is placed in a Query Loop. This is a consious decision to
+	 * prevent content editing of different posts in Query Loop, and
+	 * this could change in the future.
+	 * - Is in a context where it does not have a postId (for example
+	 * in a template or template part).
 	 */
-	if ( ! featuredImage && isDescendentOfQueryLoop ) {
+	if ( ! featuredImage && ( isDescendentOfQueryLoop || ! postId ) ) {
 		return (
 			<>
 				{ controls }
@@ -202,32 +207,6 @@ export default function PostFeaturedImageEdit( {
 		);
 	}
 
-	/**
-	 * A post featured image placed in a block template, outside a query loop,
-	 * does not have a postId and will always be a placeholder image.
-	 * It does not have image replacement, upload, or link options.
-	 */
-	if ( ! featuredImage && ! postId ) {
-		return (
-			<>
-				<DimensionControls
-					clientId={ clientId }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					imageSizeOptions={ imageSizeOptions }
-				/>
-				<div { ...blockProps }>
-					{ placeholder() }
-					<Overlay
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						clientId={ clientId }
-					/>
-				</div>
-			</>
-		);
-	}
-
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,

package/src/post-time-to-read/block.json

@@ -14,6 +14,13 @@
 		}
 	},
 	"supports": {
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-time-to-read/edit.js

@@ -93,7 +93,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 					} }
 				/>
 			</BlockControls>
-			<p { ...blockProps }>{ minutesToReadString }</p>
+			<div { ...blockProps }>{ minutesToReadString }</div>
 		</>
 	);
 }

package/src/post-time-to-read/index.php

@@ -32,8 +32,8 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
 
 	$minutes_to_read_string = sprintf(
-		/* translators: %d is the number of minutes the post will take to read. */
-		_n( '%d minute', '%d minutes', $minutes_to_read ),
+		/* translators: %s is the number of minutes the post will take to read. */
+		_n( '%s minute', '%s minutes', $minutes_to_read ),
 		$minutes_to_read
 	);
 
@@ -42,7 +42,7 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
 		$minutes_to_read_string
 	);