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

Edit Site: Update template navigation to use new link control. #20366

Merged

Conversation

epiqueras
Copy link
Contributor

Description

#19141 was merged with a feature to navigate to the template that an internal link will use to render its front end, using the URLPopover.

The URLPopover has since been replaced with the LinkControl. This PR moves the slot/fill extension introduced by #19141 to the new LinkControl component.

How has this been tested?

It was verified that the feature works as expected with the new LinkControl.

Screenshots

image

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

Size Change: +41 B (0%)

Total Size: 864 kB

Filename Size Change
build/block-editor/index.js 104 kB +19 B (0%)
build/edit-site/index.js 4.61 kB +22 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1 kB 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-editor/style-rtl.css 10.3 kB 0 B
build/block-editor/style.css 10.3 kB 0 B
build/block-library/editor-rtl.css 7.67 kB 0 B
build/block-library/editor.css 7.67 kB 0 B
build/block-library/index.js 116 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 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-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.9 kB 0 B
build/edit-post/style-rtl.css 8.59 kB 0 B
build/edit-post/style.css 8.58 kB 0 B
build/edit-site/style-rtl.css 2.77 kB 0 B
build/edit-site/style.css 2.76 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 2.59 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 325 B 0 B
build/editor/editor-styles.css 327 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 4.01 kB 0 B
build/editor/style.css 4 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 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 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.45 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 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 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 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.49 kB 0 B
build/priority-queue/index.js 879 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@shaunandrews
Copy link
Contributor

Whats the use-case in which I'd want to edit a Template from within the context of the link editor?

@epiqueras
Copy link
Contributor Author

That's not what this is doing.

#19204 (comment)

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 is cool!

So I can go to the Site Editor and edit a template-part. From here I can add a link to the front-page template (link defined to /), and then navigate to that template in the site editor via that link. Fantastic! 🎉

What I am having issues with is creating a second template (call it 'second-page') in here and adding a link to that second template (link defined to lead to /second-page ?):

  1. It seems to go to the front-page template either way,
  2. and that second template does not seem to persist in the Site Editor's list of templates when I go back into the Site Editor later (although it did get added to the list of 'templates' in the 'appearance' section).

Are these behaviors expected at this point and/or represent future work to be done in follow ups?

@epiqueras
Copy link
Contributor Author

It seems to go to the front-page template either way,

second-page is not in the template hierarchy. These links go to the template the linked URL would render in.

and that second template does not seem to persist in the Site Editor's list of templates when I go back into the Site Editor later (although it did get added to the list of 'templates' in the 'appearance' section).

It needs to be published to be part of the hierarchy.

@Addison-Stavlo
Copy link
Contributor

Thanks for the info!

It needs to be published to be part of the hierarchy.

If I go to "Appearance" -> "Templates" (or similarly "Template Parts"), there are Templates / Template Parts that are listed as "Published" that do not appear in the selection dropdown in the Top-Left of the site editor. Is there something else I need to do for them to be "published" where the Site Editor is concerned?

These links go to the template the linked URL would render in.

I am struggling to find how to set up a second page to render another template in for the sake of testing this nifty template navigation even further. Do you happen to have any other info on this? I just got done going through the most recent gutenbrerg times demo with no luck, is there anything else that may highlight this?

@epiqueras
Copy link
Contributor Author

If I go to "Appearance" -> "Templates" (or similarly "Template Parts"), there are Templates / Template Parts that are listed as "Published" that do not appear in the selection dropdown in the Top-Left of the site editor. Is there something else I need to do for them to be "published" where the Site Editor is concerned?

They need to be part of the resolved hierarchy somehow.

I am struggling to find how to set up a second page to render another template in for the sake of testing this nifty template navigation even further. Do you happen to have any other info on this? I just got done going through the most recent gutenbrerg times demo with no luck, is there anything else that may highlight this?

Make a single template and link to a single post.

@Addison-Stavlo
Copy link
Contributor

Make a single template

So I made a single.html template in the demo-block-templates folder, and now 'single' shows up in the site editor's template list.

and link to a single post.

added a link in the header to /?p=1. The slotfill for 'Edit Page Template' does not appear. However, on the front-end /?p=1 does properly load using the single.html template. 🤔

@epiqueras
Copy link
Contributor Author

There was a bug with URLs with query strings. I just fixed it, and it works well now.

Thanks for catching it!

Comment on lines -10 to -15
import { pencil } from '@wordpress/icons';
import { createSlotFill, ExternalLink, Button } from '@wordpress/components';
import { ExternalLink, Button } from '@wordpress/components';
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import { useMemo } from '@wordpress/element';

const { Slot, Fill } = createSlotFill( 'BlockEditorURLPopoverLinkViewer' );
Copy link
Contributor

Choose a reason for hiding this comment

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

If the URLPopover has been replaced, why do we need to make changes to this file?

Could there be any cases where this is still used where removing this slot may cause issues?

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 was only added for this, so I am reverting it here before anyone gets a chance to use it.

@Addison-Stavlo
Copy link
Contributor

This is working great!

I am about ready to approve, but just have the question about about the link-viewer file above.

@epiqueras
Copy link
Contributor Author

Answered 😄

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 great and is a really awesome feature to have working in the Site Editor!

Thanks for all your effort 😄

@epiqueras epiqueras force-pushed the update/edit-site-template-navigation-to-use-new-link-control branch from 59cdd3e to 5432e83 Compare February 25, 2020 20:05
@epiqueras epiqueras merged commit d285534 into master Feb 25, 2020
@epiqueras epiqueras deleted the update/edit-site-template-navigation-to-use-new-link-control branch February 25, 2020 21:09
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 25, 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.

3 participants