@wordpress/block-library 8.6.0 → 8.8.0

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

@@ -29,9 +29,6 @@ const ALLOWED_BLOCKS = [
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
-	attributes: {
-		type: 'page',
-	},
 };
 
 export default function NavigationInnerBlocks( {

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

@@ -689,10 +689,12 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-close {
 	width: 100%;
 
-	// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
-	max-width: var(--wp--style--global--wide-size, 100%);
-	margin-left: auto;
-	margin-right: auto;
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
 
 	// This element is not keyboard accessible, and is focusable only using the mouse.
 	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,

package/src/navigation-link/index.php

@@ -181,7 +181,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/navigation-submenu/index.php

@@ -14,66 +14,6 @@
  * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
@@ -129,7 +69,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -144,17 +83,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -249,14 +184,33 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
-		$classes     = array_merge(
-			array( 'wp-block-navigation__submenu-container' ),
-			$colors['css_classes']
-		);
-		$css_classes = trim( implode( ' ', $classes ) );
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
 
-		$style_attribute = $colors['inline_styles'];
+		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
 
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_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-author/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	$link        = get_author_posts_url( $author_id );
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
-		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s">%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;