Edit Site: Implement post switcher and integrate with "navigate to link". #22543

epiqueras · 2020-05-22T01:14:14Z

Description

This PR adds a post picker to the page switcher in the site editor that allows you to load a specific post and its template. For this, a minor modification was made to LinkControl to allow disabling direct/custom entries as these wouldn't make sense in this context unless we decide to support creating new posts here in the future.

This PR also integrates this new functionality with the "navigate to link" functionality by adding support for link types and IDs to the inline link format.

This PR also fixes a small issue that these new features surfaced in the site editor when useEntityBlockEditor tries to parse initial content for an entity that is still loading.

How has this been tested?

It was verified that navigating to a post either from the page switcher or from an inline link, as shown in the GIF below, works as expected.

Screenshots

Types of Changes

New Feature: The site editor now has a post picker in the page switcher that is integrated with the "navigate to link" functionality.
New Feature: LinkControl now supports a prop for disabling direct/custom entries.
New Feature: The inline link format now tracks link types and IDs.
Bug Fix: useEntityBlockEditor now works as expected with entities that are not loaded yet.

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.

epiqueras · 2020-05-22T01:17:27Z

Noting that the border overflow in the link suggestions' active state is also present on master.

noahtallen · 2020-05-22T01:39:02Z

Really cool stuff! I especially like the follow-through functionality on links. I’ll look through everything more tomorrow, but my main concern at first glance is that we’re overloading the page/category/post selector way too much. It’s really busy and seems difficult to navigate easily. Again, probably more of a design question that can be resolved in the future, but good to keep in mind.

epiqueras · 2020-05-22T01:44:52Z

Thanks!

Yeah, I agree. There is already a re-design in the works that moves it to a left sidebar and supports nested paths in a stack-carousel-like way.

It should be pretty easy to move to that once we move settings into the store.

packages/edit-site/src/components/block-editor/index.js

packages/edit-site/src/components/page-switcher/index.js

packages/block-editor/src/components/link-control/index.js

packages/edit-site/src/components/navigate-to-link/index.js

noahtallen · 2020-05-22T21:22:41Z

Not sure when this bug was introduced, but I can't really switch to new templates. For example, if I select "sample page" and then create a new template and call it "page", the blocks in the editor do not change to be blank, they just stay the same as the index template. visiting the wp_template CPT list in wp-admin shows that the page template is blank there.

I do see a couple of console errors:

This one has been around for a while:

Can't access property "perPage", _ref$context$query is undefined

and

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

both trace to QueryLoopEdit

epiqueras · 2020-05-22T21:37:11Z

That's odd. I can't reproduce it. In any case, I'm following up on this PR with the new template creation flow, which doesn't allow for arbitrarily named templates, so this issue will no longer be relevant.

noahtallen · 2020-05-22T21:41:08Z

which doesn't allow for arbitrarily named templates

isn't page part of the template hierarchy?

noahtallen · 2020-05-22T21:44:01Z

I can't reproduce it

Weird, I can replicate this pretty reliably. Here's a gif after wiping the DB. I expect the new "page" template to be blank so that I can add the blocks I want:

epiqueras · 2020-05-22T22:25:17Z

isn't page part of the template hierarchy?

Yes, but the way templates are created will be different.

noahtallen

my main comments should be resolved in the future:

settings.page should be more clear and intuitive once we move it to the store.
issues with new templates should be resolved in the new work around creating templates

so this looks good to me.

paaljoachim · 2020-05-22T22:43:52Z

I like this feature!

I am trying to test the PR at gutenberg.run. But it looks like there is no access to test out Full Site Editing. What I noticed is that the Gutenberg plugin is not installed, so I installed, activated and turned on the "Full Site Editing" experiment. Then went to the "Site Editor" to test out this feature, but end up at a blank page. http://dvbeazhy.gutenberg.run/wp-admin/admin.php?page=gutenberg-edit-site I was not able to get further.

epiqueras · 2020-05-22T23:27:51Z

Did you turn on the demo templates experiment?

paaljoachim · 2020-05-22T23:50:45Z

That was a duh moment for me. I just turned on "Full Site Editing" and not "Full Site Editing Demo Templates". They are both on now atleast...
Based on your animated gif Gutenberg.run "Site Editor" screen looks different.
This what I see:

Clicking some text to link in a page/post no options are seen. It does not show any Sample page or post Hello world drop down option.

noahtallen · 2020-05-23T00:02:22Z

Based on your animated gif Gutenberg.run "Site Editor" screen looks different.

that's definitely a few commits out of date. 🤔 When I load this PR in gutenberg.run (http://gutenberg.run/22543), it tells me "error" after trying to install the plugin. (could possibly happen because of the merge conflict)

…nk".

github-actions · 2020-05-23T00:11:36Z

Size Change: +670 B (0%)

Total Size: 1.12 MB

Filename	Size	Change
`build/block-directory/index.js`	6.93 kB	+1 B
`build/block-editor/index.js`	105 kB	+74 B (0%)
`build/block-library/index.js`	119 kB	-1 B
`build/blocks/index.js`	48.1 kB	-3 B (0%)
`build/components/index.js`	190 kB	+7 B (0%)
`build/core-data/index.js`	11.4 kB	+18 B (0%)
`build/data-controls/index.js`	1.29 kB	+4 B (0%)
`build/data/index.js`	8.42 kB	-1 B
`build/edit-navigation/index.js`	6.63 kB	+3 B (0%)
`build/edit-post/index.js`	302 kB	+2 B (0%)
`build/edit-site/index.js`	13.8 kB	+341 B (2%)
`build/edit-site/style-rtl.css`	5.53 kB	+77 B (1%)
`build/edit-site/style.css`	5.53 kB	+77 B (1%)
`build/format-library/index.js`	7.71 kB	+71 B (0%)
`build/list-reusable-blocks/index.js`	3.13 kB	+2 B (0%)
`build/media-utils/index.js`	5.29 kB	+1 B
`build/nux/index.js`	3.4 kB	+1 B
`build/rich-text/index.js`	14.8 kB	-2 B (0%)
`build/server-side-render/index.js`	2.67 kB	-2 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/api-fetch/index.js`	3.4 kB	0 B
`build/autop/index.js`	2.83 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	790 B	0 B
`build/block-directory/style.css`	791 B	0 B
`build/block-editor/style-rtl.css`	10.9 kB	0 B
`build/block-editor/style.css`	10.9 kB	0 B
`build/block-library/editor-rtl.css`	7.17 kB	0 B
`build/block-library/editor.css`	7.17 kB	0 B
`build/block-library/style-rtl.css`	7.48 kB	0 B
`build/block-library/style.css`	7.48 kB	0 B
`build/block-library/theme-rtl.css`	684 B	0 B
`build/block-library/theme.css`	686 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/components/style-rtl.css`	17.1 kB	0 B
`build/components/style.css`	17.1 kB	0 B
`build/compose/index.js`	9.24 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	771 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.11 kB	0 B
`build/edit-navigation/style-rtl.css`	857 B	0 B
`build/edit-navigation/style.css`	856 B	0 B
`build/edit-post/style-rtl.css`	12.2 kB	0 B
`build/edit-post/style.css`	12.2 kB	0 B
`build/edit-widgets/index.js`	7.87 kB	0 B
`build/edit-widgets/style-rtl.css`	4.58 kB	0 B
`build/edit-widgets/style.css`	4.57 kB	0 B
`build/editor/editor-styles-rtl.css`	425 B	0 B
`build/editor/editor-styles.css`	428 B	0 B
`build/editor/index.js`	44.6 kB	0 B
`build/editor/style-rtl.css`	5.06 kB	0 B
`build/editor/style.css`	5.06 kB	0 B
`build/element/index.js`	4.65 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`	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/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/notices/index.js`	1.79 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.56 kB	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 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}

epiqueras · 2020-05-23T01:18:04Z

Weird, I can replicate this pretty reliably. Here's a gif after wiping the DB. I expect the new "page" template to be blank so that I can add the blocks I want:

I found what's causing this. It's an issue with initialBlocks being undefined, not overwriting the last value in the block editor store. Eventually, the block editor calls onInput and edits the new entity with the previous entity's blocks.

I'll push up a fix.

noahtallen · 2020-05-25T17:21:13Z

I'll push up a fix.

thanks for investigating!

epiqueras added [Type] Bug An existing feature does not function as intended [Feature] Full Site Editing [Type] Feature New feature to highlight in changelogs. [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels May 22, 2020

epiqueras requested a review from noahtallen May 22, 2020 01:14

epiqueras requested review from ellatrix, etoledom, jorgefilipecosta, nerrad, SergioEstevao and youknowriad as code owners May 22, 2020 01:14

epiqueras self-assigned this May 22, 2020

epiqueras force-pushed the add/edit-site-post-search branch from b540617 to 3a387f8 Compare May 22, 2020 01:18

noahtallen reviewed May 22, 2020

View reviewed changes

noahtallen approved these changes May 22, 2020

View reviewed changes

epiqueras added 3 commits May 22, 2020 17:03

Format Library: Support inline link types and IDs.

e638c1f

Core Data: Fix useEntityBlockEditor initialization.

5f443b3

Block Editor: Support disabling direct entries in the link control.

4c0e8e6

epiqueras added 2 commits May 22, 2020 17:04

Edit Site: Implement post switcher and integrate with "navigate to li…

cb1fe28

…nk".

Edit Site: Change post picker placeholder.

81d7994

epiqueras force-pushed the add/edit-site-post-search branch from 37d35fe to 81d7994 Compare May 23, 2020 00:04

Format Library: Don't set undefined attributes.

d75ac75

Entity Provider: Fix block initialization.

9b2dbad

epiqueras merged commit b186743 into master May 23, 2020

epiqueras deleted the add/edit-site-post-search branch May 23, 2020 05:38

github-actions bot added this to the Gutenberg 8.2 milestone May 23, 2020

epiqueras mentioned this pull request May 24, 2020

Edit Site: New template creation flow. #22586

Merged

6 tasks

talldan mentioned this pull request Nov 12, 2020

What is the purpose of adding the data-type and data-id attributes to internal links? #26911

Closed

mtias mentioned this pull request Jun 27, 2022

The great unification #41717

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Edit Site: Implement post switcher and integrate with "navigate to link". #22543

Edit Site: Implement post switcher and integrate with "navigate to link". #22543

epiqueras commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen left a comment

paaljoachim commented May 22, 2020

epiqueras commented May 22, 2020

paaljoachim commented May 22, 2020 •

edited

Loading

noahtallen commented May 23, 2020

github-actions bot commented May 23, 2020 •

edited

Loading

epiqueras commented May 23, 2020

noahtallen commented May 25, 2020

Edit Site: Implement post switcher and integrate with "navigate to link". #22543

Edit Site: Implement post switcher and integrate with "navigate to link". #22543

Conversation

epiqueras commented May 22, 2020

Description

How has this been tested?

Screenshots

Types of Changes

Checklist:

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen commented May 22, 2020

noahtallen commented May 22, 2020

epiqueras commented May 22, 2020

noahtallen left a comment

Choose a reason for hiding this comment

paaljoachim commented May 22, 2020

epiqueras commented May 22, 2020

paaljoachim commented May 22, 2020 • edited Loading

noahtallen commented May 23, 2020

github-actions bot commented May 23, 2020 • edited Loading

epiqueras commented May 23, 2020

noahtallen commented May 25, 2020

paaljoachim commented May 22, 2020 •

edited

Loading

github-actions bot commented May 23, 2020 •

edited

Loading