Skip to content

Full Site Editing: Add Support for Templates Default and Custom Titles and Descriptions (Second Attempt)#26636

Closed
Copons wants to merge 17 commits intomasterfrom
try/fse-templates-definitions-take-2
Closed

Full Site Editing: Add Support for Templates Default and Custom Titles and Descriptions (Second Attempt)#26636
Copons wants to merge 17 commits intomasterfrom
try/fse-templates-definitions-take-2

Conversation

@Copons
Copy link
Copy Markdown
Contributor

@Copons Copons commented Nov 2, 2020

Description

This is a simpler alternative to #26394, after an interesting comment by @carlomanf made me realize that I was looking at this from the wrong side, and needlessly overcomplicating the approach.

Fixes #25755

Update the templates handling to allow for custom titles and descriptions.

  • Created a list of default template types definitions in PHP containing titles and descriptions for all the "generic" templates.
  • The list is filterable with the new default_template_types filter, already used to temporarily remove the embed definition which it's currently not supported.
  • The list is available in JS via Redux through the new getDefaultTemplateTypes(), getDefaultTemplateType(), and getTemplateInfo() selectors of core/edit-site.
  • Templates imported from files will automatically obtain the title and excerpt from the default definitions, if possible.
  • New templates created from the Site Editor sidebar will also automatically use the default definitions, and will be saved as draft. They will become published once saved the first time.
  • The default definitions are used across the Site Editor as a fallback for templates without title or excerpt.
  • Added support for excerpts to the wp_template CPT, used to store the template description.
  • Updated the Templates wp-admin list to display more details (title, slug, excerpt, status), so that now it's at least slightly useful. It also now lists auto-draft templates, at least temporarily.
  • Converted the getTemplateInfo utility into the getTemplateInfo selector, since it relies on the core/edit-site state.

Main Differences with #26546

  • No more theme-provided status. My original assumption that it was getting in the way of titles was proven incorrect after a deeper investigation. The status itself doesn't do anything to titles; it's the editor's entity retrieval that clears the title. In this PR there are some changes to prevent it.

  • No more theme post meta to indicate the source of a template.
    We shouldn't have duplicate templates, so a template can only ever be: either custom (publish or draft status), or provided by the current theme (auto-draft status).

Follow up

  • Update the template definitions copy!
  • Add a way to edit the title (and maybe excerpt too) of a template from the Site Editor (e.g. in the Document Settings dropdown).
  • Extend the wp-admin Templates list's quick edit with the excerpt (and maybe the slug too?).
  • Update the template saving logic to allow for going back and forth between draft and publish.

How has this been tested?

  1. Open the Site Editor. Behind the scenes, all theme's and plugins' templates will be converted into new wp_template items of status auto-draft; there might be duplicates for unrelated reasons (see Auto-draft template is created when draft already exists #26621, but not limited to it).
  2. Open the wp-admin Templates list (/edit.php?post_type=wp_template).
  3. Make sure it shows the following columns: title, slug, description, status.
  4. Notice it shows also auto-draft templates. Feel free to wipe this list clean by moving all templates to trash, and permanently delete them.
  5. Open the Site Editor (if you wiped the templates, now it will generate new ones, hopefully without duplicates).
  6. Open the sidebar, and navigate into the Templates menu.
  7. Make sure the items use the title and description as provided by the definitions list introduced in this PR.
  8. Create a new template with the New Template dropdown (click on + in the Templates menu).
  9. Make sure the items in the New Template dropdown use the definitions list.
  10. Make sure the new template's name is the one provided by the definitions list (it should match the one from the New Template dropdown).
  11. Check in the sidebar that the new template shows up (it might be easier to just look in the All Templates menu), it has the correct title and description, and is marked as "[Draft]".
  12. Click on "Update Design" (it might be disabled: do some changes to enable it).
  13. The template has now been published, so make sure it lost the "[Draft]" label.
  14. Open the wp-admin Templates list, and make sure the new template shows up with the right title, description, and status.

Screenshots

The new Templates wp-admin list:

Screenshot 2020-11-02 at 15 35 37

The Site Editor sidebar using the new default definitions, and including a draft template:

Screenshot 2020-10-26 at 17 44 59

The Site Editor documents settings using the new default definitions:

Screenshot 2020-10-26 at 17 44 41

Types of changes

Breaking change (fix or feature that would cause existing functionality to not work as expected)

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
Copy Markdown

github-actions bot commented Nov 2, 2020

Size Change: -18.1 kB (1%)

Total Size: 1.19 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B
build/annotations/index.js 3.77 kB -2 B (0%)
build/blob/index.js 664 B -1 B
build/block-directory/index.js 8.71 kB +1 B
build/block-editor/index.js 133 kB -4 B (0%)
build/block-library/index.js 147 kB +140 B (0%)
build/block-serialization-default-parser/index.js 1.87 kB -1 B
build/blocks/index.js 48 kB -10 B (0%)
build/components/index.js 171 kB -71 B (0%)
build/compose/index.js 9.87 kB +3 B (0%)
build/core-data/index.js 14.8 kB +2.25 kB (15%) ⚠️
build/data-controls/index.js 821 B +52 B (6%) 🔍
build/data/index.js 8.73 kB -4 B (0%)
build/date/index.js 11.2 kB -20.6 kB (184%) 🏆
build/deprecated/index.js 768 B -1 B
build/dom/index.js 4.46 kB +1 B
build/edit-navigation/index.js 11.1 kB -3 B (0%)
build/edit-post/index.js 306 kB +7 B (0%)
build/edit-site/index.js 22.6 kB -5 B (0%)
build/edit-site/style-rtl.css 3.96 kB +51 B (1%)
build/edit-site/style.css 3.96 kB +52 B (1%)
build/edit-widgets/index.js 26.3 kB -23 B (0%)
build/edit-widgets/style-rtl.css 3.16 kB +31 B (0%)
build/edit-widgets/style.css 3.16 kB +29 B (0%)
build/editor/editor-styles-rtl.css 476 B -4 B (0%)
build/editor/editor-styles.css 478 B -4 B (0%)
build/editor/index.js 42.6 kB +88 B (0%)
build/element/index.js 4.62 kB +1 B
build/format-library/index.js 6.86 kB -2 B (0%)
build/hooks/index.js 2.16 kB -1 B
build/is-shallow-equal/index.js 713 B +1 B
build/keyboard-shortcuts/index.js 2.52 kB +1 B
build/keycodes/index.js 1.94 kB +1 B
build/media-utils/index.js 5.31 kB -1 B
build/notices/index.js 1.77 kB +5 B (0%)
build/nux/index.js 3.4 kB +1 B
build/plugins/index.js 2.56 kB -1 B
build/primitives/index.js 1.43 kB -1 B
build/priority-queue/index.js 790 B -1 B
build/redux-routine/index.js 2.83 kB -2 B (0%)
build/reusable-blocks/index.js 3.05 kB -4 B (0%)
build/rich-text/index.js 13.4 kB +2 B (0%)
build/server-side-render/index.js 2.77 kB -1 B
build/token-list/index.js 1.27 kB +2 B (0%)
build/url/index.js 4.06 kB -1 B
build/viewport/index.js 1.83 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/shortcode/index.js 1.69 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

Copy link
Copy Markdown
Member

@noahtallen noahtallen left a comment

Choose a reason for hiding this comment

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

This tests well for me! No major blockers from my point of view. I like it!

My only concern is tying more stuff to PHP, which makes it more difficult to re-use outside of the wp-admin context. But I don't think we can get away from that here.

+1 on following up to refresh the copy. It seems weird how so many of the template names begin with default!

@carlomanf
Copy link
Copy Markdown

The part that seems odd to me is how the post immediately gets saved as draft when the user selects from the dropdown, which doesn't really align with the usual behaviour of WP. If they do that and then abandon the editor, the blank draft will still be visible next time they return.

Perhaps use auto-draft instead, and then hide any templates from the site editor if their status is auto-draft and post content is empty.

It also shouldn't be assumed that auto-draft templates are always triggered by themes, because I notice that if you go to Appearance > Templates > Add New and abandon the editor, the auto-draft will later show up in the site editor. The suggestion above would also fix this.

@Copons
Copy link
Copy Markdown
Contributor Author

Copons commented Nov 3, 2020

The part that seems odd to me is how the post immediately gets saved as draft when the user selects from the dropdown, which doesn't really align with the usual behaviour of WP. If they do that and then abandon the editor, the blank draft will still be visible next time they return.

Perhaps use auto-draft instead, and then hide any templates from the site editor if their status is auto-draft and post content is empty.

It also shouldn't be assumed that auto-draft templates are always triggered by themes, because I notice that if you go to Appearance > Templates > Add New and abandon the editor, the auto-draft will later show up in the site editor. The suggestion above would also fix this.

@carlomanf good point.

Currently we use auto-draft as a way to indicate templates that have been converted from files and not customized by the user.
These templates are automatically kept up to date with the file version whenever the file content changes (e.g. with a theme update, or even just manually by the user).
These automatic updates should only happen if the template is not customized by the user, otherwise they would overwrite any user changes.

We also need to communicate in the UI that these auto-draft templates will be actually used on the front-end (regardless of the fact that they are loaded from file or wp_template post).
Reason why in the Site Editor sidebar I haven't added a "draft" label to them, but to draft templates only.

So we need something to determine incontrovertibly that a template is "theme-provided and untouched by user" (I did that with a custom status in the previous PR).

By forcing draft on new templates created in the Site Editor, the intention is to remove at least one "unintended" source of auto-draft, without introducing regressions.
A draft template would not be used on the front-end, and would be ready to be customized and published by the user in the Site Editor (not quite, right now, since there is no "draft/publish" logic in the Site Editor, but I'm moving one step at a time).
As you correctly point out though, auto-draft are still created by the template editor, which is not great. 🤔


As an aside: currently templates created in the Site Editor are not empty by default.
They gain the initial content from the closest existing template in the hierarchy.
E.g. if you create single, it's automatically filled with the singular content if it exists, or index otherwise.
Users then can wipe out the content and start from scratch, but I'd argue that empty templates are a rare exception rather than the norm: contrary to empty posts, empty templates don't really make sense.

EDIT:

Perhaps use auto-draft instead, and then hide any templates from the site editor if their status is auto-draft and post content is empty.

Ah now I see what you mean here.
Actual auto-draft (as in: enter editor, type something, then leave without saving) are saved with empty content and Auto Draft as title (apparently not even localized?).
Therefore, it should be safe to say that if the content is empty, the auto-draft was created by the user, and not converted from the theme.
I think I'm finally getting this! 😄

@Copons Copons force-pushed the try/fse-templates-definitions-take-2 branch 2 times, most recently from a3aa198 to 2b20f5a Compare November 3, 2020 16:32
@Addison-Stavlo
Copy link
Copy Markdown
Contributor

No more theme post meta to indicate the source of a template.
We shouldn't have duplicate templates, so a template can only ever be: either custom (publish or draft status), or provided by the current theme (auto-draft status).

Wouldn't this still be handy if we wanted to search templates provided by a specific theme? Or if we only wanted to show templates for the currently active theme?

@Copons
Copy link
Copy Markdown
Contributor Author

Copons commented Nov 3, 2020

No more theme post meta to indicate the source of a template.
We shouldn't have duplicate templates, so a template can only ever be: either custom (publish or draft status), or provided by the current theme (auto-draft status).

Wouldn't this still be handy if we wanted to search templates provided by a specific theme? Or if we only wanted to show templates for the currently active theme?

@Addison-Stavlo This is all quite complicated, so let's see.

Ideally we only want to show (and use!) custom and current theme's templates: we don't really need a theme slug, since the origin is "clearly" implied.

When we switch theme, custom templates won't be affected: they'll still be the first choice for their corresponding content.

What happens to the old templates, though?
Where possible they'll be replaced by the new theme's templates.
But what about old theme templates that are not provided by the new one?

Should we wipe auto-draft templates on theme change — or even on theme update? 🤔

@Addison-Stavlo
Copy link
Copy Markdown
Contributor

But what about old theme templates that are not provided by the new one?
Should we wipe auto-draft templates on theme change — or even on theme update?

I was thinking add the theme meta on creation so we can only use auto-drafts that correspond to the current theme. But wiping all auto-drafts on theme change/update is another option. 🤔

Copy link
Copy Markdown
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I left a few comments. I'm learning the codebase so I'm sure I made some mistakes but I hope to catch up as soon as possible to be able to help with integration with other parts of Gutenberg.

@carlomanf
Copy link
Copy Markdown

But what about old theme templates that are not provided by the new one?
Should we wipe auto-draft templates on theme change — or even on theme update?

I was thinking add the theme meta on creation so we can only use auto-drafts that correspond to the current theme. But wiping all auto-drafts on theme change/update is another option. 🤔

I think the best solution is to rewrite gutenberg_find_template_post_and_parts to wipe just the auto-drafts that no longer match a file in the current theme. (#26383 is related)

Theme meta would not work because there is also the possibility of a template file being deleted from the current theme after the auto-draft was already generated.

@Addison-Stavlo
Copy link
Copy Markdown
Contributor

to wipe just the auto-drafts that no longer match a file in the current theme
Theme meta would not work because there is also the possibility of a template file being deleted from the current theme after the auto-draft was already generated.

Having a theme meta doesn't prevent us from being able to delete the auto-draft if there is no longer a corresponding file in the theme. But yeah, if there is no need for an auto-draft after switching themes then wiping them may make the most sense. I can't really think of a case where one could switch themes and still be using an auto-draft template?

Aside from that, template parts seems a bit different. I think you could add an auto-draft template part to a custom template, and as long as it isn't ever edited it will still remain an auto draft. If we took a similar wiping approach for template parts, that scenario could create a loss of content on the custom template. 🤔

@Copons Copons added the [Status] In Progress Tracking issues with work in progress label Nov 4, 2020
return templateTitle;
},
[ name, kind, title, key ]
);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is an awkward place to use the core/edit-site store, as it might be used outside of the Site Editor, reason why we check for the existence of select( 'core/edit-site' ) right at the beginning of it.

The intention is that when we edit templates, we want to see its correct title (as in: the one expected by the user, consistent with other places in the UI) in the edits review panel.
Since auto-draft entities don't have a title, editing for the first time a theme-provided template in the Site Editor might result in displaying an incorrect title (undefined, or the slug, etc.).

Copy link
Copy Markdown
Contributor

@Addison-Stavlo Addison-Stavlo Nov 9, 2020

Choose a reason for hiding this comment

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

This is an awkward place to use the core/edit-site store

Would it make more sense to have the templateInfo store in core/editor instead of core/edit-site? While it is most relevant to the site editor, it seems like valuable information regardless. Similarly, it seems ok to access core/editor store in edit-site a bit more than it does to access core/edit-site in editor. 🤔

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This sounds like a great idea actually!
core/editor's editorSettings is already full of very specific stuff, I guess adding default template types in there too wouldn't do much harm. 😅

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@Addison-Stavlo After looking into it, I'm deciding against it.
The reason is that edit-post and edit-site initialize the editor in wildly different ways, and they add their PHP-provided settings to different stores.
I don't know the reason behind this, and what kind of inconsistencies it is currently creating.
Either way, I'm not going to attempt a major refactor of the editors initialization in this PR. 😄

The select( 'core/edit-site' ) is slightly smelly, but it works for our purposes.
As far as I could test, the entity review seems to work as expected in edit-post, displaying the correct template title.
By checking for core/edit-site, we are also preventing regressions in other editors that we might not catch.

@Copons Copons force-pushed the try/fse-templates-definitions-take-2 branch from d7bbf29 to dbd2395 Compare November 10, 2020 10:07
@Copons Copons requested a review from noahtallen November 10, 2020 11:30
@Copons Copons removed the [Status] In Progress Tracking issues with work in progress label Nov 11, 2020
@Copons
Copy link
Copy Markdown
Contributor Author

Copons commented Nov 17, 2020

Will split this PR to make it more reviewable!

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.

Create system for names and descriptions of FSE templates

6 participants