i18n: Add pattern block #33217

scruffian · 2021-07-06T11:02:06Z

Description

This is another approach to #33192

The idea is that the block outputs a template which will contain translated strings, so that themes can have translated strings in their templates.

One problem with this approach is that if as user edits the content of the pattern, they will no longer have translated text.

How has this been tested?

To test, check out this PR:
Automattic/themes#4168

Then edit the search results template - the text comes from a PHP template, which is translatable.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

github-actions · 2021-07-06T11:08:57Z

Size Change: +12.4 kB (+1%)

Total Size: 1.06 MB

Filename	Size	Change
`build/annotations/index.min.js`	2.93 kB	-2 B (0%)
`build/blob/index.min.js`	673 B	+1 B (0%)
`build/block-editor/index.min.js`	120 kB	+10 B (0%)
`build/block-library/blocks/file/view.min.js`	779 B	-1 B (0%)
`build/block-library/index.min.js`	146 kB	+177 B (0%)
`build/block-serialization-default-parser/index.min.js`	1.3 kB	-1 B (0%)
`build/blocks/index.min.js`	47.3 kB	-6 B (0%)
`build/components/index.min.js`	194 kB	+12.2 kB (+7%)	🔍
`build/compose/index.min.js`	10.2 kB	+2 B (0%)
`build/core-data/index.min.js`	12.4 kB	-1 B (0%)
`build/customize-widgets/index.min.js`	10.2 kB	+2 B (0%)
`build/data-controls/index.min.js`	828 B	+1 B (0%)
`build/data/index.min.js`	7.22 kB	-1 B (0%)
`build/dom-ready/index.min.js`	577 B	+1 B (0%)
`build/dom/index.min.js`	4.66 kB	+2 B (0%)
`build/edit-navigation/index.min.js`	13.9 kB	+1 B (0%)
`build/edit-post/index.min.js`	58.7 kB	-11 B (0%)
`build/edit-site/index.min.js`	25.9 kB	+6 B (0%)
`build/edit-widgets/index.min.js`	16.2 kB	+4 B (0%)
`build/editor/index.min.js`	38.6 kB	+8 B (0%)
`build/hooks/index.min.js`	1.76 kB	+1 B (0%)
`build/html-entities/index.min.js`	629 B	+1 B (0%)
`build/i18n/index.min.js`	3.73 kB	+2 B (0%)
`build/is-shallow-equal/index.min.js`	709 B	-1 B (0%)
`build/keycodes/index.min.js`	1.43 kB	+1 B (0%)
`build/notices/index.min.js`	1.07 kB	+1 B (0%)
`build/nux/index.min.js`	2.31 kB	+2 B (0%)
`build/priority-queue/index.min.js`	791 B	+1 B (0%)
`build/rich-text/index.min.js`	10.6 kB	+3 B (0%)
`build/token-list/index.min.js`	847 B	-1 B (0%)
`build/viewport/index.min.js`	1.28 kB	+3 B (0%)

ℹ️

View Unchanged

Filename	Size
`build/a11y/index.min.js`	1.12 kB
`build/admin-manifest/index.min.js`	1.42 kB
`build/api-fetch/index.min.js`	2.44 kB
`build/autop/index.min.js`	2.28 kB
`build/block-directory/index.min.js`	6.61 kB
`build/block-directory/style-rtl.css`	1.02 kB
`build/block-directory/style.css`	1.02 kB
`build/block-editor/style-rtl.css`	13.8 kB
`build/block-editor/style.css`	13.8 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B
`build/block-library/blocks/audio/editor.css`	58 B
`build/block-library/blocks/audio/style-rtl.css`	112 B
`build/block-library/blocks/audio/style.css`	112 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	475 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/button/style-rtl.css`	603 B
`build/block-library/blocks/button/style.css`	602 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/buttons/style-rtl.css`	375 B
`build/block-library/blocks/buttons/style.css`	375 B
`build/block-library/blocks/calendar/style-rtl.css`	208 B
`build/block-library/blocks/calendar/style.css`	208 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/columns/editor-rtl.css`	190 B
`build/block-library/blocks/columns/editor.css`	190 B
`build/block-library/blocks/columns/style-rtl.css`	422 B
`build/block-library/blocks/columns/style.css`	422 B
`build/block-library/blocks/cover/editor-rtl.css`	670 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/cover/style-rtl.css`	1.22 kB
`build/block-library/blocks/cover/style.css`	1.23 kB
`build/block-library/blocks/embed/editor-rtl.css`	486 B
`build/block-library/blocks/embed/editor.css`	486 B
`build/block-library/blocks/embed/style-rtl.css`	401 B
`build/block-library/blocks/embed/style.css`	400 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	301 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	704 B
`build/block-library/blocks/gallery/editor.css`	705 B
`build/block-library/blocks/gallery/style-rtl.css`	1.06 kB
`build/block-library/blocks/gallery/style.css`	1.06 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	160 B
`build/block-library/blocks/group/editor.css`	160 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	93 B
`build/block-library/blocks/group/theme.css`	93 B
`build/block-library/blocks/heading/editor-rtl.css`	152 B
`build/block-library/blocks/heading/editor.css`	152 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/home-link/style-rtl.css`	259 B
`build/block-library/blocks/home-link/style.css`	259 B
`build/block-library/blocks/html/editor-rtl.css`	281 B
`build/block-library/blocks/html/editor.css`	281 B
`build/block-library/blocks/image/editor-rtl.css`	729 B
`build/block-library/blocks/image/editor.css`	727 B
`build/block-library/blocks/image/style-rtl.css`	481 B
`build/block-library/blocks/image/style.css`	485 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	286 B
`build/block-library/blocks/latest-comments/style.css`	286 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B
`build/block-library/blocks/latest-posts/editor.css`	137 B
`build/block-library/blocks/latest-posts/style-rtl.css`	534 B
`build/block-library/blocks/latest-posts/style.css`	532 B
`build/block-library/blocks/list/style-rtl.css`	63 B
`build/block-library/blocks/list/style.css`	63 B
`build/block-library/blocks/media-text/editor-rtl.css`	263 B
`build/block-library/blocks/media-text/editor.css`	264 B
`build/block-library/blocks/media-text/style-rtl.css`	492 B
`build/block-library/blocks/media-text/style.css`	489 B
`build/block-library/blocks/more/editor-rtl.css`	434 B
`build/block-library/blocks/more/editor.css`	434 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	633 B
`build/block-library/blocks/navigation-link/editor.css`	634 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.69 kB
`build/block-library/blocks/navigation/editor.css`	1.69 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.63 kB
`build/block-library/blocks/navigation/style.css`	1.63 kB
`build/block-library/blocks/navigation/view.min.js`	2.87 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B
`build/block-library/blocks/page-list/editor.css`	311 B
`build/block-library/blocks/page-list/style-rtl.css`	240 B
`build/block-library/blocks/page-list/style.css`	240 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	247 B
`build/block-library/blocks/paragraph/style.css`	248 B
`build/block-library/blocks/post-author/editor-rtl.css`	209 B
`build/block-library/blocks/post-author/editor.css`	209 B
`build/block-library/blocks/post-author/style-rtl.css`	183 B
`build/block-library/blocks/post-author/style.css`	184 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-content/editor-rtl.css`	139 B
`build/block-library/blocks/post-content/editor.css`	139 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	338 B
`build/block-library/blocks/post-featured-image/editor.css`	338 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	141 B
`build/block-library/blocks/post-featured-image/style.css`	141 B
`build/block-library/blocks/post-template/editor-rtl.css`	100 B
`build/block-library/blocks/post-template/editor.css`	99 B
`build/block-library/blocks/post-template/style-rtl.css`	379 B
`build/block-library/blocks/post-template/style.css`	380 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B
`build/block-library/blocks/post-title/style.css`	60 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	183 B
`build/block-library/blocks/pullquote/editor.css`	183 B
`build/block-library/blocks/pullquote/style-rtl.css`	318 B
`build/block-library/blocks/pullquote/style.css`	318 B
`build/block-library/blocks/pullquote/theme-rtl.css`	169 B
`build/block-library/blocks/pullquote/theme.css`	169 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B
`build/block-library/blocks/query-pagination/editor.css`	262 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B
`build/block-library/blocks/query-pagination/style.css`	168 B
`build/block-library/blocks/query-title/editor-rtl.css`	86 B
`build/block-library/blocks/query-title/editor.css`	86 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	169 B
`build/block-library/blocks/quote/style.css`	169 B
`build/block-library/blocks/quote/theme-rtl.css`	221 B
`build/block-library/blocks/quote/theme.css`	221 B
`build/block-library/blocks/rss/editor-rtl.css`	201 B
`build/block-library/blocks/rss/editor.css`	202 B
`build/block-library/blocks/rss/style-rtl.css`	290 B
`build/block-library/blocks/rss/style.css`	290 B
`build/block-library/blocks/search/editor-rtl.css`	211 B
`build/block-library/blocks/search/editor.css`	211 B
`build/block-library/blocks/search/style-rtl.css`	359 B
`build/block-library/blocks/search/style.css`	362 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	251 B
`build/block-library/blocks/separator/style.css`	251 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	476 B
`build/block-library/blocks/shortcode/editor.css`	476 B
`build/block-library/blocks/site-logo/editor-rtl.css`	646 B
`build/block-library/blocks/site-logo/editor.css`	647 B
`build/block-library/blocks/site-logo/style-rtl.css`	154 B
`build/block-library/blocks/site-logo/style.css`	154 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	87 B
`build/block-library/blocks/site-tagline/editor.css`	87 B
`build/block-library/blocks/site-title/editor-rtl.css`	85 B
`build/block-library/blocks/site-title/editor.css`	85 B
`build/block-library/blocks/social-link/editor-rtl.css`	164 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/social-links/editor-rtl.css`	800 B
`build/block-library/blocks/social-links/editor.css`	799 B
`build/block-library/blocks/social-links/style-rtl.css`	1.34 kB
`build/block-library/blocks/social-links/style.css`	1.34 kB
`build/block-library/blocks/spacer/editor-rtl.css`	308 B
`build/block-library/blocks/spacer/editor.css`	308 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	478 B
`build/block-library/blocks/table/editor.css`	478 B
`build/block-library/blocks/table/style-rtl.css`	480 B
`build/block-library/blocks/table/style.css`	480 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/editor-rtl.css`	118 B
`build/block-library/blocks/tag-cloud/editor.css`	118 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	94 B
`build/block-library/blocks/tag-cloud/style.css`	94 B
`build/block-library/blocks/template-part/editor-rtl.css`	551 B
`build/block-library/blocks/template-part/editor.css`	550 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	569 B
`build/block-library/blocks/video/editor.css`	570 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	1.29 kB
`build/block-library/common.css`	1.29 kB
`build/block-library/editor-rtl.css`	9.86 kB
`build/block-library/editor.css`	9.86 kB
`build/block-library/reset-rtl.css`	514 B
`build/block-library/reset.css`	515 B
`build/block-library/style-rtl.css`	10.2 kB
`build/block-library/style.css`	10.2 kB
`build/block-library/theme-rtl.css`	692 B
`build/block-library/theme.css`	693 B
`build/block-serialization-spec-parser/index.min.js`	3.06 kB
`build/components/style-rtl.css`	15.9 kB
`build/components/style.css`	15.9 kB
`build/customize-widgets/style-rtl.css`	1.48 kB
`build/customize-widgets/style.css`	1.48 kB
`build/date/index.min.js`	31.8 kB
`build/deprecated/index.min.js`	739 B
`build/edit-navigation/style-rtl.css`	3.12 kB
`build/edit-navigation/style.css`	3.12 kB
`build/edit-post/classic-rtl.css`	483 B
`build/edit-post/classic.css`	483 B
`build/edit-post/style-rtl.css`	7.29 kB
`build/edit-post/style.css`	7.28 kB
`build/edit-site/style-rtl.css`	4.99 kB
`build/edit-site/style.css`	4.98 kB
`build/edit-widgets/style-rtl.css`	3.88 kB
`build/edit-widgets/style.css`	3.89 kB
`build/editor/style-rtl.css`	3.88 kB
`build/editor/style.css`	3.88 kB
`build/element/index.min.js`	3.44 kB
`build/escape-html/index.min.js`	739 B
`build/format-library/index.min.js`	5.71 kB
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	669 B
`build/keyboard-shortcuts/index.min.js`	1.74 kB
`build/list-reusable-blocks/index.min.js`	2.07 kB
`build/list-reusable-blocks/style-rtl.css`	842 B
`build/list-reusable-blocks/style.css`	842 B
`build/media-utils/index.min.js`	3.08 kB
`build/nux/style-rtl.css`	745 B
`build/nux/style.css`	742 B
`build/plugins/index.min.js`	1.99 kB
`build/primitives/index.min.js`	1.03 kB
`build/react-i18n/index.min.js`	925 B
`build/redux-routine/index.min.js`	2.82 kB
`build/reusable-blocks/index.min.js`	2.56 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/server-side-render/index.min.js`	1.63 kB
`build/shortcode/index.min.js`	1.68 kB
`build/url/index.min.js`	1.95 kB
`build/warning/index.min.js`	1.13 kB
`build/widgets/index.min.js`	6.45 kB
`build/widgets/style-rtl.css`	1.04 kB
`build/widgets/style.css`	1.05 kB
`build/wordcount/index.min.js`	1.24 kB

_{compressed-size-action}

mcsf · 2021-07-07T16:30:28Z

packages/block-library/src/pattern/edit.js

+		)
+	);
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	replaceInnerBlocks( clientId, selectedPattern.blocks );


This is a side effect of the component, so it should be encapsulated and not run inline on any re-render. This could be as simple as using useEffect or useRefEffect. But the lifecycle of the effect needs to be pondered: when should this be called?, is the effect idempotent?

scruffian added 3 commits Jul 6, 2021

i18n: Add pattern block

e771dc2

i18n: Add pattern block

3faa88b

i18n: Add pattern block

bbfe7c4

scruffian added the Internationalization (i18n) label Jul 6, 2021

scruffian requested a review from youknowriad Jul 6, 2021

scruffian self-assigned this Jul 6, 2021

scruffian requested review from ajitbohra, spacedmonkey and TimothyBJacobs as code owners Jul 6, 2021

scruffian mentioned this pull request Jul 6, 2021

Theme i18n: Add a block to allow strings in template files to be translated #33192

Closed

7 tasks

aristath self-requested a review Jul 6, 2021

Switch to using innerblocks

bc428d9

scruffian mentioned this pull request Jul 6, 2021

i18n: Search Results pattern Automattic/themes#4168

Open

scruffian requested a review from mtias Jul 6, 2021

scruffian mentioned this pull request Jul 6, 2021

Quadrat: translation Automattic/themes#3653

Open

4 tasks

mcsf reviewed Jul 7, 2021

View changes

WordPress / gutenberg

i18n: Add pattern block #33217

i18n: Add pattern block #33217

scruffian commented Jul 6, 2021 •

edited

github-actions bot commented Jul 6, 2021 •

edited

This comment has been minimized.

WordPress / gutenberg

i18n: Add pattern block #33217

Are you sure you want to change the base?

i18n: Add pattern block #33217

Conversation

scruffian commented Jul 6, 2021 • edited

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Jul 6, 2021 • edited

This comment has been minimized.

mcsf Jul 7, 2021 Contributor

scruffian commented Jul 6, 2021 •

edited

github-actions bot commented Jul 6, 2021 •

edited

mcsf Jul 7, 2021
Contributor