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

Add template preview to the edit site template switcher #20958

Merged
merged 3 commits into from
Mar 18, 2020

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Mar 17, 2020

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

github-actions bot commented Mar 17, 2020

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

@@ -61,7 +61,7 @@ class InnerBlocks extends Component {
// Set controlled blocks value from parent, if any.
if ( __experimentalBlocks ) {
__unstableMarkNextChangeAsNotPersistent();
replaceInnerBlocks( __experimentalBlocks );
replaceInnerBlocks( __experimentalBlocks, false );
Copy link
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
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
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
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.

@@ -154,7 +154,7 @@ function InserterBlockList( {
}

const onHoverItem = ( item ) => {
onHover();
onHover( item );
Copy link
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

@pablohoneyhoney
Copy link

Maybe this helps for the new/plus icon

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

Figma

Copy link
Member

@mtias mtias left a comment

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