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

Site Editor: Add Dropdown to Create Generic Templates #26284

Merged
merged 7 commits into from
Oct 23, 2020

Conversation

Copons
Copy link
Contributor

@Copons Copons commented Oct 19, 2020

Description

Part of #26270

Add a very basic interface to create generic templates from the Site Editor navigation sidebar.
Clicking on the + button will open a dropdown listing all missing generic templates, filling them with the hierarchically closest template content, plus a "General" template that creates a blank template.

cc @jameskoster (for some reasons I can't add you to the reviewers)

Major Notes

  1. New templates are now draft. The idea is to avoid having them immediately applied to the site, while they might still be WIP.
    Though, we don't have a proper way to work with draft templates (e.g. the "save" button is only "update", there is no publish flow).
  2. We'll probably eventually need to have "fixed" slugs for $custom templates, otherwise there might be the risk that the user accidentally creates one with a "reserved" name (e.g. "Front Page" which would be slugified into front-page).

How has this been tested?

  • Enable the Full Site Editing experiment.
  • Open the Site Editor.
  • Click on the WP/site icon button, and then on "Templates".
  • Click on the + button near the Templates menu title.
  • Make sure a dropdown with a list of generic templates shows up.
  • Make sure the templates already available on the site are not listed.
  • Click on one of the "named" templates.
  • Make sure the editor content is replaced with the appropriate template's content (e.g. archive should insert the index template content), and the document title shows the new template title.
  • Click on the "General" template.
  • Make sure the editor content is empty, and the document title is "New Template".

Screenshots

Screenshot 2020-10-23 at 12 50 26

Types of changes

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 Oct 19, 2020

Size Change: +459 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/block-directory/index.js 8.59 kB -1 B
build/block-editor/index.js 130 kB -2 B (0%)
build/block-library/index.js 145 kB -1 B
build/components/index.js 171 kB +62 B (0%)
build/edit-site/index.js 22.1 kB +404 B (1%)
build/format-library/index.js 7.49 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 667 B 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 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.93 kB 0 B
build/block-library/editor.css 8.93 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.77 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.63 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 684 B 0 B
build/data/index.js 8.63 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 4.43 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-site/style-rtl.css 3.79 kB 0 B
build/edit-site/style.css 3.79 kB 0 B
build/edit-widgets/index.js 26.6 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.6 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 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/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.45 kB 0 B
build/primitives/index.js 1.35 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.61 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.75 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.23 kB 0 B

compressed-size-action

@jameskoster
Copy link
Contributor

Let's try using a popover rather than a modal:

1

Any existing templates should be hidden rather than faded out. "General" template == $custom template.

Clicking a template takes you to the site editor and populates the Canvas with the appropriate blocks. To determine the appropriate blocks we can hopefully reference the closest related template hierarchically. E.G. if I want to add the Page template, look first for the Singular template, then the Index template. Whichever is found is loaded as the initial state.

@Copons Copons changed the title [Experiment] Site Editor: Add Modal to Create Generic Templates [Experiment] Site Editor: Add Dropdown to Create Generic Templates Oct 20, 2020
@Copons
Copy link
Contributor Author

Copons commented Oct 20, 2020

@jameskoster I've updated this with I think most of your suggestions.
The description has been updated as well with new discussion points and new testing instructions.

@david-szabo97
Copy link
Member

We probably need to have "fixed" slugs for $custom templates, otherwise there might be the risk that the user accidentally creates one with a "reserved" name (e.g. "Front Page" which would be slugified into front-page).

Can't we use a prefix? gtnbrg_custom_$custom or something? (Note I used underscore instead of dash)

@mtias
Copy link
Member

mtias commented Oct 21, 2020

Let's skip custom templates initially and focus on the supported ones.

@david-szabo97
Copy link
Member

david-szabo97 commented Oct 21, 2020

New templates are now draft. The idea is to avoid having them immediately applied to the site, while they might still be WIP.

Shouldn't they be auto-draft? That's what we have in this issue. This is confusing 🤔

@jameskoster
Copy link
Contributor

Couple of small tweaks – we can probably omit singular for now, Single + Page cover the vast majority of use cases and eliminate some potential confusion.

For the template descriptions, I think we can still do some fine-tuning there. I'm inclined to say they should be literal and illustrate when they are applied. Let's use this order too:

Archive
Applied to archives like your posts page, categories, or tags

Single
Applies to individual content like blog posts

Page
Applies to pages

Search results
Applies to search results

404
Applies when content cannot be found

Default (Index)
Applies with no other template is found

@mtias
Copy link
Member

mtias commented Oct 21, 2020

@jameskoster I'd define Index more as Main template, applying when no other template is found. It's still considered the only file a theme needs.

@Copons
Copy link
Contributor Author

Copons commented Oct 21, 2020

@jameskoster @mtias the "generic" templates names and descriptions are all in this file: https://github.com/WordPress/gutenberg/blob/e2d8b7a2c544d1142e7bfbbb1422a609d78e050d/packages/edit-site/src/utils/get-template-info/constants.js

I think fine tuning their copy is not essential for this PR, so I'd rather have a separate one just for that. 🙂

Shouldn't they be auto-draft? That's what we have in this issue. This is confusing 🤔

Great question, and I don't have a good answer!
Teorethically, auto-draft is supposed to be assigned to file templates converted to wp_templates and yet untouched by the user.
Either way, if in this PR I try to create a template with status auto-draft via the REST API, I get an error 400: "status is not one of publish, future, draft, pending, private." 🤔

@jameskoster
Copy link
Contributor

jameskoster commented Oct 21, 2020

There have been a few discussions on Slack around how to handle the somewhat confusing overlap between the singular, single, and page templates. I feel like we're very close to a decision so would invite any further feedback on the following before merging.

Here are the two options that are currently being considered:

1

FWIW My preference is option 2 as it feels more intuitive, and I can see it elegantly scaling as CPTs are registered (see 2a). Due to the ambiguous resolution and associated complexities of the single and singular templates, I think we may be able to leave them out for now, and add them later via an affordance in the UI that enables folks to add more advanced templates.

That said, I am totally happy to push forward with option 1 as well. I know this is a bit in the weeds for where we are with this right now :)

@vindl
Copy link
Member

vindl commented Oct 22, 2020

There have been a few discussions on Slack around how to handle the somewhat confusing overlap between the singular, single, and page templates. I feel like we're very close to a decision so would invite any further feedback on the following before merging.

I agree with @Copons that this is not essential for this PR and can be updated in a follow up. I wouldn't consider it a blocker for merging.

I also have a preference for version 2 so far.

@vindl
Copy link
Member

vindl commented Oct 22, 2020

  1. General templates ($custom) are created as "New Template", but we don't have a way in the Site Editor to rename them. Document settings sounds like a good place to me. 🤔
  2. We probably need to have "fixed" slugs for $custom templates, otherwise there might be the risk that the user accidentally creates one with a "reserved" name (e.g. "Front Page" which would be slugified into front-page).

Both of this can be avoided for now if we disable custom template creation for the time being. I think it's better if we deal with that in a separate PR that can properly address renaming in Document Settings dropdown too. Having default templates will probably be enough to unblock initial testing.

)
) }
</MenuGroup>
<MenuGroup>
Copy link
Member

Choose a reason for hiding this comment

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

I'd be fine with shipping this as an initial version after this menu group is removed.

@Copons Copons force-pushed the try/fse-add-template branch from 4a909ea to 9c1e948 Compare October 23, 2020 11:39
@Copons
Copy link
Contributor Author

Copons commented Oct 23, 2020

I've rebased after the Nav Search feature, which brings in some button styling, and allowed me to add a "title action" container.
I've also removed the $custom template from the dropdown.

@Copons Copons changed the title [Experiment] Site Editor: Add Dropdown to Create Generic Templates Site Editor: Add Dropdown to Create Generic Templates Oct 23, 2020
Copy link
Member

@vindl vindl left a comment

Choose a reason for hiding this comment

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

LGTM! :shipit: Nice work @Copons!

@Copons Copons merged commit 9518819 into master Oct 23, 2020
@Copons Copons deleted the try/fse-add-template branch October 23, 2020 13:05
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants