Skip to content

Fix Template Part placeholder preview#21623

Merged
Addison-Stavlo merged 3 commits intomasterfrom
fix/template-part-insertion
Apr 28, 2020
Merged

Fix Template Part placeholder preview#21623
Addison-Stavlo merged 3 commits intomasterfrom
fix/template-part-insertion

Conversation

@Addison-Stavlo
Copy link
Copy Markdown
Contributor

@Addison-Stavlo Addison-Stavlo commented Apr 15, 2020 •
edited
Loading

Description

Fixes the preview for and allows custom template parts to appropriately be found by the Template Part placeholder block.

Screen Shot 2020-04-15 at 2 23 27 PM

Before this, no match would be found and the placeholder would promt to create a new one.

Also, if a template were found, the preview is cut off at the bottom:
Screen Shot 2020-04-22 at 9 38 54 PM

This PR will fix that to properly show the entire template part:
Screen Shot 2020-04-22 at 9 39 24 PM

Code changes:

  1. Added 'publish' as an acceptable status for the query.
  2. Removed the position style from the BlockPreview content wrapper, this was causing the preview to be cut off at the bottom (Or in the case of small template parts, not show up at all).

Testing Instructions

  1. Create a new custom template part with slug/theme name to use.
  2. Add some content and save it.
  3. Try to insert this elsewhere using the template part placeholder block.
  4. Verify a match is found and the preview is not cut off at the bottom. (an easy way to see if this being cut off is to use a custom template part that is only a few words in a paragraph block).

How has this been tested?

Tested on local environment in post and site editors.

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

@Addison-Stavlo Addison-Stavlo self-assigned this Apr 15, 2020
@Addison-Stavlo Addison-Stavlo requested a review from ockham April 15, 2020 18:56
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 15, 2020 •
edited
Loading

Size Change: -19 B (0%)

Total Size: 845 kB

Filename Size Change
build/block-library/editor-rtl.css 7.12 kB -10 B (0%)
build/block-library/editor.css 7.12 kB -9 B (0%)
ℹ️ 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.1 kB 0 B
build/block-editor/style.css 10.1 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-library/style-rtl.css 7.19 kB 0 B
build/block-library/style.css 7.19 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 28.2 kB 0 B
build/edit-post/style-rtl.css 12.5 kB 0 B
build/edit-post/style.css 12.5 kB 0 B
build/edit-site/index.js 10.8 kB 0 B
build/edit-site/style-rtl.css 5.25 kB 0 B
build/edit-site/style.css 5.24 kB 0 B
build/edit-widgets/index.js 8.33 kB 0 B
build/edit-widgets/style-rtl.css 5 kB 0 B
build/edit-widgets/style.css 5 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.27 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

@Addison-Stavlo Addison-Stavlo added the [Type] Bug An existing feature does not function as intended label Apr 20, 2020
@Addison-Stavlo
Copy link
Copy Markdown
Contributor Author

Addison-Stavlo commented Apr 21, 2020

Everything seems to work on this branch, however when I rebased master locally I find that the insertion stops working. That is, the match is found, the preview is shown, but when you press 'Choose' it inserts a blank instead. I am having problems finding the culprit for this regression in behavior. 😞

@ockham
Copy link
Copy Markdown
Contributor

ockham commented Apr 21, 2020

I can't seem to repro the fix on this branch, even if I don't rebase on master 🙁 -- I'm seeing the old behavior (no preview, no 'Choose' button).

FWIW, I'm using twentytwenty, and am trying to insert the header template. The network request for template parts matching these terms seems to return an empty array for me 🙁

@Addison-Stavlo
Copy link
Copy Markdown
Contributor Author

Addison-Stavlo commented Apr 21, 2020 •
edited
Loading

FWIW, I'm using twentytwenty, and am trying to insert the header template. The network request for template parts matching these terms seems to return an empty array for me 🙁

Gotcha. I was doing this with custom template parts. So I create one with a slug and theme name, save it, then try to insert it elsewhere.

We do need to figure out a way to include the themes template parts in this request as well. 🤔

@ockham
Copy link
Copy Markdown
Contributor

ockham commented Apr 21, 2020

FWIW, I'm using twentytwenty, and am trying to insert the header template. The network request for template parts matching these terms seems to return an empty array for me slightly_frowning_face

Gotcha. I was doing this with custom template parts. So I create one with a slug and theme name, save it, then try to insert it elsewhere.

We do need to figure out a way to include the themes template parts in this request as well.

Ah right, I keep forgetting about the endpoint exposing only the template parts CPTs, whereas the template switcher only shows the ones that come with the theme. (I've been bitten before by this issue tho 😅 )

@Addison-Stavlo Addison-Stavlo mentioned this pull request Apr 22, 2020
Merged
6 tasks
@Addison-Stavlo
Copy link
Copy Markdown
Contributor Author

Addison-Stavlo commented Apr 22, 2020

It may make sense to close this in favor of #21766 - but I will leave it open for now just since this is in a state where inserting the template part works, while there is some unidentified regression on master that currently will cause it to insert a blank instead.

@Addison-Stavlo
Copy link
Copy Markdown
Contributor Author

Addison-Stavlo commented Apr 23, 2020

Ok, we can still use this PR to fix the style issue with the preview. #21766 Fixes a handful of the other issues.

So lets test this branch to ensure the preview is no longer cut off at the bottom.

ockham
ockham reviewed Apr 23, 2020
View reviewed changes
packages/block-library/src/template-part/edit/use-template-part-post.js Outdated
Copy link
Copy Markdown
Contributor

@ockham ockham Apr 23, 2020

Choose a reason for hiding this comment

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

Needs a rebase I think? #21766 has this.

Copy link
Copy Markdown
Contributor Author

@Addison-Stavlo Addison-Stavlo Apr 23, 2020

Choose a reason for hiding this comment

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

Nice, that one merged. I rebased this =)

@Addison-Stavlo Addison-Stavlo changed the title Fix Template Part insertion by Placeholder block Fix Template Part placeholder preview Apr 23, 2020
@Addison-Stavlo Addison-Stavlo force-pushed the fix/template-part-insertion branch from fdd2e94 to 326df36 Compare April 23, 2020 17:28
noahtallen
noahtallen approved these changes Apr 28, 2020
View reviewed changes
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.

Screen Shot 2020-04-27 at 9 00 38 PM

it works!

we definitely need some kinda drop down search selector thingy there in the future

vindl
vindl approved these changes Apr 28, 2020
View reviewed changes
Copy link
Copy Markdown
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:

Since this is used in other areas like block preview, I smoke tested that and couldn't notice any visual regressions.

@Addison-Stavlo Addison-Stavlo merged commit 98f987c into master Apr 28, 2020
@Addison-Stavlo Addison-Stavlo deleted the fix/template-part-insertion branch April 28, 2020 16:00
@github-actions github-actions bot added this to the Gutenberg 8.1 milestone Apr 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ockham ockham ockham left review comments

@vindl vindl vindl approved these changes

@noahtallen noahtallen noahtallen approved these changes

@youknowriad youknowriad Awaiting requested review from youknowriad

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@Soean Soean Awaiting requested review from Soean

@talldan talldan Awaiting requested review from talldan

Assignees

@Addison-Stavlo Addison-Stavlo

Labels

[Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 8.1

Development

Successfully merging this pull request may close these issues.

5 participants

@Addison-Stavlo @ockham @vindl @noahtallen @MichaelArestad