Read More: Add example preview

[yogeshbhutkar]

Part of: #64707

What, Why & How?

This PR introduces an example preview for the Read More block.

Testing Instructions

1. Navigate to Global Inserter
2. Hover over the Read More block and notice the new preview.

Screenshots

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ramonjd <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[yogeshbhutkar]

Hi @t-hamano,
I've implemented a missing block preview for the Read More block here. Could you please review this PR when you have a moment?

[t-hamano]

@yogeshbhutkar Thanks for the PR!

@aaronrobertshaw @ramonjd

I noticed that the block example is not being translated. For example, in the Read more block in this PR, the default text in Japanese when the block is inserted is 続きを読む, whereas the example block displays Read more:

From my understanding, the example field in block.json cannot be translated currently.

If the examples contain content that may be localized, should the examples be defined in the JS code instead of in block.json?

export const settings = {
	icon,
	edit,
	example: {
		attributes: {
			content: _x( 'Read more', 'Example text for the Read More block' ),
		},
	},
};

This issue may occur in other blocks as well.

[ramonjd]

If the examples contain content that may be localized, should the examples be defined in the JS code instead of in block.json?

That should work! Seems there are other instances of blocks with translated example content:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/index.js#L22-L22

[yogeshbhutkar]

Thanks, @t-hamano for reviewing the PR, and @ramonjd for providing the examples. I've implemented the suggested changes in the latest commit. However, I've found some blocks using example text that is not translated.

• comments-pagination-next
• comments-pagination-previous
• post-navigation-link
• query-no-results
• table-of-contents

I'll update it as a comment inside the original issue so we can track this.

[t-hamano]

LGTM 👍

[yogeshbhutkar]

Thanks for the approval @t-hamano.

Here are the PRs that should incorporate translation-ready strings as per the comment mentioned above.

• comments-pagination-next
• comments-pagination-previous
• post-navigation-link
• query-no-results
• table-of-contents

Can you please take a look at these PRs whenever you get a moment?