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

Fix Template Part placeholder preview #21623

Merged
merged 3 commits into from
Apr 28, 2020

Conversation

Addison-Stavlo
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo commented Apr 15, 2020

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.

@github-actions
Copy link

github-actions bot commented Apr 15, 2020

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
Contributor Author

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
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
Contributor Author

Addison-Stavlo 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 🙁

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

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
Contributor Author

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.

@@ -26,7 +26,7 @@ export default function useTemplatePartPost( postId, slug, theme ) {
'postType',
'wp_template_part',
{
status: 'auto-draft',
status: [ 'publish', 'auto-draft' ],
Copy link
Contributor

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
Contributor Author

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

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:

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
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants