From 15521ef98ef20eafe810234754d6a0fe7b641512 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 22 Oct 2021 15:41:01 +1100 Subject: [PATCH 1/8] Try adding featured transforms in Link Control --- .../src/components/link-control/index.js | 2 + .../block-library/src/navigation-link/edit.js | 41 ++++++++++++++++++- 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d39cdfde128172..6381e664000a6c 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -121,6 +121,7 @@ function LinkControl( { createSuggestionButtonText, hasRichPreviews = false, hasTextControl = false, + children, } ) { if ( withCreateSuggestion === undefined && createSuggestion ) { withCreateSuggestion = true; @@ -346,6 +347,7 @@ function LinkControl( { /> ) } + { children } ); } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index cdf230d80b6dbc..69fa88a1196d60 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -7,7 +7,7 @@ import { escape } from 'lodash'; /** * WordPress dependencies */ -import { createBlock } from '@wordpress/blocks'; +import { createBlock, switchToBlockType } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { PanelBody, @@ -324,9 +324,11 @@ export default function NavigationLinkEdit( { hasDescendants, userCanCreatePages, userCanCreatePosts, + thisBlock, } = useSelect( ( select ) => { const { + getBlock, getBlocks, getBlockName, getBlockRootClientId, @@ -371,6 +373,7 @@ export default function NavigationLinkEdit( { 'create', 'posts' ), + thisBlock: getBlock( clientId ), }; }, [ clientId ] @@ -397,6 +400,37 @@ export default function NavigationLinkEdit( { replaceBlock( clientId, newSubmenu ); } + /** + * Add transforms to Link Control + */ + + function LinkControlTransforms( block ) { + const featuredTransforms = [ + 'core/site-logo', + 'core/social-links', + 'core/search', + ]; + return ( + <> + { featuredTransforms.map( ( item, index ) => { + return ( + + ); + } ) } + + ); + } + useEffect( () => { // Show the LinkControl on mount if the URL is empty // ( When adding a new menu item) @@ -706,6 +740,11 @@ export default function NavigationLinkEdit( { ) } onRemove={ removeLink } + children={ + + } /> ) } From ed3ab28beeb6d1a46f8b3bdb5a16867b07a3fe09 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 25 Oct 2021 15:37:10 +1100 Subject: [PATCH 2/8] Change to using render prop with explicit location. --- packages/block-editor/src/components/link-control/index.js | 4 ++-- packages/block-library/src/navigation-link/edit.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 6381e664000a6c..c353a49c9f62d1 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -121,7 +121,7 @@ function LinkControl( { createSuggestionButtonText, hasRichPreviews = false, hasTextControl = false, - children, + renderControlBottom = null, } ) { if ( withCreateSuggestion === undefined && createSuggestion ) { withCreateSuggestion = true; @@ -347,7 +347,7 @@ function LinkControl( { /> ) } - { children } + { renderControlBottom && renderControlBottom() } ); } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 69fa88a1196d60..6cac4700785600 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -740,11 +740,11 @@ export default function NavigationLinkEdit( { ) } onRemove={ removeLink } - children={ + renderControlBottom={ () => ( - } + ) } /> ) } From a9c9031860db0ecca1018084607acea2dc3a7d06 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 25 Oct 2021 17:23:49 +1100 Subject: [PATCH 3/8] Add block icon and use Button component. --- .../block-library/src/navigation-link/edit.js | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 6cac4700785600..f183ee599bc1ff 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -10,6 +10,7 @@ import { escape } from 'lodash'; import { createBlock, switchToBlockType } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { + Button, PanelBody, Popover, TextControl, @@ -22,6 +23,7 @@ import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; import { BlockControls, + BlockIcon, InspectorControls, RichText, __experimentalLinkControl as LinkControl, @@ -325,6 +327,7 @@ export default function NavigationLinkEdit( { userCanCreatePages, userCanCreatePosts, thisBlock, + inserterItems, } = useSelect( ( select ) => { const { @@ -336,6 +339,7 @@ export default function NavigationLinkEdit( { hasSelectedInnerBlock, getSelectedBlockClientId, getBlockParentsByBlockName, + getInserterItems, } = select( blockEditorStore ); const selectedBlockId = getSelectedBlockClientId(); @@ -374,6 +378,9 @@ export default function NavigationLinkEdit( { 'posts' ), thisBlock: getBlock( clientId ), + inserterItems: getInserterItems( + getBlockRootClientId( clientId ) + ), }; }, [ clientId ] @@ -400,31 +407,36 @@ export default function NavigationLinkEdit( { replaceBlock( clientId, newSubmenu ); } + const featuredBlocks = [ + 'core/site-logo', + 'core/social-links', + 'core/search', + ]; + const featuredTransforms = inserterItems.filter( ( item ) => { + return featuredBlocks.includes( item.name ); + } ); /** * Add transforms to Link Control */ - function LinkControlTransforms( block ) { - const featuredTransforms = [ - 'core/site-logo', - 'core/social-links', - 'core/search', - ]; + function LinkControlTransforms( { block, transforms } ) { return ( <> - { featuredTransforms.map( ( item, index ) => { + { transforms.map( ( item, index ) => { return ( - + + { item.title } + ); } ) } @@ -743,6 +755,7 @@ export default function NavigationLinkEdit( { renderControlBottom={ () => ( ) } /> From 250bb9d73f3a7dcf327c626a887060e1e3651bb8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 13:17:21 +1100 Subject: [PATCH 4/8] Add markup and styles --- .../block-library/src/navigation-link/edit.js | 52 ++++++++++++------- .../src/navigation-link/editor.scss | 23 ++++++++ 2 files changed, 56 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index f183ee599bc1ff..2b8b9a89645348 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -11,6 +11,8 @@ import { createBlock, switchToBlockType } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, + Flex, + FlexItem, PanelBody, Popover, TextControl, @@ -421,25 +423,37 @@ export default function NavigationLinkEdit( { function LinkControlTransforms( { block, transforms } ) { return ( - <> - { transforms.map( ( item, index ) => { - return ( - - ); - } ) } - +
+

+ Transform +

+ + { transforms.map( ( item, index ) => { + return ( + + + + ); + } ) } + +
); } diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index a31310c0d8e71c..8ca28a146e8d1c 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -96,3 +96,26 @@ cursor: pointer; } } + +/** +* Link Control Transforms +*/ + +.link-control-transform { + border-top: $border-width solid $gray-400; + padding: 0 $grid-unit-20 $grid-unit-10 $grid-unit-20; +} + +.link-control-transform__subheading { + font-size: 11px; + text-transform: uppercase; + font-weight: 500; + color: $gray-900; + margin-bottom: 1.5em; +} + +.link-control-transform__item { + flex-direction: column; + gap: $grid-unit-10; + height: auto; +} From 307cc8a91926e17a5029389f5aeb30240d244329 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 13:45:31 +1100 Subject: [PATCH 5/8] Update link control docs --- .../block-editor/src/components/link-control/README.md | 7 +++++++ packages/block-editor/src/components/link-control/index.js | 1 + 2 files changed, 8 insertions(+) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index c81f6193718a70..0f597019e6e560 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -192,6 +192,13 @@ A `suggestion` should have the following shape: )} /> ``` +### renderControlBottom + +- Type: `Function` +- Required: No +- Default: null + +A render prop that can be used to pass optional controls to be rendered at the bottom of the component. # LinkControlSearchInput diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index c353a49c9f62d1..14eca7b5c1dcbd 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -94,6 +94,7 @@ import { DEFAULT_LINK_SETTINGS } from './constants'; * @property {Object=} suggestionsQuery Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions. * @property {boolean=} noURLSuggestion Whether to add a fallback suggestion which treats the search query as a URL. * @property {string|Function|undefined} createSuggestionButtonText The text to use in the button that calls createSuggestion. + * @property {Function} renderControlBottom Optional controls to be rendered at the bottom of the component. */ /** From 9e23d7eb490ebff49c7d295545a7b9e1cd082e41 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 13:49:55 +1100 Subject: [PATCH 6/8] Transforms only show for empty link. --- .../block-library/src/navigation-link/edit.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 2b8b9a89645348..cf7931a2869445 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -766,12 +766,18 @@ export default function NavigationLinkEdit( { ) } onRemove={ removeLink } - renderControlBottom={ () => ( - - ) } + renderControlBottom={ + ! url + ? () => ( + + ) + : null + } /> ) } From 0ed8fd2bea05bfd27ffb56f1ca9a65cd7883b599 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 27 Oct 2021 15:38:23 +1100 Subject: [PATCH 7/8] Un-nest function and use getBlockTransformItems --- .../block-library/src/navigation-link/edit.js | 84 +++++++++---------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index cf7931a2869445..ee6d0a8807bdc6 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -283,6 +283,41 @@ function navStripHTML( html ) { return doc.body.textContent || ''; } +/** + * Add transforms to Link Control + */ + +function LinkControlTransforms( { block, transforms, replace } ) { + return ( +
+

Transform

+ + { transforms.map( ( item, index ) => { + return ( + + + + ); + } ) } + +
+ ); +} + export default function NavigationLinkEdit( { attributes, isSelected, @@ -329,7 +364,7 @@ export default function NavigationLinkEdit( { userCanCreatePages, userCanCreatePosts, thisBlock, - inserterItems, + blockTransforms, } = useSelect( ( select ) => { const { @@ -341,7 +376,7 @@ export default function NavigationLinkEdit( { hasSelectedInnerBlock, getSelectedBlockClientId, getBlockParentsByBlockName, - getInserterItems, + getBlockTransformItems, } = select( blockEditorStore ); const selectedBlockId = getSelectedBlockClientId(); @@ -380,7 +415,8 @@ export default function NavigationLinkEdit( { 'posts' ), thisBlock: getBlock( clientId ), - inserterItems: getInserterItems( + blockTransforms: getBlockTransformItems( + [ getBlock( clientId ) ], getBlockRootClientId( clientId ) ), }; @@ -414,48 +450,9 @@ export default function NavigationLinkEdit( { 'core/social-links', 'core/search', ]; - const featuredTransforms = inserterItems.filter( ( item ) => { + const featuredTransforms = blockTransforms.filter( ( item ) => { return featuredBlocks.includes( item.name ); } ); - /** - * Add transforms to Link Control - */ - - function LinkControlTransforms( { block, transforms } ) { - return ( -
-

- Transform -

- - { transforms.map( ( item, index ) => { - return ( - - - - ); - } ) } - -
- ); - } useEffect( () => { // Show the LinkControl on mount if the URL is empty @@ -774,6 +771,7 @@ export default function NavigationLinkEdit( { transforms={ featuredTransforms } + replace={ replaceBlock } /> ) : null From c1f8b687a91898e090b4d78b9ea77551d52b2799 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 27 Oct 2021 15:46:12 +1100 Subject: [PATCH 8/8] Change flex implementation --- .../block-library/src/navigation-link/edit.js | 36 ++++++++----------- .../src/navigation-link/editor.scss | 6 ++++ 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index ee6d0a8807bdc6..e9e7e2aa458020 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -11,8 +11,6 @@ import { createBlock, switchToBlockType } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, - Flex, - FlexItem, PanelBody, Popover, TextControl, @@ -291,29 +289,25 @@ function LinkControlTransforms( { block, transforms, replace } ) { return (

Transform

- +
{ transforms.map( ( item, index ) => { return ( - - - + ); } ) } - +
); } diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 8ca28a146e8d1c..8b5a8a7941bedb 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -114,7 +114,13 @@ margin-bottom: 1.5em; } +.link-control-transform__items { + display: flex; + justify-content: space-between; +} + .link-control-transform__item { + flex-basis: 33%; flex-direction: column; gap: $grid-unit-10; height: auto;