Block-based template parts for Classic themes #42729

Mamaduka · 2022-07-27T09:29:20Z

What?

PR allows Classic / Hybrid themes to use block-based template parts without using complete block-based templates. These can be rendered in PHP templates using the block_template_part method.

Why?

The feature should make it easier to transition between Classic, Hybrid, and Block themes.

How?

PR alters Site Editor to allow only listing and editing template parts. It can be enabled for Classic themes using new add_theme_support( 'block-template-parts' ) theme feature (not a final name). Once the feature is enabled new "Template Parts" menu is visible under "Appearance," which displays a list of template parts.

The changes in template-parts-screen.php will be absorbed by site-editor.php. Inline comments have notes about migration paths.

Open Questions

Should we enable alignments at the root level? These are disabled by default for Site Editor, so root level blocks cannot be aligned when editing template parts.
~~Do we want to display the Global Styles sidebar if a theme doesn't have a theme.json file?~~
~~Do we want to allow users to add new template parts via UI?~~

Testing Instructions

Clone a testing TT1 child theme (requires TT1 parent) - https://github.com/Mamaduka/block-fragments
Access the new "Template Parts" menu.
Edit the footer template and confirm changes are visible on the front end. Currently, the theme supports only the footer template.
Experiment 🧪

Screenshots or screencast

CleanShot.2022-07-27.at.13.08.45.mp4

Mamaduka · 2022-07-27T09:33:09Z

packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js

 				isNavigationOpen: isNavigationOpened(),
+				isTemplatePartsMode: supportsTemplatePartsMode,


I need a better name for this. Maybe templatePartsEnabled?

github-actions · 2022-07-27T09:36:15Z

Size Change: +255 B (0%)

Total Size: 1.25 MB

Filename	Size	Change
`build/edit-site/index.min.js`	58.4 kB	+127 B (0%)
`build/edit-site/style-rtl.css`	8.3 kB	+63 B (+1%)
`build/edit-site/style.css`	8.28 kB	+65 B (+1%)

ℹ️

View Unchanged

Filename	Size
`build/a11y/index.min.js`	982 B
`build/annotations/index.min.js`	2.76 kB
`build/api-fetch/index.min.js`	2.26 kB
`build/autop/index.min.js`	2.14 kB
`build/blob/index.min.js`	475 B
`build/block-directory/index.min.js`	7.05 kB
`build/block-directory/style-rtl.css`	990 B
`build/block-directory/style.css`	991 B
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/index.min.js`	162 kB
`build/block-editor/style-rtl.css`	15.2 kB
`build/block-editor/style.css`	15.2 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`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	122 B
`build/block-library/blocks/audio/style.css`	122 B
`build/block-library/blocks/audio/theme-rtl.css`	126 B
`build/block-library/blocks/audio/theme.css`	126 B
`build/block-library/blocks/avatar/editor-rtl.css`	116 B
`build/block-library/blocks/avatar/editor.css`	116 B
`build/block-library/blocks/avatar/style-rtl.css`	84 B
`build/block-library/blocks/avatar/style.css`	84 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`	441 B
`build/block-library/blocks/button/editor.css`	441 B
`build/block-library/blocks/button/style-rtl.css`	505 B
`build/block-library/blocks/button/style.css`	505 B
`build/block-library/blocks/buttons/editor-rtl.css`	292 B
`build/block-library/blocks/buttons/editor.css`	292 B
`build/block-library/blocks/buttons/style-rtl.css`	275 B
`build/block-library/blocks/buttons/style.css`	275 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 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`	100 B
`build/block-library/blocks/categories/style.css`	100 B
`build/block-library/blocks/code/editor-rtl.css`	53 B
`build/block-library/blocks/code/editor.css`	53 B
`build/block-library/blocks/code/style-rtl.css`	103 B
`build/block-library/blocks/code/style.css`	103 B
`build/block-library/blocks/code/theme-rtl.css`	124 B
`build/block-library/blocks/code/theme.css`	124 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	406 B
`build/block-library/blocks/columns/style.css`	406 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-content/style-rtl.css`	92 B
`build/block-library/blocks/comment-content/style.css`	92 B
`build/block-library/blocks/comment-template/style-rtl.css`	187 B
`build/block-library/blocks/comment-template/style.css`	185 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-title/editor-rtl.css`	75 B
`build/block-library/blocks/comments-title/editor.css`	75 B
`build/block-library/blocks/comments/editor-rtl.css`	834 B
`build/block-library/blocks/comments/editor.css`	832 B
`build/block-library/blocks/comments/style-rtl.css`	632 B
`build/block-library/blocks/comments/style.css`	630 B
`build/block-library/blocks/cover/editor-rtl.css`	605 B
`build/block-library/blocks/cover/editor.css`	607 B
`build/block-library/blocks/cover/style-rtl.css`	1.57 kB
`build/block-library/blocks/cover/style.css`	1.55 kB
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	410 B
`build/block-library/blocks/embed/style.css`	410 B
`build/block-library/blocks/embed/theme-rtl.css`	126 B
`build/block-library/blocks/embed/theme.css`	126 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	253 B
`build/block-library/blocks/file/style.css`	254 B
`build/block-library/blocks/file/view.min.js`	346 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`	948 B
`build/block-library/blocks/gallery/editor.css`	950 B
`build/block-library/blocks/gallery/style-rtl.css`	1.53 kB
`build/block-library/blocks/gallery/style.css`	1.53 kB
`build/block-library/blocks/gallery/theme-rtl.css`	108 B
`build/block-library/blocks/gallery/theme.css`	108 B
`build/block-library/blocks/group/editor-rtl.css`	337 B
`build/block-library/blocks/group/editor.css`	337 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`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/html/editor-rtl.css`	327 B
`build/block-library/blocks/html/editor.css`	329 B
`build/block-library/blocks/image/editor-rtl.css`	876 B
`build/block-library/blocks/image/editor.css`	873 B
`build/block-library/blocks/image/style-rtl.css`	627 B
`build/block-library/blocks/image/style.css`	630 B
`build/block-library/blocks/image/theme-rtl.css`	126 B
`build/block-library/blocks/image/theme.css`	126 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	213 B
`build/block-library/blocks/latest-posts/editor.css`	212 B
`build/block-library/blocks/latest-posts/style-rtl.css`	463 B
`build/block-library/blocks/latest-posts/style.css`	462 B
`build/block-library/blocks/list/style-rtl.css`	88 B
`build/block-library/blocks/list/style.css`	88 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	507 B
`build/block-library/blocks/media-text/style.css`	505 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	705 B
`build/block-library/blocks/navigation-link/editor.css`	703 B
`build/block-library/blocks/navigation-link/style-rtl.css`	115 B
`build/block-library/blocks/navigation-link/style.css`	115 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	296 B
`build/block-library/blocks/navigation-submenu/editor.css`	295 B
`build/block-library/blocks/navigation-submenu/view.min.js`	423 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.99 kB
`build/block-library/blocks/navigation/editor.css`	2 kB
`build/block-library/blocks/navigation/style-rtl.css`	2.15 kB
`build/block-library/blocks/navigation/style.css`	2.14 kB
`build/block-library/blocks/navigation/view-modal.min.js`	2.78 kB
`build/block-library/blocks/navigation/view.min.js`	443 B
`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`	363 B
`build/block-library/blocks/page-list/editor.css`	363 B
`build/block-library/blocks/page-list/style-rtl.css`	175 B
`build/block-library/blocks/page-list/style.css`	175 B
`build/block-library/blocks/paragraph/editor-rtl.css`	174 B
`build/block-library/blocks/paragraph/editor.css`	174 B
`build/block-library/blocks/paragraph/style-rtl.css`	260 B
`build/block-library/blocks/paragraph/style.css`	260 B
`build/block-library/blocks/post-author/style-rtl.css`	175 B
`build/block-library/blocks/post-author/style.css`	176 B
`build/block-library/blocks/post-comments-form/editor-rtl.css`	96 B
`build/block-library/blocks/post-comments-form/editor.css`	96 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	493 B
`build/block-library/blocks/post-comments-form/style.css`	493 B
`build/block-library/blocks/post-date/style-rtl.css`	61 B
`build/block-library/blocks/post-date/style.css`	61 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`	507 B
`build/block-library/blocks/post-featured-image/editor.css`	505 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	166 B
`build/block-library/blocks/post-featured-image/style.css`	166 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	282 B
`build/block-library/blocks/post-template/style.css`	282 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	100 B
`build/block-library/blocks/post-title/style.css`	100 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`	135 B
`build/block-library/blocks/pullquote/editor.css`	135 B
`build/block-library/blocks/pullquote/style-rtl.css`	326 B
`build/block-library/blocks/pullquote/style.css`	325 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 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`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	282 B
`build/block-library/blocks/query-pagination/style.css`	278 B
`build/block-library/blocks/query-title/style-rtl.css`	63 B
`build/block-library/blocks/query-title/style.css`	63 B
`build/block-library/blocks/query/editor-rtl.css`	439 B
`build/block-library/blocks/query/editor.css`	439 B
`build/block-library/blocks/quote/style-rtl.css`	213 B
`build/block-library/blocks/quote/style.css`	213 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	396 B
`build/block-library/blocks/search/style.css`	393 B
`build/block-library/blocks/search/theme-rtl.css`	114 B
`build/block-library/blocks/search/theme.css`	114 B
`build/block-library/blocks/separator/editor-rtl.css`	146 B
`build/block-library/blocks/separator/editor.css`	146 B
`build/block-library/blocks/separator/style-rtl.css`	233 B
`build/block-library/blocks/separator/style.css`	233 B
`build/block-library/blocks/separator/theme-rtl.css`	194 B
`build/block-library/blocks/separator/theme.css`	194 B
`build/block-library/blocks/shortcode/editor-rtl.css`	464 B
`build/block-library/blocks/shortcode/editor.css`	464 B
`build/block-library/blocks/site-logo/editor-rtl.css`	488 B
`build/block-library/blocks/site-logo/editor.css`	488 B
`build/block-library/blocks/site-logo/style-rtl.css`	203 B
`build/block-library/blocks/site-logo/style.css`	203 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	184 B
`build/block-library/blocks/social-link/editor.css`	184 B
`build/block-library/blocks/social-links/editor-rtl.css`	674 B
`build/block-library/blocks/social-links/editor.css`	673 B
`build/block-library/blocks/social-links/style-rtl.css`	1.4 kB
`build/block-library/blocks/social-links/style.css`	1.39 kB
`build/block-library/blocks/spacer/editor-rtl.css`	322 B
`build/block-library/blocks/spacer/editor.css`	322 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`	494 B
`build/block-library/blocks/table/editor.css`	494 B
`build/block-library/blocks/table/style-rtl.css`	611 B
`build/block-library/blocks/table/style.css`	609 B
`build/block-library/blocks/table/theme-rtl.css`	190 B
`build/block-library/blocks/table/theme.css`	190 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	239 B
`build/block-library/blocks/tag-cloud/style.css`	239 B
`build/block-library/blocks/template-part/editor-rtl.css`	235 B
`build/block-library/blocks/template-part/editor.css`	235 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/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`	561 B
`build/block-library/blocks/video/editor.css`	563 B
`build/block-library/blocks/video/style-rtl.css`	174 B
`build/block-library/blocks/video/style.css`	174 B
`build/block-library/blocks/video/theme-rtl.css`	126 B
`build/block-library/blocks/video/theme.css`	126 B
`build/block-library/common-rtl.css`	1.02 kB
`build/block-library/common.css`	1.02 kB
`build/block-library/editor-elements-rtl.css`	75 B
`build/block-library/editor-elements.css`	75 B
`build/block-library/editor-rtl.css`	11 kB
`build/block-library/editor.css`	11 kB
`build/block-library/elements-rtl.css`	54 B
`build/block-library/elements.css`	54 B
`build/block-library/index.min.js`	188 kB
`build/block-library/reset-rtl.css`	478 B
`build/block-library/reset.css`	478 B
`build/block-library/style-rtl.css`	12 kB
`build/block-library/style.css`	12 kB
`build/block-library/theme-rtl.css`	719 B
`build/block-library/theme.css`	722 B
`build/block-serialization-default-parser/index.min.js`	1.1 kB
`build/block-serialization-spec-parser/index.min.js`	2.83 kB
`build/blocks/index.min.js`	49.6 kB
`build/components/index.min.js`	198 kB
`build/components/style-rtl.css`	11.5 kB
`build/components/style.css`	11.5 kB
`build/compose/index.min.js`	12 kB
`build/core-data/index.min.js`	15.5 kB
`build/customize-widgets/index.min.js`	11.3 kB
`build/customize-widgets/style-rtl.css`	1.38 kB
`build/customize-widgets/style.css`	1.38 kB
`build/data-controls/index.min.js`	653 B
`build/data/index.min.js`	8.06 kB
`build/date/index.min.js`	32.1 kB
`build/deprecated/index.min.js`	507 B
`build/dom-ready/index.min.js`	324 B
`build/dom/index.min.js`	4.7 kB
`build/edit-navigation/index.min.js`	16 kB
`build/edit-navigation/style-rtl.css`	3.99 kB
`build/edit-navigation/style.css`	4 kB
`build/edit-post/classic-rtl.css`	546 B
`build/edit-post/classic.css`	547 B
`build/edit-post/index.min.js`	30.7 kB
`build/edit-post/style-rtl.css`	6.94 kB
`build/edit-post/style.css`	6.94 kB
`build/edit-widgets/index.min.js`	16.5 kB
`build/edit-widgets/style-rtl.css`	4.34 kB
`build/edit-widgets/style.css`	4.34 kB
`build/editor/index.min.js`	41.6 kB
`build/editor/style-rtl.css`	3.66 kB
`build/editor/style.css`	3.65 kB
`build/element/index.min.js`	4.68 kB
`build/escape-html/index.min.js`	537 B
`build/format-library/index.min.js`	6.75 kB
`build/format-library/style-rtl.css`	571 B
`build/format-library/style.css`	571 B
`build/hooks/index.min.js`	1.64 kB
`build/html-entities/index.min.js`	448 B
`build/i18n/index.min.js`	3.77 kB
`build/is-shallow-equal/index.min.js`	527 B
`build/keyboard-shortcuts/index.min.js`	1.78 kB
`build/keycodes/index.min.js`	1.81 kB
`build/list-reusable-blocks/index.min.js`	1.74 kB
`build/list-reusable-blocks/style-rtl.css`	835 B
`build/list-reusable-blocks/style.css`	835 B
`build/media-utils/index.min.js`	2.93 kB
`build/notices/index.min.js`	953 B
`build/nux/index.min.js`	2.05 kB
`build/nux/style-rtl.css`	732 B
`build/nux/style.css`	728 B
`build/plugins/index.min.js`	1.94 kB
`build/preferences-persistence/index.min.js`	2.22 kB
`build/preferences/index.min.js`	1.3 kB
`build/primitives/index.min.js`	933 B
`build/priority-queue/index.min.js`	612 B
`build/react-i18n/index.min.js`	696 B
`build/react-refresh-entry/index.min.js`	8.44 kB
`build/react-refresh-runtime/index.min.js`	7.31 kB
`build/redux-routine/index.min.js`	2.74 kB
`build/reusable-blocks/index.min.js`	2.21 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.4 kB
`build/server-side-render/index.min.js`	1.61 kB
`build/shortcode/index.min.js`	1.53 kB
`build/token-list/index.min.js`	644 B
`build/url/index.min.js`	3.61 kB
`build/vendors/react-dom.min.js`	38.5 kB
`build/vendors/react.min.js`	4.34 kB
`build/viewport/index.min.js`	1.09 kB
`build/warning/index.min.js`	268 B
`build/widgets/index.min.js`	7.19 kB
`build/widgets/style-rtl.css`	1.18 kB
`build/widgets/style.css`	1.19 kB
`build/wordcount/index.min.js`	1.06 kB

_{compressed-size-action}

fabiankaegy · 2022-07-27T10:29:00Z

This is already looking ✄1�7 fabulous ✄1�7 Thank you for working on it :)

As far as your open questions go here are my thoughts:

Do we want to display the Global Styles sidebar if a theme doesn't have a theme.json file?

I'm not even sure whether we want to enable the Global Styles Sidebar at all, even for themes that have theme.json files. For me, editing template parts that are coming from the theme has nothing to do with editing global style options. The global styles editor is currently not available for hybrid themes and I don't think that this PR should change that. But of course open for discussion here :)

Should we enable alignments at the root level? These are #30079 for Site Editor, so root level blocks cannot be aligned when editing template parts.

I'm torn on this one. I think that the alignment of the outermost element most likely should be determined by the theme that creates the template part and therefore that we shouldn't have the alignment options on the top level items.

Do we want to allow users to add new template parts via UI?

I think we also discussed this in the actual issue for this feature and came to the conclusion that users should not be able to create new template parts in the editor since these templates would not get rendered anywhere. Which would be a more confusing experience. See #37943 (comment)

Mamaduka · 2022-07-27T10:45:53Z

I also want to mention this issue, which also touches on the problem of missing alignments in template parts focus mode - #34010. Cc. @richtabor.

carolinan · 2022-07-27T11:22:45Z

I agree with the above, I don't think that the global styles or adding new template parts should be enabled: Or not until there has been more discussions and exploring around it.

carlomanf · 2022-07-28T03:25:50Z

It can be enabled for Classic themes using new add_theme_support( 'block-template-parts' ) theme feature

This part concerns me because the classification of themes is already complicated enough before introducing yet another subcategory. If a theme has a parts subfolder with valid files inside, then it communicates that it supports this feature and shouldn't need to add a line in functions.php as well.

The use of a theme support like this also raises some questions about borderline cases:

What if a theme already includes block template parts but doesn't add the theme support?
What if a theme adds the theme support but doesn't include any block template parts?
Would it be possible to support 'block-templates' (existing theme support) but not 'block-template-parts'?

Do we want to allow users to add new template parts via UI?

I think we also discussed this in the actual issue for this feature and came to the conclusion that users should not be able to create new template parts in the editor since these templates would not get rendered anywhere. Which would be a more confusing experience. See #37943 (comment)

I agree with the above, I don't think that the global styles or adding new template parts should be enabled: Or not until there has been more discussions and exploring around it.

While the reasoning here makes sense, it creates a notable disparity between the behaviour of the existing 'block-templates' and the proposed 'block-template-parts' theme supports. 'block-templates' is intended for when the theme actually provides no block templates of its own but is allowing users to create new ones. 'block-template-parts' is being proposed in the opposite way, for when the theme is providing its own block template parts but is not allowing users to create new ones. That could be equally confusing for theme authors.

fabiankaegy · 2022-07-28T05:13:16Z

@carlomanf thanks for your detailed notes :) I can see that disparity. However, I think the main difference to consider here, is that templates have the template picker which also is the main entry point for users to create new templates. So you always know where the template you are creating is going to be used. This is not the case for these template parts as themes manually render these parts within their traditional templates.

carlomanf · 2022-07-28T05:40:48Z

@fabiankaegy I'm not saying the behaviour should be re-aligned with block templates. The reasoning you put forward makes sense, as I noted. I'm saying that it would be very easy for theme authors to get confused and wrongly think that the two theme supports work in the same way, when they don't and can't.

Mamaduka · 2022-07-28T05:47:14Z

Thanks for the feedback, @carlomanf. The theme support name or the method of how we enable the feature isn't final, and I'm open to suggestions here.

I decided to go with the support flag because scanning directories for template parts can sometimes yield false results.

fabiankaegy · 2022-07-28T05:57:07Z

@fabiankaegy I'm not saying the behaviour should be re-aligned with block templates. The reasoning you put forward makes sense, as I noted. I'm saying that it would be very easy for theme authors to get confused and wrongly think that the two theme supports work in the same way, when they don't and can't.

Thanks for that context. I miss read the original note :)

carlomanf · 2022-07-28T05:58:34Z

@Mamaduka There were a few different suggestions already back in #37943. One suggestion was to check for the presence of the templateParts key in theme.json, which might be promising.

lib/compat/wordpress-6.1/template-parts-screen.php

fabiankaegy · 2022-07-28T06:55:07Z

I've been doing some more testing here:

I think we should remove the option to allow editors to create a new template part inline via the blocks context menu:

As noted before I think both the "Navigation" and the "Global Styles" panels should not be available in the template part editor

Additionally, one thing that I think would be a really valuable feature that might be out of scope for this here is allowing template parts to be template locked. What I mean by that is allowing a theme to create a template part that has for example a group block at the root of it that is set to align full. Editors should not be able to remove the group block (can already be done with the {"lock":{"remove": true}} option.) But editors should also not be able to add any other blocks to the root of the template part. Everything should be contained within the container.

fabiankaegy · 2022-07-28T07:11:27Z

Also just noting that the title meta tag is currently showing as Editor (beta) not sure whether we want to update that to Template Part Editor

Mamaduka · 2022-07-28T10:27:21Z

Pushed the following changes:

Global Styles are now disabled.
The "Add Template Part" button isn't rendered on the template parts list page.
The "Make template part" action is also disabled for blocks.

@carlomanf, I'm unsure if we want to make the theme.json requirement to enable this feature. The Classic themes have been using theme support for years to opt-in functionality.

@fabiankaegy, it might be better to handle locking enhancements separately. Maybe something like we did for Group and Columns blocks #26128.

scruffian · 2022-09-07T15:23:48Z

I rebased this so I could test it again.

scruffian

LGTM

jasmussen · 2022-09-07T16:03:53Z

It's an important feature, and it doesn't preclude future enhancements.

jasmussen · 2022-09-07T16:10:48Z

Let's follow up with some documentation on how this is to be used.

Mamaduka · 2022-09-08T11:24:51Z

Thanks, everyone, for testing and reviewing. Let's merge this and work on follow-ups.

fabiankaegy · 2022-09-08T15:29:27Z

Dev Note Draft:

Allow usage of block based "template parts" in traditional themes

Starting in WordPress 6.1 even traditional WordPress themes can adopt the usage of block based template parts in their themes. In order to enable this feature a theme needs to specify the block-template-parts theme support. With that theme support added a theme can now add block based template parts by placing html files containing the block template into the parts directory inside the root of the theme.

function add_block_template_part_support() {
    add_theme_support( 'block-template-parts' );
}

add_action( 'after_theme_setup', 'add_block_template_part_support' );

These block based template parts can now be used in the traditional PHP templates by using the block_template_part function. This function returns the markup of the template part which then needs to get output.

Example:

If a theme wants to make the site footer editable using blocks, the theme author can create a new file called footer.html inside the my-theme/parts/ directory. This file should contain the default footer block markup.

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
	<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
	<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
		<!-- wp:paragraph {"align":"center"} -->
		<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
		<!-- /wp:paragraph -->
	</div>
	<!-- /wp:group -->
</div>
<!-- /wp:group -->

In order to actually use this template part the theme author then needs to call the block_template_part function and pass the name of the template part as the first and only parameter.

<?php block_template_part( 'footer' ); ?>

There are also two special helper functions in WordPress. One to retrieve the header and one to retrieve the footer template parts directly without needing to pass the name manually. block_header_area and block_footer_area.

Notes: In contrast to the template part editor that is included in the Site Editor for block based themes, editors cannot create new template parts, not delete existing ones. This is because there is no way to actually use a newly created template part without changing the code of the theme itself.

@Mamaduka would love to get your feedback on this draft :)

Ideally I would love to use an example of something that isn't the site footer or the site header because I think it makes it slightly confusing with the special helper functions that are available. But even with a different example I think the overall structure could stay the same.

Note: We moved to editing of the DEV Note to a google doc that can be found here: https://docs.google.com/document/d/12u_TMKdsRDzdgrqXN2eg3gImaMP3vFMQH4ALUA-1F3A/

ALJ · 2022-09-09T11:05:39Z

@fabiankaegy thank you for proposing and advocating for this feature over the last few months!

Ideally I would love to use an example of something that isn't the site footer or the site header because I think it makes it slightly confusing with the special helper functions that are available.

If you're looking for more ideas: I will make use of the feature for complex navigation menus and other site-wide modals necessitating specific editor-designed layouts.

mtias · 2022-09-10T10:36:05Z

@Mamaduka thanks for the perseverance, this is going to be a key part of the puzzle.

bph · 2022-09-13T19:03:14Z

@fabiankaegy @Mamaduka Thanks so much for the Dev Note Draft link. When you are finished drafting, please add it as Draft to the Make core blog (see #42961)

AdelDima · 2022-09-14T08:16:09Z

This is great news, I'll test it and implement this on our classic theme for sure.

Allows Classic / Hybrid themes to use block-based template parts without using complete block-based templates. * Exposes the Site Editor's template parts UI * Adds Appearance > "Template Parts" menu * Enabled within the theme via adding a theme support for `'block-template-parts'` {{{#!php add_theme_support( 'block-template-parts' ); }}} This is a backport from Gutenberg.[WordPress/gutenberg#42729 See WordPress/gutenberg PR 42729]. Follow-up to [52330], [52069], [52178]. Props mamaduka, fabiankaegy, poena, scruffian, manfcarlo, bernhard-reiter, hellofromTonya. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54176 602fd350-edb4-49c9-b593-d223f7449a82

Allows Classic / Hybrid themes to use block-based template parts without using complete block-based templates. * Exposes the Site Editor's template parts UI * Adds Appearance > "Template Parts" menu * Enabled within the theme via adding a theme support for `'block-template-parts'` {{{#!php add_theme_support( 'block-template-parts' ); }}} This is a backport from Gutenberg.[WordPress/gutenberg#42729 See WordPress/gutenberg PR 42729]. Follow-up to [52330], [52069], [52178]. Props mamaduka, fabiankaegy, poena, scruffian, manfcarlo, bernhard-reiter, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54176 git-svn-id: http://core.svn.wordpress.org/trunk@53735 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Allows Classic / Hybrid themes to use block-based template parts without using complete block-based templates. * Exposes the Site Editor's template parts UI * Adds Appearance > "Template Parts" menu * Enabled within the theme via adding a theme support for `'block-template-parts'` {{{#!php add_theme_support( 'block-template-parts' ); }}} This is a backport from Gutenberg.[WordPress/gutenberg#42729 See WordPress/gutenberg PR 42729]. Follow-up to [52330], [52069], [52178]. Props mamaduka, fabiankaegy, poena, scruffian, manfcarlo, bernhard-reiter, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54176 git-svn-id: https://core.svn.wordpress.org/trunk@53735 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Allows Classic / Hybrid themes to use block-based template parts without using complete block-based templates. * Exposes the Site Editor's template parts UI * Adds Appearance > "Template Parts" menu * Enabled within the theme via adding a theme support for `'block-template-parts'` {{{#!php add_theme_support( 'block-template-parts' ); }}} This is a backport from Gutenberg.[WordPress/gutenberg#42729 See WordPress/gutenberg PR 42729]. Follow-up to [52330], [52069], [52178]. Props mamaduka, fabiankaegy, poena, scruffian, manfcarlo, bernhard-reiter, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54176

jasmussen · 2022-09-28T07:32:03Z

@Mamaduka Nice work on this one. In testing this today, I noticed the Navigation button is present in this mode:

Is this intentional or not? I don't see it as a big problem, it just shows "no navigation menus", but let me know if this needs a ticket or not.

Mamaduka requested a review from spacedmonkey as a code owner Jul 27, 2022

Mamaduka self-assigned this Jul 27, 2022

Mamaduka added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Feature] Site Editor [Focus] Blocks Adoption For issues that directly impact the ability to adopt features of Gutenberg. labels Jul 27, 2022

Mamaduka requested review from mtias, jameskoster, kevin940726, talldan and critterverse and removed request for spacedmonkey Jul 27, 2022

Mamaduka mentioned this pull request Jul 27, 2022

Allow usage of block based "template parts" without using block based "templates" #37943

Closed

Mamaduka commented Jul 27, 2022

View changes

fabiankaegy linked an issue Jul 27, 2022 that may be closed by this pull request

Allow usage of block based "template parts" without using block based "templates" #37943

Closed

This comment was marked as outdated.

Sign in to view

fabiankaegy reviewed Jul 28, 2022

View changes

lib/compat/wordpress-6.1/template-parts-screen.php Show resolved Hide resolved

fabiankaegy mentioned this pull request Jul 28, 2022

Add a mechanism for themes to prevent insertion of new blocks at root of block template part #42775

Open

pinking shears

666207d

scruffian force-pushed the try/classic-themes-block-based-parts branch from ac05cc9 to 666207d Compare Sep 7, 2022

scruffian approved these changes Sep 7, 2022

View changes

Mamaduka merged commit d19258c into trunk Sep 8, 2022
23 checks passed

Mamaduka deleted the try/classic-themes-block-based-parts branch Sep 8, 2022

github-actions bot added this to the Gutenberg 14.1 milestone Sep 8, 2022

fabiankaegy added Needs Dev Needs Dev Note and removed Needs Dev labels Sep 8, 2022

fabiankaegy mentioned this pull request Sep 9, 2022

Add documentation for the block template parts theme support #44009

Merged

This was referenced Sep 13, 2022

Feature: Block-based template parts for Classic themes WordPress/wordpress-develop#3234

Closed

Plugin: Backport PHP changes for WordPress 6.1 release #43440

Open

bph mentioned this pull request Sep 13, 2022

6.1 Dev Notes Tracking #42961

Open

61 tasks

justintadlock mentioned this pull request Sep 14, 2022

Docs for block-based template parts in classic themes WordPress/Documentation-Issue-Tracker#446

Closed

femkreations added the [Type] User Documentation Documentation for users label Sep 20, 2022

ALJ mentioned this pull request Sep 26, 2022

Unable to get core-editor data in Site Editor for Templates or Template Parts #44477

Open

Block-based template parts for Classic themes #42729

Block-based template parts for Classic themes #42729

Mamaduka commented Jul 27, 2022 •

edited

Mamaduka Jul 27, 2022

github-actions bot commented Jul 27, 2022 •

edited

fabiankaegy commented Jul 27, 2022

Mamaduka commented Jul 27, 2022

carolinan commented Jul 27, 2022

This comment was marked as outdated.

carlomanf commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

carlomanf commented Jul 28, 2022

Mamaduka commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

carlomanf commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

Mamaduka commented Jul 28, 2022

scruffian commented Sep 7, 2022

scruffian left a comment

jasmussen commented Sep 7, 2022

jasmussen commented Sep 7, 2022

Mamaduka commented Sep 8, 2022

fabiankaegy commented Sep 8, 2022 •

edited

ALJ commented Sep 9, 2022

mtias commented Sep 10, 2022

bph commented Sep 13, 2022 •

edited

AdelDima commented Sep 14, 2022

jasmussen commented Sep 28, 2022

		isNavigationOpen: isNavigationOpened(),
		isTemplatePartsMode: supportsTemplatePartsMode,

Block-based template parts for Classic themes #42729

Block-based template parts for Classic themes #42729

Conversation

Mamaduka commented Jul 27, 2022 • edited

What?

Why?

How?

Open Questions

Testing Instructions

Screenshots or screencast

Mamaduka Jul 27, 2022

Choose a reason for hiding this comment

github-actions bot commented Jul 27, 2022 • edited

fabiankaegy commented Jul 27, 2022

Mamaduka commented Jul 27, 2022

carolinan commented Jul 27, 2022

This comment was marked as outdated.

carlomanf commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

carlomanf commented Jul 28, 2022

Mamaduka commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

carlomanf commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

fabiankaegy commented Jul 28, 2022

Mamaduka commented Jul 28, 2022

scruffian commented Sep 7, 2022

scruffian left a comment

jasmussen commented Sep 7, 2022

jasmussen commented Sep 7, 2022

Mamaduka commented Sep 8, 2022

fabiankaegy commented Sep 8, 2022 • edited

Dev Note Draft:

Allow usage of block based "template parts" in traditional themes

Example:

ALJ commented Sep 9, 2022

mtias commented Sep 10, 2022

bph commented Sep 13, 2022 • edited

AdelDima commented Sep 14, 2022

jasmussen commented Sep 28, 2022

Mamaduka commented Jul 27, 2022 •

edited

github-actions bot commented Jul 27, 2022 •

edited

fabiankaegy commented Sep 8, 2022 •

edited

bph commented Sep 13, 2022 •

edited