Skip to content

Add template preview to the edit site template switcher#20958

Merged
youknowriad merged 3 commits into
masterfrom
add/template-preview
Mar 18, 2020
Merged

Add template preview to the edit site template switcher#20958
youknowriad merged 3 commits into
masterfrom
add/template-preview

Conversation

@youknowriad

@youknowriad youknowriad commented Mar 17, 2020

Copy link
Copy Markdown
Contributor

closes #20478

This PR adds a preview panel similar to the inserter one to the template switcher on the edit-site package.

Capture d’écran 2020-03-17 à 2 34 32 PM

@github-actions

github-actions Bot commented Mar 17, 2020

Copy link
Copy Markdown

Size Change: +1.01 kB (0%)

Total Size: 858 kB

Filename Size Change
build/block-editor/index.js 100 kB +99 B (0%)
build/block-editor/style-rtl.css 10.9 kB +30 B (0%)
build/block-editor/style.css 10.9 kB +29 B (0%)
build/block-library/index.js 111 kB +172 B (0%)
build/block-serialization-default-parser/index.js 1.65 kB +1 B
build/blocks/index.js 57.5 kB -30 B (0%)
build/components/index.js 191 kB +5 B (0%)
build/compose/index.js 6.21 kB +2 B (0%)
build/core-data/index.js 10.6 kB +19 B (0%)
build/data/index.js 8.2 kB +1 B
build/deprecated/index.js 771 B -1 B
build/edit-post/index.js 91.2 kB +2 B (0%)
build/edit-site/index.js 5.56 kB +492 B (8%) 🔍
build/edit-site/style-rtl.css 2.62 kB +95 B (3%)
build/edit-site/style.css 2.62 kB +95 B (3%)
build/edit-widgets/index.js 4.43 kB +4 B (0%)
build/editor/index.js 44 kB +6 B (0%)
build/element/index.js 4.45 kB -3 B (0%)
build/format-library/index.js 7.09 kB -2 B (0%)
build/i18n/index.js 3.49 kB +1 B
build/is-shallow-equal/index.js 711 B +1 B
build/keyboard-shortcuts/index.js 2.3 kB -1 B
build/keycodes/index.js 1.69 kB +1 B
build/list-reusable-blocks/index.js 2.99 kB -1 B
build/media-utils/index.js 4.83 kB -3 B (0%)
build/redux-routine/index.js 2.83 kB -3 B (0%)
build/rich-text/index.js 14.3 kB -1 B
build/url/index.js 4.01 kB -1 B
build/viewport/index.js 1.61 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/editor-rtl.css 7.23 kB 0 B
build/block-library/editor.css 7.24 kB 0 B
build/block-library/style-rtl.css 7.42 kB 0 B
build/block-library/style.css 7.43 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/date/index.js 5.37 kB 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/style-rtl.css 8.52 kB 0 B
build/edit-post/style.css 8.51 kB 0 B
build/edit-widgets/style-rtl.css 2.58 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 381 B 0 B
build/editor/editor-styles.css 382 B 0 B
build/editor/style-rtl.css 3.97 kB 0 B
build/editor/style.css 3.96 kB 0 B
build/escape-html/index.js 733 B 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 1.93 kB 0 B
build/html-entities/index.js 621 B 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/notices/index.js 1.58 kB 0 B
build/nux/index.js 3.01 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.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 780 B 0 B
build/server-side-render/index.js 2.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

if ( __experimentalBlocks ) {
__unstableMarkNextChangeAsNotPersistent();
replaceInnerBlocks( __experimentalBlocks );
replaceInnerBlocks( __experimentalBlocks, false );

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.

The template part block was stealing the focus on the first render causing the popover to close. You can also verify this on master by loading the edit site page and notice that the template part block gets focused immediately on load. cc @aduth

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Trying to recall what the original use-case is for focus to shift when replacing a block. I guess for non-nested blocks, it helps support cases like transforming a block from one to another (using / slash insert to insert a quote -> type immediately in the quote). Struggling to think if it makes as much sense in the InnerBlocks case, or at least as a default.

The only other use in this function is in synchronizing the template. Did you determine if it makes sense there? I might imagine we'd have similar issues of stealing focus?

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.

The only other use in this function is in synchronizing the template. Did you determine if it makes sense there? I might imagine we'd have similar issues of stealing focus?

I think @jorgefilipecosta introduced an explicit prop about it at some point. I might think we can always default to "false" but I'm not 100% certain 😬

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

In most cases when we add a block using a template for inner blocks the focus goes to the first focusable block. O added a flag because for some blocks people referred this behavior is not desirable e.g: for the media & text block.


const onHoverItem = ( item ) => {
onHover();
onHover( item );

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 a bug in the inserter, already fixed master

@youknowriad youknowriad marked this pull request as ready for review March 17, 2020 16:10
@pablohoneyhoney

Copy link
Copy Markdown

Maybe this helps for the new/plus icon

Screen Shot 2020-03-17 at 1 37 34 PM

Figma

@mtias mtias left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Let's keep this moving.

@youknowriad youknowriad merged commit 26bab2e into master Mar 18, 2020
@youknowriad youknowriad deleted the add/template-preview branch March 18, 2020 14:43
@github-actions github-actions Bot added this to the Gutenberg 7.8 milestone Mar 18, 2020
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.

Show Preview of Templates and template Parts

5 participants