@wordpress/block-library 8.7.0 → 8.9.0

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

@@ -1,13 +1,33 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	act,
+	addBlock,
+	getBlock,
+	typeInRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+	waitFor,
+	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,599 @@ 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 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…' );
+		typeInRichText(
+			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…' );
+		typeInRichText(
+			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…' );
+		typeInRichText(
+			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.';
+		typeInRichText( paragraphTextInput, string, {
+			finalSelectionStart: string.length / 2,
+			finalSelectionEnd: 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				finalSelectionStart: 2,
+				finalSelectionEnd: 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				finalSelectionStart: 2,
+				finalSelectionEnd: 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…' );
+		typeInRichText( paragraphTextInput, '     some text      ', {
+			finalSelectionStart: 5,
+			finalSelectionEnd: 14,
+		} );
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>     <em>some text</em>      </p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should set a text color', 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"pale-pink"} -->
+		<p class="has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a background color', 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange"} -->
+		<p class="has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a text and background color', 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'White' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+		<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should remove text and background colors', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+			<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should not have a gradient background color option', 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…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Assert
+		const colorButton = screen.getByLabelText( 'Luminous vivid orange' );
+		expect( colorButton ).toBeDefined();
+
+		const gradientButton = screen.queryByLabelText( 'Gradient' );
+		expect( gradientButton ).toBeNull();
+	} );
+
+	it( 'should set a theme text color', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Tertiary' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"tertiary"} -->
+		<p class="has-tertiary-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should show the contrast check warning', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"white","textColor":"white"} -->
+			<p class="has-white-color has-white-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Assert
+		const contrastCheckElement = screen.getByText(
+			/This color combination/
+		);
+		expect( contrastCheckElement ).toBeDefined();
+	} );
 } );

package/src/post-author/block.json

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

package/src/post-date/edit.js

@@ -37,6 +37,7 @@ export default function PostDateEdit( {
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
+			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
 
@@ -175,6 +176,9 @@ export default function PostDateEdit( {
 							} )
 						}
 						checked={ displayType === 'modified' }
+						help={ __(
+							'Only shows if the post has been modified'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>

package/src/post-date/index.php

@@ -18,25 +18,34 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID = $block->context['postId'];
+	$post_ID          = $block->context['postId'];
+	$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	$classes          = array();
 
-	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
 	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
 		$classes[] = 'has-link-color';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
+	/*
+	 * If the "Display last modified date" setting is enabled,
+	 * only display the modified date if it is later than the publishing date.
+	 */
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
-		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-		$unformatted_date = esc_attr( get_the_modified_date( 'c', $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 ) );
+		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 );
+			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+			$classes[]        = 'wp-block-post-date__modified-date';
+		} else {
+			return '';
+		}
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}