Skip to content

Commit

Permalink
Navigation block - enable creation from existing WP Menus (#18869)
Browse files Browse the repository at this point in the history
* Create Navigation block from existing WP  Menus (interactive rebase merge)

* Update to use CustomSelect control to match Design

* Update labels and add Create from Pages to dropdown

* Update all options to be under the select dropdown

Updates to match new design by moving all UI buttons in the placeholder under the single dropdown menu.

See #18869 (comment)

* DRY up dropdown menu options

* Rename UI vars to be agnostic to Pages or Menus specifically.

* Improve code readability via naming changes

* Updates dropown UI styles to match visual Design

* Removes divider option and replace with CSS created divider

* Fix size jump depending on dropdown selection

* Fix to not allow selection of PLACEHOLDER option as valid dropdown selection.

* Simplify conditionals

Fixes #18869 (comment)

* Move constants outside of Component

Addresses #18869 (comment)

* Update create from Pages e2e spec to match new Design

* Remove unneeded wait command

* Fix avoid Menu Items requests for invalid Menus

If the selected dropdown option isn’t a Menu then we don’t want to try to fetch its menu items from the REST API.

* Fix disable Create button if Menu Items not yet resolved from API

* Fixes e2e tests for Menus specs

* Refactor out process of clicking on Create button

* Fix test checking for empty block creation if menu is empty

* Fix test don’t show dropdown options for Menus if there aren’t any

* Fix create button enable if create from empty is selected

* Fix empty nav populatoin test

* Fix test create pages from Block using new util to create empty nav block

* Update nomenclature for mock matching to “routes” not URLs

* Fix dropdown to use pointer cursor style instead of text

* Fix button not disabled if Pages are available.

* Make placeholder instruction text contextually aware

* Updates e2e test snapshot

* Disable e2e failures due to unrelated state update issue

See #22830

* Update snapshot

* Revert "Disable e2e failures due to unrelated state update issue"

This reverts commit b6f34bb.

* Update to modern syntax for looping

Addresses #18869 (review)

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/e2e-tests/specs/experiments/navigation.test.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/style.scss

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Fix duplicate entities

Error due to rebasd.

Fixes #18869 (comment)

* Fix if conditional to conform to coding standards

* Refactor menu selects to use core shorthand

Addresses #18869 (comment)

* Revert unintended style mod to CustomSelectControl component

Addresses #18869 (comment)

* Fix selectors to use core shorthand

* Remove CustomSelectControl fixes now in upstream

* Consistently name selector props with get prefix when function

Addresses #18869 (comment)

* Rename var to better reflect purpose and avoid ambiguity

Addresses #18869 (comment)

* Update function name to prefix with verb for clarity

Addresses #18869 (comment)

* Update case so that placeholder is a single word

Addresses #18869 (comment)

* Update packages/block-library/src/navigation/create-data-tree.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/create-data-tree.js

Co-authored-by: Daniel Richards <[email protected]>

* Memozie dropdown options to avoid re-renders

Addresses #18869 (comment)

* Rename to disambiguate dropdown term

* Adds @return to docblock

* Normalise selector format

* Avoid setState re-render for same option selection

* Update to show placeholder loading state when requesting pages or menus.

* Fixes loading spinner alignment

* Update to use var to store ref to common state property

* Apply useCallback to utility function

* Apply useCallback to improve perf

* FIx e2e test to wait for dropdown to be present before interaction

Due to loading spinner we now have to wait on the dropdown before interacting.

* Janitorial - fix to single quotes

* Updates dropdown divider to rely on classname over placement

This fix will work once a complementary update has been applied to CustomSelectControl to enable the options to have a custom classname applied.

* Fix double with single quotes

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Move fixture to subfolder

Fixes #18869 (comment)

Co-authored-by: Daniel Richards <[email protected]>
  • Loading branch information
getdave and talldan authored Jun 10, 2020
1 parent 355abf8 commit 7567111
Show file tree
Hide file tree
Showing 7 changed files with 2,109 additions and 95 deletions.
39 changes: 39 additions & 0 deletions packages/block-library/src/navigation/create-data-tree.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* Creates a nested, hierarchical tree representation from unstructured data that
* has an inherent relationship defined between individual items.
*
* For example, by default, each element in the dataset should have an `id` and
* `parent` property where the `parent` property indicates a relationship between
* the current item and another item with a matching `id` properties.
*
* This is useful for building linked lists of data from flat data structures.
*
* @param {Array} dataset linked data to be rearranged into a hierarchical tree based on relational fields.
* @param {string} id the property which uniquely identifies each entry within the array.
* @param {*} relation the property which identifies how the current item is related to other items in the data (if at all).
* @return {Array} a nested array of parent/child relationships
*/
function createDataTree( dataset, id = 'id', relation = 'parent' ) {
const hashTable = Object.create( null );
const dataTree = [];

for ( const data of dataset ) {
hashTable[ data[ id ] ] = {
...data,
children: [],
};
}
for ( const data of dataset ) {
if ( data[ relation ] ) {
hashTable[ data[ relation ] ].children.push(
hashTable[ data[ id ] ]
);
} else {
dataTree.push( hashTable[ data[ id ] ] );
}
}

return dataTree;
}

export default createDataTree;
Loading

0 comments on commit 7567111

Please sign in to comment.