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

Nav Block - enable page creation from within Block #19775

Merged
merged 171 commits into from
Feb 17, 2020
Merged
Show file tree
Hide file tree
Changes from 167 commits
Commits
Show all changes
171 commits
Select commit Hold shift + click to select a range
49ef0eb
Adds new create component to search results
getdave Jan 21, 2020
6758a60
Styling and i18n
getdave Jan 21, 2020
f3f74f9
Display approximation of Page slug to be created
getdave Jan 21, 2020
7046ff8
Fix to ensure border above create button is displayed
getdave Jan 21, 2020
1269745
Implement prototype async load of created Page
getdave Jan 21, 2020
0ff7ddf
Add state and UI to represent link being in a resolving/loading state
getdave Jan 21, 2020
78cf21a
add basic API integration (inline in component)
marekhrabe Jan 21, 2020
4dc6b3c
actually create pages, not posts
marekhrabe Jan 21, 2020
9ce1457
Add API to control display of the Create functionality on LinkControl
getdave Jan 22, 2020
79f4db7
Adds initial tests for Create button feature
getdave Jan 22, 2020
b4a26cd
Add more test use case data
getdave Jan 22, 2020
46b5312
extract API call to prop function
marekhrabe Jan 22, 2020
6e5dd16
swap api fetch with dispatch
marekhrabe Jan 22, 2020
0aa60c6
Improve a11y of label
getdave Jan 22, 2020
cf9cd62
Adds coverage for creation of Link and update of “Selected” UI
getdave Jan 22, 2020
c7863bb
Adds tests to cover scenarios where Create Page option should NOT be …
getdave Jan 22, 2020
8e29dad
Fix tests to avoid edge cases
getdave Jan 22, 2020
b9f4d80
Fix test to expose bug in implementation
getdave Jan 22, 2020
f32ea3c
Fix bug introduced in tests
getdave Jan 22, 2020
2f31fa7
Hide Create option if suggestion is a single Direct (URL) result only.
getdave Jan 22, 2020
a410810
remove temporary loading state
marekhrabe Jan 22, 2020
a59b971
Promote Create button to top level suggestion.
getdave Jan 23, 2020
38e9be5
Reinstate full test conditions
getdave Jan 23, 2020
9914409
Fix bug whereby editing state was no disabled follow successful onChange
getdave Jan 23, 2020
e148a12
Allow create button to display for initial suggestions
getdave Jan 23, 2020
5f24acb
Improve test code comments
getdave Jan 23, 2020
4370ff1
Tweaks to code layout and formatting
getdave Jan 23, 2020
55f3e26
Generalise prop to enable on the fly creation of entities
getdave Jan 23, 2020
139bedf
Improve code comments around promoting CREATE option to a first class…
getdave Jan 23, 2020
11e40f2
support other post types in create function
marekhrabe Jan 23, 2020
28ee868
Use generated Ids for `id` prop of faux suggestions rather than ever …
getdave Jan 23, 2020
c6cab25
Remove Create option from initial suggestions
getdave Jan 24, 2020
c93a877
Fix broken tests due to incorrect faux API response mock format
getdave Jan 24, 2020
92c73e3
Fix test by relaxing type checking on falsey value
getdave Jan 24, 2020
c1c1f18
Catch invalid saveEntityRecord response types and throw error
getdave Jan 24, 2020
c3048be
Add Error handling to LinkControl for Creating Entities
getdave Jan 24, 2020
47a2351
Fix reset button positioning when error Notice is displayed above sea…
getdave Jan 24, 2020
0799ed8
Force repopulation of search results on create button failure.
getdave Jan 24, 2020
6bc9df0
Avoid showing Create UI when there is not input value
getdave Jan 27, 2020
1949c91
Moves error note below search input UI
getdave Jan 27, 2020
9206a44
Remove forceUpdate
getdave Jan 29, 2020
6cebe7c
Refactor out a handle create function
getdave Jan 29, 2020
26aa318
Extract common handler for selecting suggestion.
getdave Jan 29, 2020
83bef9f
Add test (failing) to cover creation of entities via keyboard
getdave Jan 30, 2020
7bacea1
Resolve rebase errors
getdave Jan 30, 2020
8d10183
Removes unused keypress handler.
getdave Jan 31, 2020
7a644a2
Remove redundant onKeyDown prop
getdave Jan 31, 2020
5b959d9
Improve naming of handler functions to better reflect purpose
getdave Jan 31, 2020
7cd70f2
Fix to allow keyboard and form submit to handle entity creation
getdave Jan 31, 2020
decd4de
Tweak to error positioning styling
getdave Jan 31, 2020
0f09491
Update to ensure created Page entities conform to object schema requi…
getdave Jan 31, 2020
4c7206a
Include test for loading state in create entity tests
getdave Jan 31, 2020
3263b5e
Fix errors introduced during rebase
getdave Feb 4, 2020
cc9bc97
Fix implementation broken due to rebase.
getdave Feb 4, 2020
c28a41f
Add i18n for Loading state
getdave Feb 4, 2020
579490c
Ensure correct timing of stopEditing by awaiting entity creation promise
getdave Feb 4, 2020
faaf3fa
Fixes render conditionals to be mutually exclusive
getdave Feb 4, 2020
db73fd5
Fix broken conditional exposed by test failures.
getdave Feb 4, 2020
c644a60
Fix to stop users without create pages permission seeing the Create e…
getdave Feb 4, 2020
8203176
Add test to verify Create UI not shown if valid handler not provided …
getdave Feb 4, 2020
fe7a96f
Renamed 'Loading...' to 'Creating Page' to match mockup
jeryj Feb 4, 2020
3263bb5
Adds the <Spinner> component to the Creating Page loading state
jeryj Feb 4, 2020
b192520
Reduced padding on bottom of LinkControl list results and moved error…
jeryj Feb 4, 2020
ee4ce2c
Only add separator when it needs separating
obenland Feb 4, 2020
996a992
Committed formatted js
jeryj Feb 4, 2020
b5e0856
Fixed broken unit test for checking 'Loading' string instead of updat…
jeryj Feb 4, 2020
f6adf54
Removed uniqueID from Manual URLs in Navigation Link results from Lin…
jeryj Feb 4, 2020
81e2c4d
Remove unrequired eslint disable rule
getdave Feb 5, 2020
5780610
Update packages/block-editor/src/components/link-control/index.js
getdave Feb 5, 2020
fb135c1
Rename `errorMsg` prop to be unabbreviated for clarity.
getdave Feb 5, 2020
f67c538
Remove unnecessary cast to Boolean
getdave Feb 5, 2020
c38f072
Update to utilise `rendered` title value.
getdave Feb 5, 2020
6f97a87
Remove redundant prop usage
getdave Feb 5, 2020
015e5d3
Restore commented out test
getdave Feb 5, 2020
5fe3d2a
Update to invert create entity “type” dependency
getdave Feb 5, 2020
a623d85
Removes outdated `showCreateEntity` prop
getdave Feb 5, 2020
e2aff99
Fix so that CREATE option not displayed if result is a direct entry URL
getdave Feb 5, 2020
704341c
Fix typo
getdave Feb 5, 2020
c81c7a7
Adds docblock to newly extracted function for clarity
getdave Feb 5, 2020
27d534c
Corrects comment which implied a specific visual layout and DOM order
getdave Feb 5, 2020
1bbd5d3
Fix to use standardised “gray” var reference
getdave Feb 5, 2020
4119ddb
Correct comment to reference the correct property.
getdave Feb 5, 2020
64fc2b2
Remove partially applied function as not necessary
getdave Feb 5, 2020
313dad2
Reinstate descriptive function name
getdave Feb 5, 2020
22a207f
Rename `createEntity` prop to `createSuggestion`
getdave Feb 5, 2020
3ef5de4
Attempt update of type definitions
getdave Feb 5, 2020
01b9727
Avoid need to use entity term where making it more generic can avoid …
getdave Feb 5, 2020
3049729
Remove unused timeout HOC
getdave Feb 5, 2020
c63f8e1
Fix misnamed property
getdave Feb 5, 2020
7496092
Update Nav Block create handler to use term “Page” to better reflect …
getdave Feb 5, 2020
52dd8fe
Refactor handleCreatePage to async/await to avoid nesting
getdave Feb 5, 2020
07463be
Set url items from LinkControl to have sanitized url as the id and up…
jeryj Feb 5, 2020
79c6064
Reinstate keyboard handling of suggestion selection bug fix.
getdave Feb 5, 2020
a6bd883
Update comment to better reflect need for `title` and `url` props to …
getdave Feb 5, 2020
f2609b6
Remove unwanted reference to entity type.
getdave Feb 5, 2020
e176aa1
Corrects usage of aria-label and aria-labelled by on the link control…
jeryj Feb 5, 2020
7149b44
Attempt to fix Typescript docblock alignment
getdave Feb 5, 2020
6dae057
Updated hardcoded color values to scss color variables
jeryj Feb 5, 2020
ff4701d
add e2e test for creating page from nav
marekhrabe Feb 6, 2020
435778c
accomodate for self-closing link popover after selecting link (preven…
marekhrabe Feb 6, 2020
53ec1d5
update comment to match expected test result
marekhrabe Feb 6, 2020
ac3eb3d
Fix to cancel pending promises on unmount to avoid state updates
getdave Feb 6, 2020
9f004ca
Make arbitary CSS value correspond to standardised var
getdave Feb 6, 2020
0aaa082
Removes manual aria live in favour of speak and @wordpress/a11y
getdave Feb 6, 2020
5615e7f
Remove unwanted whitespace.
getdave Feb 6, 2020
9a04df7
Rename var to lowercase
getdave Feb 6, 2020
56ea4d1
Avoid unwanted arial-label* roles for visually hidden elements
getdave Feb 6, 2020
2530978
Move cancellable refs to component scope.
getdave Feb 6, 2020
56fabd5
Lightened border color between link control suggestions and create ne…
jeryj Feb 6, 2020
483ecc1
Changed Create new Page text to New Page to match design
jeryj Feb 6, 2020
7e25eea
Added <mark> to New page title when creating a new page in the link c…
jeryj Feb 6, 2020
bf754e4
Make page title of new page creation darker
jeryj Feb 6, 2020
a1b09d3
Adjusted positioning on the create new page button padding and centering
jeryj Feb 6, 2020
9ea5142
Added clarifying comment on negative margin CSS
jeryj Feb 6, 2020
a239257
Correct tests to select by aria-label now aria-labelledby is removed.
getdave Feb 6, 2020
a93821d
Correct test to look for new Create button wording
getdave Feb 7, 2020
86dfc0d
Fix to use cancelable async handler and call stopEditing
getdave Feb 8, 2020
b115c9f
Refactor select handlers to use async/await
getdave Feb 8, 2020
0842cc4
Move function invocation within try/catch boundary
getdave Feb 10, 2020
219af6b
Remove test spying on speak HOC as this isn’t possible via `LinkContr…
getdave Feb 10, 2020
e3db29c
Remove superflous visually hidden text in favour of aria-label
getdave Feb 10, 2020
2a6103c
Fix space vs tabs linting issue
getdave Feb 10, 2020
2978a24
Correct spelling typos
getdave Feb 10, 2020
05c4982
Correct prop rename error from rebase
getdave Feb 10, 2020
c2ff268
Fix missing references
getdave Feb 10, 2020
6de5fa1
Remove duplicate render of LinkControlSearchInput introduced during r…
getdave Feb 10, 2020
97d1050
Removes unnecessary closing of Link UI
getdave Feb 11, 2020
50f436d
Adds documentation for createSuggestion prop
getdave Feb 11, 2020
e30d545
Restore Link Settings to be always visable as per https://github.com/…
getdave Feb 11, 2020
1065983
Update e2e snapshot
getdave Feb 11, 2020
8df3050
Revert "Update e2e snapshot"
getdave Feb 11, 2020
d42cc27
Wait for rich-text to be focused instead of waiting for link control …
jeryj Feb 11, 2020
dd5d124
Added a check on the active element to make sure the focused block ma…
jeryj Feb 11, 2020
58b3823
Update test to target specific input field for focus state rather tha…
getdave Feb 12, 2020
3c5b712
Refactor e2e test to be absolutelty 100% sure we’re in the input befo…
getdave Feb 12, 2020
2867ebf
Attempt to fix e2e test via simplifying selection of create button
getdave Feb 12, 2020
bd8f05c
Ensure Create button is “in view” by removing other results.
getdave Feb 12, 2020
156312d
Provide more context on why we mock search and create API requests in…
getdave Feb 12, 2020
e524060
Updated routes on mock responses in e2e navigation tests and snapshot…
jeryj Feb 12, 2020
b4c932f
Added description and documentation to updateActiveNavigatinoLink
jeryj Feb 12, 2020
73eeefc
More explicity select which suggestion we want in updateActiveNavigat…
jeryj Feb 12, 2020
0087c57
Await input focus before selecting the label on updateActiveNavigatio…
jeryj Feb 12, 2020
24c3680
Fixed xpath selector in updateActiveNavigationLink and made the searc…
jeryj Feb 12, 2020
8a3e9f2
Remove duplicate error notice
getdave Feb 13, 2020
6137f6f
Remove superflous prop
getdave Feb 13, 2020
a2c7667
Simply listbox labelling for a11y
getdave Feb 13, 2020
8b29067
Remove manual speak of Notice as it’s now built in to the component
getdave Feb 13, 2020
cd9ab52
Remove requirement to pass a Promise for `createSuggestion` prop
getdave Feb 13, 2020
2fe9a5c
Handle cancellable handler props using refs
getdave Feb 13, 2020
415d4d5
Fix Promise flow so that stopEditing is not called on createSuggestio…
getdave Feb 14, 2020
c6305e6
Fix rebase regressions.
getdave Feb 14, 2020
6289a0c
Remove cleanForSlug
getdave Feb 14, 2020
e9845da
Removes `id` prop from “Create” result and uses static string for Rea…
getdave Feb 14, 2020
4b10550
Fix e2e test snapshot to account for using full URL as the suggestion…
getdave Feb 14, 2020
d54a682
Remove explicit “politeness” and use default settings
getdave Feb 14, 2020
ef0c09c
Merge branch 'master' into add/create-new-page-within-nav-block
jeryj Feb 14, 2020
c11ff36
Update docs to distinguish suggestion from value.
getdave Feb 17, 2020
3a6e8e3
Adds comment for “Create” constant
getdave Feb 17, 2020
4b51533
Adds type def for suggestion and reformats type defs
getdave Feb 17, 2020
d081116
Fix to not render create button if there is no search term.
getdave Feb 17, 2020
05e0b42
Reinstate new line to separate imports from code body.
getdave Feb 17, 2020
382683f
Removes unecessary response checking on advice from @aduth
getdave Feb 17, 2020
df38a5d
Remove stray unwanted comments from tests
getdave Feb 17, 2020
cbe4bd7
Update novmenclature to confirm to suggestion as opposed to entity
getdave Feb 17, 2020
c5e1130
Remove redundant portion of conditional
getdave Feb 17, 2020
437ed18
Improves method name and supporting comments and doc block.
getdave Feb 17, 2020
8bd0c1e
Refactor search results label to utilise VisuallyHidden component
getdave Feb 17, 2020
f70a2bc
Consolidate createSuggestion handling logic within single method
getdave Feb 17, 2020
665f76e
Add punctuation to comments
getdave Feb 17, 2020
ab1a199
Update error handling to include the message prop of the Error object…
getdave Feb 17, 2020
9a0e6b1
Fix broken comment
getdave Feb 17, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 59 additions & 2 deletions packages/block-editor/src/components/link-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Default properties include:

- Type: `Array`
- Required: No
- Default:
- Default:
```
[
{
Expand Down Expand Up @@ -54,7 +54,7 @@ Value change handler, called with the updated value if the user selects a new li
onChange={ ( nextValue ) => {
console.log( `The selected item URL: ${ nextValue.url }.` );
}
/>
/>
```

### showInitialSuggestions
Expand All @@ -71,3 +71,60 @@ Whether to present initial suggestions immediately.
- Required: No

If passed as either `true` or `false`, controls the internal editing state of the component to respective show or not show the URL input field.


### createSuggestion

- Type: `function`
- Required: No

Used to handle the dynamic creation of new suggestions within the Link UI. When
the prop is provided, an option is added to the end of all search
results requests which when clicked will call `createSuggestion` callback
(passing the current value of the search `<input>`) in
order to afford the parent component the opportunity to dynamically create a new
link `value` (see above).

This is often used to allow on-the-fly creation of new entities (eg: `Posts`,
`Pages`) based on the text the user has entered into the link search UI. For
example, the Navigation Block uses this to create Pages on demand.

When called, `createSuggestion` may return either a new suggestion directly or a `Promise` which resolves to a
new suggestion. Suggestions have the following shape:

```js
{
id: // unique identifier
type: // "url", "page", "post"...etc
title: // "My new suggestion"
url: // any string representing the URL value
}
```

#### Example
```jsx
// Promise example
<LinkControl
createSuggestion={ async (inputText) => {
// Hard coded values. These could be dynamically created by calling out to an API which creates an entity (eg: https://developer.wordpress.org/rest-api/reference/pages/#create-a-page).
return {
id: 1234,
type: 'page',
title: inputText,
url: '/some-url-here'
}
}}
/>

// Non-Promise example
<LinkControl
createSuggestion={ (inputText) => (
{
id: 1234,
type: 'page',
title: inputText,
url: '/some-url-here'
}
)}
/>
```
Loading