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 Switcher: Add theme preview #21768

Merged
merged 5 commits into from
Apr 22, 2020
Merged

Conversation

ockham
Copy link
Contributor

@ockham ockham commented Apr 21, 2020

Description

Add on-hover theme preview to site editor's template switcher (see mockups).

Fixes #20469.

How has this been tested?

  • If you haven't done yet, enable the site editor (and the demo templates) in Gutenberg > Experiments.
  • Go to the Site Editor menu.
  • Click on the template switcher.
  • Hover over the theme name (last entry in the template switcher)

Screenshots

image

Types of changes

Extends existing feature.

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 Apr 21, 2020

Size Change: +331 B (0%)

Total Size: 842 kB

Filename Size Change
build/edit-site/index.js 10.7 kB +230 B (2%)
build/edit-site/style-rtl.css 5.09 kB +50 B (0%)
build/edit-site/style.css 5.09 kB +51 B (1%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.24 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.1 kB 0 B
build/block-library/editor.css 7.1 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-library/style-rtl.css 7.17 kB 0 B
build/block-library/style.css 7.18 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.7 kB 0 B
build/components/index.js 198 kB 0 B
build/components/style-rtl.css 16.9 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.25 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.54 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/edit-post/index.js 27.9 kB 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-widgets/index.js 7.5 kB 0 B
build/edit-widgets/style-rtl.css 4.67 kB 0 B
build/edit-widgets/style.css 4.66 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 43.3 kB 0 B
build/editor/style-rtl.css 3.28 kB 0 B
build/editor/style.css 3.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.32 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.67 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ockham ockham marked this pull request as ready for review April 21, 2020 18:42
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This works very well! And the code looks good from my point of view.

I wonder if we should be displaying all of these previews on focus for use in a tabbing flow. 🤔 - But I don't think that concern should hold up this PR as none of the others work that way yet either. Thoughts for future iterations!

@ockham
Copy link
Contributor Author

ockham commented Apr 22, 2020

This works very well! And the code looks good from my point of view.

I wonder if we should be displaying all of these previews on focus for use in a tabbing flow. - But I don't think that concern should hold up this PR as none of the others work that way yet either. Thoughts for future iterations!

Indeed, I was also wondering about a11y implications but decided to hold off for now because the pre-existing template previews are also on-hover only. But yeah, definitely material for future iterations.

@ockham ockham force-pushed the add/template-switcher-theme-preview branch from 14c131d to 66d8d28 Compare April 22, 2020 11:41
@ockham
Copy link
Contributor Author

ockham commented Apr 22, 2020

Some tests currently failing. Waiting for #21780 which should fix them.

@ockham ockham force-pushed the add/template-switcher-theme-preview branch from 66d8d28 to 58b2810 Compare April 22, 2020 12:59
@youknowriad youknowriad mentioned this pull request Apr 22, 2020
53 tasks
@ockham ockham requested review from youknowriad and epiqueras April 22, 2020 16:32
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.

This worked as expected for me and the code looks good. 👍

@ockham ockham merged commit d6ffe5a into master Apr 22, 2020
@ockham ockham deleted the add/template-switcher-theme-preview branch April 22, 2020 17:17
@github-actions github-actions bot added this to the Gutenberg 8.0 milestone Apr 22, 2020
ockham added a commit that referenced this pull request Jun 28, 2020
In #21578, I added a few fields to Core's `/themes` endpoint, for use by the Site Editor's Template Switcher (see both #21578 and #21768). I then submitted those changes as a [PR](WordPress/wordpress-develop#222) against Core. That PR underwent a number of modifications and was eventually merged; the new fields will be part of the `/themes` endpoint exposed by Core starting from the next WP release.

This PR updates the fields added by Gutenberg to follow the same semantics, as well as the callsites that use that endpoint.
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.

Theme name in Template Selector
4 participants