Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add do_block_template_part function #30345

Merged
merged 4 commits into from
Apr 8, 2021
Merged

Conversation

aristath
Copy link
Member

@aristath aristath commented Mar 29, 2021

Description

Adds a gutenberg_do_block_template_part() function. This can be used by classic (non-FSE) themes that want to use a block template for their header and/or footer.

How has this been tested?

Your theme will now use the block-template instead of the PHP template for the header.

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).

cc @mtias

@aristath aristath added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Feature] Full Site Editing labels Mar 29, 2021
@github-actions
Copy link

github-actions bot commented Mar 29, 2021

Size Change: +380 B (0%)

Total Size: 1.42 MB

Filename Size Change
build/annotations/index.js 3.78 kB +2 B (0%)
build/api-fetch/index.js 3.41 kB -4 B (0%)
build/autop/index.js 2.82 kB -3 B (0%)
build/block-directory/index.js 8.63 kB -4 B (0%)
build/block-editor/index.js 127 kB -22 B (0%)
build/block-editor/style-rtl.css 12.4 kB -3 B (0%)
build/block-editor/style.css 12.4 kB -3 B (0%)
build/block-library/blocks/button/style-rtl.css 489 B -62 B (-11%) 👏
build/block-library/blocks/button/style.css 488 B -63 B (-11%) 👏
build/block-library/blocks/buttons/style-rtl.css 364 B -6 B (-2%)
build/block-library/blocks/buttons/style.css 363 B -7 B (-2%)
build/block-library/blocks/navigation-link/editor-rtl.css 597 B -54 B (-8%)
build/block-library/blocks/navigation-link/editor.css 597 B -54 B (-8%)
build/block-library/blocks/search/editor-rtl.css 189 B +24 B (+15%) ⚠️
build/block-library/blocks/search/editor.css 189 B +24 B (+15%) ⚠️
build/block-library/blocks/search/style-rtl.css 359 B +17 B (+5%) 🔍
build/block-library/blocks/search/style.css 362 B +18 B (+5%) 🔍
build/block-library/common-rtl.css 1.31 kB +212 B (+19%) ⚠️
build/block-library/common.css 1.31 kB +211 B (+19%) ⚠️
build/block-library/editor-rtl.css 9.54 kB -24 B (0%)
build/block-library/editor.css 9.53 kB -25 B (0%)
build/block-library/index.js 151 kB -32 B (0%)
build/block-library/reset-rtl.css 503 B +128 B (+34%) 🚨
build/block-library/reset.css 504 B +128 B (+34%) 🚨
build/block-library/style-rtl.css 9.21 kB +103 B (+1%)
build/block-library/style.css 9.22 kB +105 B (+1%)
build/block-serialization-default-parser/index.js 1.87 kB +4 B (0%)
build/blocks/index.js 48.4 kB -3 B (0%)
build/components/index.js 284 kB -231 B (0%)
build/compose/index.js 11.2 kB +2 B (0%)
build/core-data/index.js 17 kB +246 B (+1%)
build/customize-widgets/index.js 7.28 kB -53 B (-1%)
build/data-controls/index.js 835 B -3 B (0%)
build/dom/index.js 5.08 kB +92 B (+2%)
build/edit-navigation/index.js 17 kB -385 B (-2%)
build/edit-post/index.js 307 kB -100 B (0%)
build/edit-post/style-rtl.css 7.13 kB +78 B (+1%)
build/edit-post/style.css 7.12 kB +77 B (+1%)
build/edit-site/index.js 28 kB +469 B (+2%)
build/edit-site/style-rtl.css 4.61 kB +104 B (+2%)
build/edit-site/style.css 4.61 kB +104 B (+2%)
build/edit-widgets/index.js 15.7 kB -76 B (0%)
build/editor/index.js 42.2 kB -533 B (-1%)
build/format-library/index.js 6.75 kB -2 B (0%)
build/keycodes/index.js 1.96 kB -1 B (0%)
build/list-reusable-blocks/index.js 3.19 kB -2 B (0%)
build/media-utils/index.js 5.38 kB -4 B (0%)
build/nux/index.js 3.42 kB -2 B (0%)
build/plugins/index.js 2.95 kB -2 B (0%)
build/primitives/index.js 1.42 kB +1 B (0%)
build/reusable-blocks/index.js 3.79 kB -3 B (0%)
build/rich-text/index.js 13.5 kB -3 B (0%)
build/server-side-render/index.js 2.59 kB -4 B (0%)
build/token-list/index.js 1.27 kB +1 B (0%)
build/url/index.js 3.02 kB +2 B (0%)
build/viewport/index.js 1.86 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 436 B 0 B
build/block-library/blocks/columns/style.css 435 B 0 B
build/block-library/blocks/cover/editor-rtl.css 605 B 0 B
build/block-library/blocks/cover/editor.css 605 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.24 kB 0 B
build/block-library/blocks/cover/style.css 1.24 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 175 B 0 B
build/block-library/blocks/file/editor.css 174 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.11 kB 0 B
build/block-library/blocks/gallery/style.css 1.1 kB 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 398 B 0 B
build/block-library/blocks/legacy-widget/editor.css 399 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 957 B 0 B
build/block-library/blocks/navigation-link/style.css 955 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.13 kB 0 B
build/block-library/blocks/navigation/editor.css 1.13 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 204 B 0 B
build/block-library/blocks/navigation/style.css 205 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 170 B 0 B
build/block-library/blocks/page-list/editor.css 170 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 795 B 0 B
build/block-library/blocks/query/editor.css 794 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 115 B 0 B
build/block-library/blocks/site-logo/style.css 115 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 776 B 0 B
build/block-library/blocks/social-links/editor.css 776 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 317 B 0 B
build/block-library/blocks/spacer/editor.css 317 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 402 B 0 B
build/block-library/blocks/table/style.css 402 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 552 B 0 B
build/block-library/blocks/template-part/editor.css 551 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 50 B 0 B
build/block-library/blocks/verse/editor.css 50 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 187 B 0 B
build/block-library/blocks/video/style.css 187 B 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.2 kB 0 B
build/customize-widgets/style-rtl.css 676 B 0 B
build/customize-widgets/style.css 677 B 0 B
build/data/index.js 8.89 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 787 B 0 B
build/dom-ready/index.js 576 B 0 B
build/edit-navigation/style-rtl.css 2.86 kB 0 B
build/edit-navigation/style.css 2.86 kB 0 B
build/edit-widgets/style-rtl.css 2.98 kB 0 B
build/edit-widgets/style.css 2.98 kB 0 B
build/editor/style-rtl.css 3.96 kB 0 B
build/editor/style.css 3.96 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 2.28 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 4.02 kB 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/keyboard-shortcuts/index.js 2.53 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/notices/index.js 1.85 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/priority-queue/index.js 791 B 0 B
build/react-i18n/index.js 1.46 kB 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@mtias
Copy link
Member

mtias commented Apr 1, 2021

Thanks for exploring this! I think it'd be a nice way to gradually turn parts of a theme into block parts. Should we have more specific functions for semantic template parts (header and footer at the moment)?

@aristath
Copy link
Member Author

aristath commented Apr 1, 2021

Should we have more specific functions for semantic template parts (header and footer at the moment)?

Makes sense... Added gutenberg_do_block_template_part_header & gutenberg_do_block_template_part_footer.
I started by removing the initial function and then duplicating it for each template-part, but it didn't make much sense that way... too much code duplication. So the functions for specific template-parts are just wrappers for the more abstract gutenberg_do_block_template_part function 👍

@scruffian
Copy link
Contributor

Would it be possible to adapt get_template_part so that it also looks for HTML files?

@aristath
Copy link
Member Author

aristath commented Apr 2, 2021

Yes, it would be possible, but only after Gutenberg gets merged in core. But I'm not sure if it would be better or not 🤔

@scruffian
Copy link
Contributor

One advantage I can see is that it would mean that block themes would work even if the site editor wasn't enabled.

@mtias
Copy link
Member

mtias commented Apr 2, 2021

One more note on naming, since these functions don't take content directly (like do_blocks or do_shortcode), should it instead be something like wp_block_header_area instead?

@aristath
Copy link
Member Author

aristath commented Apr 2, 2021

One more note on naming, since these functions don't take content directly (like do_blocks or do_shortcode), should it instead be something like wp_block_header_area instead?

Good point. Renamed them, removing the do part. Of course I prefixed them with gutenberg_, once they get merged in core I assume we change all prefixes to wp_

@carolinan
Copy link
Contributor

I followed the testing instructions and it is working well for me.

It did get me thinking about if it would be reasonable to add the header and footer HTML elements as wrappers,
but I figured this needs to be up to the theme author, to avoid duplicate elements.

@aristath aristath merged commit 030dce8 into trunk Apr 8, 2021
@aristath aristath deleted the add/do_block_template_part branch April 8, 2021 05:49
@github-actions github-actions bot added this to the Gutenberg 10.5 milestone Apr 8, 2021
@gziolo
Copy link
Member

gziolo commented Apr 9, 2021

Would it be possible to adapt get_template_part so that it also looks for HTML files?
Yes, it would be possible, but only after Gutenberg gets merged in core. But I'm not sure if it would be better or not 🤔

I was looking at render_block_core_template_part and it covers HTML files as well. Can we use the following implementation to simplify the logic:

function gutenberg_block_template_part( $attributes ) {
 	echo do_blocks( sprintf( '<!-- wp:template-part %s /-->', json_encode( $attributes ) ) );
 }

It did get me thinking about if it would be reasonable to add the header and footer HTML elements as wrappers,
but I figured this needs to be up to the theme author, to avoid duplicate elements.

The concept I shared above, resolves the issue as well when the area is set. It could automatically use footer or header. An alternative would be to pass tagName as an attribute to the function.

There are more benefits because it fully aligns the handling for the block with how it works in different contexts:

  • shortcode support
  • content filtering
  • prevention for infinite nesting loop - well this works anyway but it would render the block inside self once before halting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants