Nav Block - enable page creation from within Block by getdave · Pull Request #19775 · WordPress/gutenberg

getdave · 2020-01-21T10:20:00Z

This PR aims to allow users to create new Pages (only) on the fly from within the Navigation Block.

A Note on coupling with WordPress

Note that the LinkControl is within the Block Editor which is supposed to be "unaware" of WordPress. That said the existing implementation in master is already coupled to WordPress via URLInput which requests data from WP endpoints. Therefore we're following existing precedent here by introducing a prop to pass a handler function create entities on the fly. This is entirely optional and can be configured by the developer so it is less coupled to WP than you might imagine. There is a concept of "creating something" but that's it. We feel this is a good compromise.

Testing Instructions

Clear / delete your Posts/Pages.
Check out PR.
Create new Page or Post.
Insert Navigation Block.
Create a Page
- start typing anything that could be a valid Page name into the search field
- see suggestion to "Create Page"
- click to select and create Page. Please note: Link UI will be auto-closed due to this intentional change.
- when you reopen the Link UI you should see the Page has been created.
- verify Page has been created under Dashboard > Pages

Other testing scenarios

Ensure that "Create" suggestion is not show when entering a URL.
Try "unusual" values in the input to try and break things (special chars...etc).
Create a user without permissions to create pages (contributor?). Check that the UI for creating a Page is not exposed to them within the Nav Block.

Todo

How has this been tested?

Unit tests. Manual tests.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

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. .

getdave · 2020-01-21T13:25:56Z

Question:

In this implementation you cannot use the arrow to move to the Create Page option because it is not one of the suggestions held within the state of URLInput. You can however use TAB to move to the Create Page item.

Is this valid a11y wise? My concern is that the Create Page option is contained within the listbox which means it probably should be selectable using the arrows?

If we want to promote the Create Page item to be a suggestion then it's going to be quite difficult. That said it might be possible.

getdave · 2020-01-22T17:46:30Z

Note: in order to make this PR work we're going to need:

Ability to detect URLs vs Entity searches more reliably - ~~here is a PR Try/improve URI detection in <LinkControl /> #19816~~ @aduth is working on a PR.
To promote the "Create" button to be a first-class suggestion return from fetchSearchSuggestions - without this it's not going to show up when there are no matching search results from entities API as dropdown only displays when there are valid suggestions in the state of URLInput.

Will tackle this tomorrow.

packages/block-library/src/navigation-link/edit.js

getdave

Noticed some inconsistencies and problems building up. We should look to tackle these before they become any more "baked in" @marekhrabe.

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

packages/block-editor/src/components/link-control/search-create-button.js

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

getdave · 2020-01-30T23:07:13Z

@aduth I rebased this branch and found a tonne of conflicts as a result of your refactoring of LinkControl.

If you have time to glance at the rebased file in this branch I'd feel a lot more confident knowing the rebase hadn't nuked any of your changes.

aduth · 2020-01-31T00:45:26Z

I can plan to take a look in my morning. Are you otherwise expecting this to be review ready?

getdave · 2020-01-31T00:51:52Z

I can plan to take a look in my morning.

Thanks (with caveat below).

Are you otherwise expecting this to be review ready?

No. Actually there is a bug whereby hitting ENTER on the "create" suggestion doesn't work. The form onSubmit isn't ever called as far as I can see.

Maybe best wait until that's fixed.

That said, weren't you looking at the handling of form onSubmit?

aduth · 2020-01-31T00:55:50Z

What I was working on with regards to the submission is already merged, so if there's an issue, it's not one I'd be aware of or am actively working on.

See: #19651

getdave · 2020-02-04T11:29:44Z

Working on rebase to accommodate changes from #19462

jeryj

So much great work in here, @getdave! IMO, anything else that needs fixed other than very, very minor things should be broken out into new Issues and PRs, as this one has grown so much as to be difficult to review and discuss. I think this is in a mergeable state. Great work! 🚢

aduth

Minor design note: I barely noticed there was even an option for creating a page here, and that's despite the fact that I have scrollbars shown to be always visible, which I find that most macOS users don't (but should!).

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

aduth · 2020-02-14T18:30:09Z

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

+						return (
+							<LinkControlSearchItem
+								key={ `${ suggestion.id }-${ suggestion.type }` }
+								itemProps={ buildSuggestionItemProps(
+									suggestion,
+									index
+								) }
+								suggestion={ suggestion }
+								index={ index }
+								onClick={ () => {
+									stopEditing();
+									onChange( { ...value, ...suggestion } );
+								} }
+								isSelected={ index === selectedSuggestion }
+								isURL={ directLinkEntryTypes.includes(
+									suggestion.type.toLowerCase()
+								) }
+								searchTerm={ inputValue }
+							/>
+						);


It would be nice if we could refactor to reduce the code duplication between this and the LinkControlSearchCreate above. It seems like the two receive largely the same props, with few exceptions.

Only three props are actually shared. I really think given the potential for rebases we should do this in a followup.

Follow up Issue #20271

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

packages/block-editor/src/components/link-control/search-input.js

packages/block-editor/src/components/link-control/search-create-button.js

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

packages/block-editor/src/components/link-control/README.md

getdave · 2020-02-14T22:41:51Z

With approval from Andrew lets fix up his final review notes on Monday next week and get this merged

getdave · 2020-02-17T10:19:45Z

Merge branch 'master' into add/create-new-page-within-nav-block

Did you do a merge here @jeryj?

ef0c09c

Addresses #19775 (comment)

This was a throw back to a previous state of the `LinkControl` component whereby we wanted to render a create option to allow the user to create blank pages. This was removed as a requirement but the component was not fixed to account for that. Addresses: #19775 (comment)

Addresses #19775 (comment)

See * #19775 (comment) * #19775 (comment)

Addresses #19775 (comment)

getdave · 2020-02-17T14:05:48Z

Build failures are due to a known npm Issue/bug.

Previously the code to handle the async flow including error handling was duplicated across two handler props. Consolidating helps DRY things and avoid accidental errors being introduced. Addresses #19775 (comment)

Addresses #19775 (comment)

… if provided. Addresses #19775 (comment)

getdave · 2020-02-17T16:00:25Z

I will merge this shortly following 👍 from @obenland.

obenland

Did a final smoke test with admin, editor, and author roles and everything works as expected.
Really nice work @getdave, thank you for your persistence! Also thanks to @marekhrabe, @jeryj, and @aduth for your tremendous help.

getdave · 2020-02-17T17:11:50Z

Ok that's all folks. It's merged!

getdave added the [Block] Navigation Affects the Navigation Block label Jan 21, 2020

getdave requested a review from marekhrabe January 21, 2020 10:20

getdave assigned marekhrabe and getdave Jan 21, 2020

getdave changed the title ~~Nav Block - enable create page from within Block~~ Nav Block - enable page creation from within Block Jan 21, 2020

This was referenced Jan 22, 2020

Navigation: Add option to create a new page #18900

Closed

Navigation Block: Add ability to create a new post/page #19558

Closed

getdave mentioned this pull request Jan 22, 2020

Try/improve URI detection in <LinkControl /> #19816

Closed

6 tasks

obenland reviewed Jan 22, 2020

View reviewed changes

packages/block-library/src/navigation-link/edit.js Outdated Show resolved Hide resolved

obenland reviewed Jan 22, 2020

View reviewed changes

packages/block-library/src/navigation-link/edit.js Outdated Show resolved Hide resolved

getdave commented Jan 23, 2020

View reviewed changes

getdave marked this pull request as ready for review January 23, 2020 16:58

getdave requested review from Soean, ajitbohra, ellatrix, jorgefilipecosta, talldan and youknowriad as code owners January 23, 2020 16:58

getdave mentioned this pull request Jan 24, 2020

Nav Block: Editing a link should show search results #19647

Closed

WunderBart reviewed Jan 24, 2020

View reviewed changes

packages/block-editor/src/components/link-control/index.js Outdated Show resolved Hide resolved

aduth mentioned this pull request Jan 24, 2020

URL: Conform to URL Living Standard definition of valid URL #19871

Merged

getdave force-pushed the add/create-new-page-within-nav-block branch from 37d322c to 49f0b2e Compare January 30, 2020 23:04

getdave force-pushed the add/create-new-page-within-nav-block branch from d98b989 to 6882363 Compare February 4, 2020 11:08

jeryj approved these changes Feb 14, 2020

View reviewed changes

aduth approved these changes Feb 14, 2020

View reviewed changes

Merge branch 'master' into add/create-new-page-within-nav-block

ef0c09c

Update docs to distinguish suggestion from value.

c11ff36

getdave added 10 commits February 17, 2020 10:22

Adds comment for “Create” constant

3a6e8e3

Addresses #19775 (comment)

Adds type def for suggestion and reformats type defs

4b51533

Addresses #19775 (comment)

Reinstate new line to separate imports from code body.

05e0b42

Addresses #19775 (comment)

Removes unecessary response checking on advice from @aduth

382683f

See * #19775 (comment) * #19775 (comment)

Remove stray unwanted comments from tests

df38a5d

Addresses #19775 (comment)

Update novmenclature to confirm to suggestion as opposed to entity

cbe4bd7

Remove redundant portion of conditional

c5e1130

Addresses #19775 (comment)

Improves method name and supporting comments and doc block.

437ed18

Addresses #19775 (comment)

Refactor search results label to utilise VisuallyHidden component

8bd0c1e

Addresses #19775 (comment)

getdave added 4 commits February 17, 2020 14:22

Consolidate createSuggestion handling logic within single method

f70a2bc

Previously the code to handle the async flow including error handling was duplicated across two handler props. Consolidating helps DRY things and avoid accidental errors being introduced. Addresses #19775 (comment)

Add punctuation to comments

665f76e

Addresses #19775 (comment)

Update error handling to include the message prop of the Error object…

ab1a199

… if provided. Addresses #19775 (comment)

Fix broken comment

9a0e6b1

obenland approved these changes Feb 17, 2020

View reviewed changes

This was referenced Feb 17, 2020

Block Editor: LinkControl: Avoid lingering value properties from previous value #20020

Closed

DRY up LinkControl normal and "Create" suggestions code #20271

Closed

Nav Block "Create" option sometimes requires scroll #20272

Closed

draganescu mentioned this pull request Feb 18, 2020

[Navigation] Don't publish directly and don't render drafts #20282

Closed

getdave mentioned this pull request Sep 23, 2021

Enable ability to create Pages from the inline Link UI #35083

Merged

7 tasks

t-hamano mentioned this pull request Jun 9, 2025

Inserting a draft page via the navigation block can lead to duplicates #70271

Closed

6 tasks

Conversation

getdave commented Jan 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

A Note on coupling with WordPress

Testing Instructions

Other testing scenarios

Todo

How has this been tested?

Screenshots

Types of changes

Checklist:

Uh oh!

getdave commented Jan 21, 2020

Question:

Uh oh!

getdave commented Jan 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

getdave left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

getdave commented Jan 30, 2020

Uh oh!

aduth commented Jan 31, 2020

Uh oh!

getdave commented Jan 31, 2020

Uh oh!

aduth commented Jan 31, 2020

Uh oh!

getdave commented Feb 4, 2020

Uh oh!

jeryj left a comment

Choose a reason for hiding this comment

Uh oh!

aduth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aduth Feb 14, 2020

Choose a reason for hiding this comment

Uh oh!

getdave Feb 17, 2020

Choose a reason for hiding this comment

Uh oh!

getdave Feb 17, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

getdave commented Feb 14, 2020

Uh oh!

getdave commented Feb 17, 2020

Uh oh!

getdave commented Feb 17, 2020

Uh oh!

getdave commented Feb 17, 2020

Uh oh!

obenland left a comment

Choose a reason for hiding this comment

Uh oh!

getdave commented Feb 17, 2020

Uh oh!

Reviewers

getdave commented Jan 21, 2020 •

edited

Loading

getdave commented Jan 22, 2020 •

edited

Loading