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

Template Parts: Fix loading issue #28088

Merged
merged 14 commits into from
Jan 14, 2021
Merged

Template Parts: Fix loading issue #28088

merged 14 commits into from
Jan 14, 2021

Conversation

jeyip
Copy link
Contributor

@jeyip jeyip commented Jan 11, 2021

Description

We currently query for template parts by theme in the client.

// packages/block-library/src/template-part/edit/index.js:43
select( 'core' ).getEntityRecord(
    'postType',
    'wp_template_part',
    theme + '//' + slug
)

The canonical identifier for themes is the stylesheet property, which is the path of the theme directory relative to wp-content/themes. Unfortunately, the value of theme provided in the client side query above is, under some circumstances, not actually the theme stylesheet. In other words, sometimes it isn't the correct identifier.

The mismatch happens because the theme value in our query is derived from block attributes in template blocks, which are defined by themes. Take, for example, the TT1 404 template in the TT1 blocks theme. A serialized template part in the template looks like this:

<!-- wp:template-part {"slug":"header","theme":"tt1-blocks","align":"full", "tagName":"header","className":"site-header"} /-->

The header template part in the 404 template has a "tt1-blocks" theme attribute. This theme attribute is what is eventually included in our client side query -- normally no big deal. If the WordPress theme exists in the root of the themes directory like so wp-content/themes/tt1-blocks, then the theme stylesheet is "tt1-blocks", and it will match the theme attribute in the client side query.

If, however, the theme exists in a subdirectory, like wp-content/themes/subdirectory/tt1-blocks, the stylesheet then becomes "subdirectory/tt1-blocks". This no longer matches the theme attribute provided in the 404 template, and, as a result, the query is no longer correct.

Note:

This PR will require follow-up work (which has not been implemented yet) to properly address the template parts not loading issue. We're going to have to remove all theme attributes from theme provided template blocks. Going back to the TT1 404 template as an example, when the follow-up PRs are completed, serialized template parts will look like this:

// Before
<!-- wp:template-part {"slug":"header","theme":"tt1-blocks","align":"full", "tagName":"header","className":"site-header"} /-->

// After
<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->

When loading theme provided template parts, the changes in this PR will then insert the correct theme stylesheet for the serialized theme attribute. This will allow template parts to load correctly again.

See this comment for more context.

How has this been tested?

Before applying this PR:

  • Open the front end and the site editor. It should load all the template parts.
  • Ensure that the theme-experiments repo is downloaded locally
  • Install the TT1-blocks theme in a subdirectory of wp-content/themes.
    1. Add the following to .wp-env.override.json. This creates a copy of the locally installed TT1 theme in an "test" subdirectory in the WordPress volume.
    2. // .wp-env.override.json
      // Replace ~/work/theme-experiments/tt1-blocks with the path
      // to your locally installed TT1 block theme
      {
           "mappings": {
               "wp-content/themes/test/tt1-blocks": "~/work/theme-experiments/tt1-blocks",
           }
      }```
    3. npx wp-env start
  • Activate TT1-blocks.
  • Open the front end and the site editor: it should not be loading the header and footer template parts.

Apply this PR:

  • Navigate to your locally installed copy of the TT1 blocks theme.
  • Modify the source code of block templates and remove theme attributes from all wp_template_parts
    • Take tt1-blocks/block-templates/front-page.html for example
    • Before removal: <!-- wp:template-part {"slug":"header","theme":"tt1-blocks","align":"full", "tagName":"header","className":"site-header"} /-->
    • After removal: <!-- wp:template-part {"slug":"header", "align":"full", "tagName":"header","className":"site-header"} /-->
  • npx wp-env start --update
  • Open the front end and the site editor: it should load all the template parts.

Screenshots

Types of changes

Bug Fix for Automattic/wp-calypso#48145

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • 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.

@github-actions
Copy link

github-actions bot commented Jan 11, 2021

Size Change: -5 B (0%)

Total Size: 1.28 MB

Filename Size Change
build/annotations/index.js 3.8 kB -3 B (0%)
build/block-editor/index.js 121 kB +301 B (0%)
build/block-editor/style-rtl.css 11.5 kB -163 B (-1%)
build/block-editor/style.css 11.5 kB -165 B (-1%)
build/block-library/blocks/cover/editor-rtl.css 524 B +16 B (+3%)
build/block-library/blocks/cover/editor.css 522 B +16 B (+3%)
build/block-library/blocks/cover/style-rtl.css 1.3 kB -22 B (-2%)
build/block-library/blocks/cover/style.css 1.3 kB -21 B (-2%)
build/block-library/blocks/navigation/style-rtl.css 289 B +15 B (+5%) 🔍
build/block-library/blocks/navigation/style.css 289 B +15 B (+5%) 🔍
build/block-library/blocks/paragraph/style-rtl.css 390 B +39 B (+11%) ⚠️
build/block-library/blocks/paragraph/style.css 391 B +39 B (+11%) ⚠️
build/block-library/blocks/spacer/editor-rtl.css 416 B +25 B (+6%) 🔍
build/block-library/blocks/spacer/editor.css 416 B +25 B (+6%) 🔍
build/block-library/editor-rtl.css 8.96 kB +26 B (0%)
build/block-library/editor.css 8.96 kB +24 B (0%)
build/block-library/index.js 142 kB +260 B (0%)
build/block-library/style-rtl.css 8.52 kB +1 B (0%)
build/block-library/style.css 8.53 kB +5 B (0%)
build/components/index.js 173 kB +75 B (0%)
build/core-data/index.js 15.2 kB +23 B (0%)
build/edit-post/style-rtl.css 6.56 kB -81 B (-1%)
build/edit-post/style.css 6.55 kB -78 B (-1%)
build/edit-site/index.js 24.2 kB +190 B (+1%)
build/edit-site/style-rtl.css 4 kB -43 B (-1%)
build/edit-site/style.css 4 kB -40 B (-1%)
build/edit-widgets/style-rtl.css 3.16 kB -58 B (-2%)
build/edit-widgets/style.css 3.16 kB -57 B (-2%)
build/editor/index.js 41.9 kB -388 B (-1%)
build/i18n/index.js 3.57 kB -1 B (0%)
build/rich-text/index.js 13.5 kB +20 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 9.03 kB 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 196 B 0 B
build/block-library/blocks/archives/editor.css 196 B 0 B
build/block-library/blocks/audio/editor-rtl.css 194 B 0 B
build/block-library/blocks/audio/editor.css 194 B 0 B
build/block-library/blocks/audio/style-rtl.css 225 B 0 B
build/block-library/blocks/audio/style.css 225 B 0 B
build/block-library/blocks/block/editor-rtl.css 283 B 0 B
build/block-library/blocks/block/editor.css 283 B 0 B
build/block-library/blocks/button/editor-rtl.css 576 B 0 B
build/block-library/blocks/button/editor.css 577 B 0 B
build/block-library/blocks/button/style-rtl.css 552 B 0 B
build/block-library/blocks/button/style.css 552 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 345 B 0 B
build/block-library/blocks/buttons/editor.css 346 B 0 B
build/block-library/blocks/buttons/style-rtl.css 419 B 0 B
build/block-library/blocks/buttons/style.css 419 B 0 B
build/block-library/blocks/calendar/style-rtl.css 319 B 0 B
build/block-library/blocks/calendar/style.css 319 B 0 B
build/block-library/blocks/categories/editor-rtl.css 210 B 0 B
build/block-library/blocks/categories/editor.css 209 B 0 B
build/block-library/blocks/categories/style-rtl.css 208 B 0 B
build/block-library/blocks/categories/style.css 208 B 0 B
build/block-library/blocks/code/style-rtl.css 216 B 0 B
build/block-library/blocks/code/style.css 216 B 0 B
build/block-library/blocks/columns/editor-rtl.css 300 B 0 B
build/block-library/blocks/columns/editor.css 299 B 0 B
build/block-library/blocks/columns/style-rtl.css 529 B 0 B
build/block-library/blocks/columns/style.css 528 B 0 B
build/block-library/blocks/embed/editor-rtl.css 594 B 0 B
build/block-library/blocks/embed/editor.css 595 B 0 B
build/block-library/blocks/embed/style-rtl.css 489 B 0 B
build/block-library/blocks/embed/style.css 489 B 0 B
build/block-library/blocks/file/editor-rtl.css 314 B 0 B
build/block-library/blocks/file/editor.css 313 B 0 B
build/block-library/blocks/file/style-rtl.css 352 B 0 B
build/block-library/blocks/file/style.css 352 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.55 kB 0 B
build/block-library/blocks/freeform/editor.css 2.55 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 749 B 0 B
build/block-library/blocks/gallery/editor.css 750 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.17 kB 0 B
build/block-library/blocks/gallery/style.css 1.17 kB 0 B
build/block-library/blocks/group/editor-rtl.css 433 B 0 B
build/block-library/blocks/group/editor.css 432 B 0 B
build/block-library/blocks/group/style-rtl.css 190 B 0 B
build/block-library/blocks/group/style.css 190 B 0 B
build/block-library/blocks/heading/editor-rtl.css 248 B 0 B
build/block-library/blocks/heading/editor.css 248 B 0 B
build/block-library/blocks/heading/style-rtl.css 212 B 0 B
build/block-library/blocks/heading/style.css 212 B 0 B
build/block-library/blocks/html/editor-rtl.css 384 B 0 B
build/block-library/blocks/html/editor.css 385 B 0 B
build/block-library/blocks/image/editor-rtl.css 801 B 0 B
build/block-library/blocks/image/editor.css 800 B 0 B
build/block-library/blocks/image/style-rtl.css 569 B 0 B
build/block-library/blocks/image/style.css 570 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 277 B 0 B
build/block-library/blocks/latest-comments/editor.css 275 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 382 B 0 B
build/block-library/blocks/latest-comments/style.css 382 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 254 B 0 B
build/block-library/blocks/latest-posts/editor.css 254 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 634 B 0 B
build/block-library/blocks/latest-posts/style.css 634 B 0 B
build/block-library/blocks/list/editor-rtl.css 203 B 0 B
build/block-library/blocks/list/editor.css 203 B 0 B
build/block-library/blocks/list/style-rtl.css 201 B 0 B
build/block-library/blocks/list/style.css 201 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 311 B 0 B
build/block-library/blocks/media-text/editor.css 311 B 0 B
build/block-library/blocks/media-text/style-rtl.css 642 B 0 B
build/block-library/blocks/media-text/style.css 640 B 0 B
build/block-library/blocks/more/editor-rtl.css 545 B 0 B
build/block-library/blocks/more/editor.css 545 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 503 B 0 B
build/block-library/blocks/navigation-link/editor.css 504 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 805 B 0 B
build/block-library/blocks/navigation-link/style.css 803 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.38 kB 0 B
build/block-library/blocks/navigation/editor.css 1.38 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 507 B 0 B
build/block-library/blocks/nextpage/editor.css 507 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B 0 B
build/block-library/blocks/paragraph/editor.css 236 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 329 B 0 B
build/block-library/blocks/post-author/editor.css 329 B 0 B
build/block-library/blocks/post-author/style-rtl.css 303 B 0 B
build/block-library/blocks/post-author/style.css 303 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 358 B 0 B
build/block-library/blocks/post-comments-form/style.css 358 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 262 B 0 B
build/block-library/blocks/post-content/editor.css 262 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 206 B 0 B
build/block-library/blocks/post-excerpt/editor.css 206 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 453 B 0 B
build/block-library/blocks/post-featured-image/editor.css 453 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 223 B 0 B
build/block-library/blocks/post-featured-image/style.css 223 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 193 B 0 B
build/block-library/blocks/preformatted/style.css 193 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 304 B 0 B
build/block-library/blocks/pullquote/editor.css 304 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 428 B 0 B
build/block-library/blocks/pullquote/style.css 428 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 217 B 0 B
build/block-library/blocks/query-loop/editor.css 216 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 427 B 0 B
build/block-library/blocks/query-loop/style.css 429 B 0 B
build/block-library/blocks/query/editor-rtl.css 279 B 0 B
build/block-library/blocks/query/editor.css 279 B 0 B
build/block-library/blocks/quote/editor-rtl.css 195 B 0 B
build/block-library/blocks/quote/editor.css 195 B 0 B
build/block-library/blocks/quote/style-rtl.css 284 B 0 B
build/block-library/blocks/quote/style.css 285 B 0 B
build/block-library/blocks/rss/editor-rtl.css 307 B 0 B
build/block-library/blocks/rss/editor.css 309 B 0 B
build/block-library/blocks/rss/style-rtl.css 394 B 0 B
build/block-library/blocks/rss/style.css 393 B 0 B
build/block-library/blocks/search/editor-rtl.css 285 B 0 B
build/block-library/blocks/search/editor.css 285 B 0 B
build/block-library/blocks/search/style-rtl.css 454 B 0 B
build/block-library/blocks/search/style.css 456 B 0 B
build/block-library/blocks/separator/editor-rtl.css 229 B 0 B
build/block-library/blocks/separator/editor.css 229 B 0 B
build/block-library/blocks/separator/style-rtl.css 352 B 0 B
build/block-library/blocks/separator/style.css 352 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 603 B 0 B
build/block-library/blocks/shortcode/editor.css 603 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 321 B 0 B
build/block-library/blocks/site-logo/editor.css 321 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 238 B 0 B
build/block-library/blocks/site-logo/style.css 238 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 283 B 0 B
build/block-library/blocks/social-link/editor.css 283 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 811 B 0 B
build/block-library/blocks/social-links/editor.css 810 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB 0 B
build/block-library/blocks/social-links/style.css 1.44 kB 0 B
build/block-library/blocks/spacer/style-rtl.css 184 B 0 B
build/block-library/blocks/spacer/style.css 184 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 223 B 0 B
build/block-library/blocks/subhead/editor.css 223 B 0 B
build/block-library/blocks/subhead/style-rtl.css 210 B 0 B
build/block-library/blocks/subhead/style.css 210 B 0 B
build/block-library/blocks/table/editor-rtl.css 593 B 0 B
build/block-library/blocks/table/editor.css 593 B 0 B
build/block-library/blocks/table/style-rtl.css 501 B 0 B
build/block-library/blocks/table/style.css 501 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 237 B 0 B
build/block-library/blocks/tag-cloud/editor.css 235 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 221 B 0 B
build/block-library/blocks/tag-cloud/style.css 221 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 714 B 0 B
build/block-library/blocks/template-part/editor.css 714 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 220 B 0 B
build/block-library/blocks/text-columns/editor.css 220 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 283 B 0 B
build/block-library/blocks/text-columns/style.css 283 B 0 B
build/block-library/blocks/verse/editor-rtl.css 194 B 0 B
build/block-library/blocks/verse/editor.css 194 B 0 B
build/block-library/blocks/verse/style-rtl.css 215 B 0 B
build/block-library/blocks/verse/style.css 215 B 0 B
build/block-library/blocks/video/editor-rtl.css 617 B 0 B
build/block-library/blocks/video/editor.css 617 B 0 B
build/block-library/blocks/video/style-rtl.css 303 B 0 B
build/block-library/blocks/video/style.css 304 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/theme-rtl.css 860 B 0 B
build/block-library/theme.css 860 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 11.2 kB 0 B
build/data-controls/index.js 829 B 0 B
build/data/index.js 8.97 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 938 B 0 B
build/edit-navigation/style.css 944 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-widgets/index.js 23.6 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.75 kB 0 B
build/format-library/style-rtl.css 620 B 0 B
build/format-library/style.css 621 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.15 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/media-utils/index.js 5.31 kB 0 B
build/notices/index.js 1.86 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 2.91 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 3.01 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@carlomanf
Copy link

Thanks for the proof of concept. As I explained in my previous comment, I believe there are better approaches and would like to see more discussion on potential alternatives. I always get a little bit worried when new patches are introduced before much discussion has taken place, especially when there is no linked issue and no patch description. (Sorry to be negative, but I'm in an opposite time zone to most people here and sometimes a lot can happen while I'm asleep.)

@youknowriad
Copy link
Contributor

@carlomanf Thanks for chiming in. I believe removing the "theme" attribute might be an option in the future but I don't see it as a realistic approach for the moment because:

  • We do want to keep edits made to a theme if a user switches and come back
  • We do not want to mix templates and templates parts across themes. If I edit "single" in themeA and switch to themeB. I shouldn't be using themeA's edited single theme.

I think the current approach in the PR is the best alternative we've tried/discussed so far (and we discussed a lot) but it doesn't mean we can't iterate on future proposals/alternatives. Please feel free to go ahead and try something else.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks promising to me, we should do the opposite operation when exporting themes.

@jeyip jeyip marked this pull request as draft January 11, 2021 19:50
@jeyip jeyip force-pushed the fix/template-parts-loading branch 4 times, most recently from 5e08ccd to 3b8e71b Compare January 12, 2021 00:00
@jeyip jeyip self-assigned this Jan 12, 2021
@carlomanf
Copy link

carlomanf commented Jan 12, 2021

@carlomanf Thanks for chiming in. I believe removing the "theme" attribute might be an option in the future but I don't see it as a realistic approach for the moment because:

  • We do want to keep edits made to a theme if a user switches and come back
  • We do not want to mix templates and templates parts across themes. If I edit "single" in themeA and switch to themeB. I shouldn't be using themeA's edited single theme.

I think the current approach in the PR is the best alternative we've tried/discussed so far (and we discussed a lot) but it doesn't mean we can't iterate on future proposals/alternatives. Please feel free to go ahead and try something else.

@youknowriad If I'm reading correctly, you are open to my suggestion as part of a long-term solution, but you believe the theme block attribute needs to stay for now to prevent unwanted effects in the immediate term.

I'm struggling to know what unwanted effects you're thinking of.

The only scenario I can think of where removing the theme block attribute would cause unwanted effects is where a user has a template-part block that references an inactive theme. (I would call this a "foreign" template-part for brevity.) If support was removed for the theme block attribute, the block would end up requesting the active theme instead, and indeed cause unwanted output if a template-part exists with the same slug.

However, I would note the following:

  1. "Foreign" template-parts probably should have never been supported to start with, given that the current goal is to replicate the behaviour of the traditional theming system. The sooner support is removed, the fewer users will be harmed by it.
  2. Theme components are heavily dependent on their respective styles, and I'm doubtful about how useful it would be to include a "foreign" template-part, given it depends on a stylesheet that is not loaded.
  3. Strictly speaking, FSE is still "experimental" and users have been warned about unexpected effects.
  4. If a user has 5 FSE-themes installed that each have 10 template-parts, is it really useful for their template-part block to let them select between 50 template-parts? Wouldn't it make more sense, and be simpler, to limit it to just those from the active theme?
  5. If a user is desperate to share content between templates of different themes, they can always use reusable blocks.

If there is some other unwanted effect that I hadn't thought of, please let me know, but as far as I can see, it looks fairly safe to remove support for the theme block attribute.

@jeyip jeyip force-pushed the fix/template-parts-loading branch from 7bae766 to 469bfd7 Compare January 12, 2021 01:26
@jeyip jeyip force-pushed the fix/template-parts-loading branch 2 times, most recently from ba90f8b to 81abc9b Compare January 12, 2021 04:06
@youknowriad
Copy link
Contributor

@carlomanf Thanks for the arguments, I think some of my earlier comments might have created some confusion. So this is my reasoning.

  • Limiting the behavior of FSE themes to the behavior of classical themes is a not our goal, it's just a way to reduce the scope for the moment.
  • It's important that we fix what doesn't work properly in classical themes.

One of the big frustrations with classic themes is the fact that when you switch themes and come back, you can lose a lot of customizations, having a "theme" attribute solves that right away.

Also, with FSE themes, it's actually very possible to use template parts from one theme to another and that they blend nicely with the design, the reason for this is "Global styles". Template parts inherits things from global styles, so they technically can adapt properly. It's I believe important that we explore these possibilities in FSE (cross-themes templates, or "no-theme" WP if you prefer). For example, I can see a world, where a user installs two themes and say, I'll use themeA as my primary theme but I prefer largely the "contact" page template from theme B and use it from there. OR I prefer the footer of theme B over theme A. I think this is definitely valid use-cases but I also think these need to be decisions made by the user and not something to be enabled inadvertently. That said, it's an unknown land, so it's better for us to focus on the smaller scope for now.

I hope this clarifies my position.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great, can we add some test cases maybe to cover these?

@carlomanf
Copy link

@youknowriad I agree with most of what you've said in your last comment. I think you might be misunderstanding what I'm talking about. You seem to be talking about the taxonomy term, I'm talking about the block attribute. I will probably submit a "competing" PR to this one and it might help you to better understand what I'm proposing.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good to me, (I didn't test very well though)

@aristath
Copy link
Member

Just my 2c here:
Though I get why we'd want to do this, themes in subfolders were never considered a good practice, and AFAIK were never officially recommended or even supported. It's a bit like grand-child themes: Sure, you can use them but they're not officially supported and they are not expected to work. They work and that's a happy coincidence, but it's just that. If at some point in time grand-child themes stop working then it won't be a bug - just like subfolder theme issues are not a bug.
The fact that there is a theme-experiments repo out there which contains a lot of themes and some of us just git-clone that repo doesn't mean that it is expected to work like that...

@youknowriad
Copy link
Contributor

Though I get why we'd want to do this, themes in subfolders were never considered a good practice, and AFAIK were never officially recommended or even supported.

@aristath I agree with you, but the problem is not actually limited to themes in subfolders, the main issue for me is actually the fact that if you copy a theme, paste it into a renamed folder, it breaks because there's an "unwritten" assumption that the "theme" attribute in theme files should match the theme folder.

@aristath
Copy link
Member

but the problem is not actually limited to themes in subfolders, the main issue for me is actually the fact that if you copy a theme, paste it into a renamed folder, it breaks because there's an "unwritten" assumption that the "theme" attribute in theme files should match the theme folder.

Ah OK, gotcha. That makes sense then. Thank you for the clarification 👍

Copy link
Contributor

@mattwiebe mattwiebe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It took me a while to get this working because I missed this:

Modify the source code of block templates and remove theme attributes from all wp_template_parts.

I can verify that it works properly after doing that. Hooray! 🎉 As you mention, though:

This PR will require follow-up work (which has not been implemented yet) to properly address the template parts not loading issue. We're going to have to remove all theme attributes from theme provided template blocks.

I can see the purpose of having a theme attribute on saved-in-the-DB templates part references, but maybe we should just be stripping all theme attributes from file-based templates, all of the time? But that's outside the scope of just this PR.

lib/full-site-editing/block-templates.php Outdated Show resolved Hide resolved
@Addison-Stavlo
Copy link
Contributor

maybe we should just be stripping all theme attributes from file-based templates, all of the time? But that's outside the scope of just this PR. We do need a workable solution that will scale

Thats a good point. After this, what is really the use case for markup to ever supply a theme attribute? Maybe if its trying to reference a template part from a different theme, but why would it ever need to do that? And in doing that it still falls into the fallacy of relying on markup to give us a value it cannot accurately predict.

@jeyip
Copy link
Contributor Author

jeyip commented Jan 14, 2021

maybe we should just be stripping all theme attributes from file-based templates, all of the time? But that's outside the scope of just this PR. We do need a workable solution that will scale

Thats a good point. After this, what is really the use case for markup to ever supply a theme attribute? Maybe if its trying to reference a template part from a different theme, but why would it ever need to do that?

Stripping the theme attribute makes sense to me as well. I can't think of a valid use case for providing theme attributes in theme provided templates. 🤔

Stripping the attribute would also be quick to implement and easy to undo if we changed our minds.

And in doing that it still falls into the fallacy of relying on markup to give us a value it cannot accurately predict.

💯

@jeyip jeyip merged commit d944866 into master Jan 14, 2021
@jeyip jeyip deleted the fix/template-parts-loading branch January 14, 2021 19:11
@github-actions github-actions bot added this to the Gutenberg 9.9 milestone Jan 14, 2021
@vindl
Copy link
Member

vindl commented Jan 14, 2021

I can see the purpose of having a theme attribute on saved-in-the-DB templates part references, but maybe we should just be stripping all theme attributes from file-based templates, all of the time?

The same question crossed my mind and I agree with the above comments - I don't see much point in having them in file-based templates since that value is implicit based on the currently active theme. It also needs to be dynamic (depending on theme's location) and not hardcoded in html file.

Though I get why we'd want to do this, themes in subfolders were never considered a good practice, and AFAIK were never officially recommended or even supported.

@aristath there is a register_theme_directory in core, so in that sense I'd say it is officially supported and we have to consider cases where themes are outside of default theme directory (e.g. shipped within plugins or similar). I don't consider this a good practice but it is possible and supported atm.

if (
'core/template-part' === $block['blockName'] &&
! isset( $block['attrs']['theme'] ) &&
wp_get_theme()->get_stylesheet() === $theme
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to extract this as a bail condition before the for loop? It seems to be independent of any template blocks data being looped over.

Going a bit further, based on this description
@param string $theme the active theme's stylesheet.

Can we drop this parameter from the function, given that we can obtain this with wp_get_theme()->get_stylesheet()? 🤔 It looks to me that if the passed $theme parameter that is different from wp_get_theme()->get_stylesheet() this function will essentially be a no-op.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to extract this as a bail condition before the for loop? It seems to be independent of any template blocks data being looped over.

If we keep $theme as a param, this makes sense.

Can we drop this parameter from the function, given that we can obtain this with wp_get_theme()->get_stylesheet()? 🤔 It looks to me that if the passed $theme parameter that is different from wp_get_theme()->get_stylesheet() this function will essentially be a no-op.

I mentioned something similar here #28088 (comment). It didn't generate a lot of discussion, but I prefer what you're describing.

}

return $new_content;
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: we can drop the else block here since if ends with return, and just return $template_content at top level.

Copy link
Contributor Author

@jeyip jeyip Jan 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My mistake if this is a convention! I thought run composer format would catch it. I'm on board.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might not be a written one but it's less keywords and nesting that achieves the same effect. 😄 Also that way it's immediately obvious that this function has a default return value while quickly scanning the code, at least to me.

}

return $new_content;
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. Sounds good 👍

@@ -5,6 +5,38 @@
* @package gutenberg
*/

/**
* Parses wp_template content and injects the current theme's
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would a more accurate description here be that it removes the theme attribute, instead of stating that it injects a new one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I agree.

@@ -24,6 +56,9 @@ function gutenberg_edit_site_export() {
// Load templates into the zip file.
$templates = gutenberg_get_block_templates();
foreach ( $templates as $template ) {
$updated_content = _remove_theme_attribute_from_content( $template['content'] );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for declaring $updated_content variable here since it's not reused below.

$template->content = _remove_theme_attribute_from_content( $template['content'] ); 

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jeyip
Copy link
Contributor Author

jeyip commented Jan 15, 2021

@vindl I'll make a follow-up to refactor the code and comments. Thanks for chiming in 👍

@jeyip
Copy link
Contributor Author

jeyip commented Jan 20, 2021

@vindl

The follow up PR in response to your code review comments #28368

imranhsayed added a commit to imranhsayed/gutenberg that referenced this pull request Feb 6, 2021
…e HTML comment

- Removes the "theme" key value pair from the HTML comment of block templates, in the documentation.

As per the [recent changes in Gutenberg](WordPress#28088) (as of 9.9) the "theme" attribute should be removed from the template-part blocks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants