From 2e177254c4b2776fda4eda6f57d33b19c54c5f45 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 1 Apr 2021 12:29:34 +1100 Subject: [PATCH] Add Navigation Links wrapper block --- lib/blocks.php | 2 + packages/block-library/src/index.js | 2 + .../src/navigation-link-list/block.json | 12 ++++ .../src/navigation-link-list/edit.js | 68 +++++++++++++++++++ .../src/navigation-link-list/index.js | 30 ++++++++ .../src/navigation-link-list/index.php | 38 +++++++++++ .../src/navigation-link-list/save.js | 8 +++ .../src/navigation-link/block.json | 2 +- packages/block-library/src/navigation/edit.js | 61 ++++++++--------- .../block-library/src/navigation/index.php | 2 +- .../src/navigation/placeholder.js | 5 +- 11 files changed, 192 insertions(+), 38 deletions(-) create mode 100644 packages/block-library/src/navigation-link-list/block.json create mode 100644 packages/block-library/src/navigation-link-list/edit.js create mode 100644 packages/block-library/src/navigation-link-list/index.js create mode 100644 packages/block-library/src/navigation-link-list/index.php create mode 100644 packages/block-library/src/navigation-link-list/save.js diff --git a/lib/blocks.php b/lib/blocks.php index a71525330e2487..b00439e9c88725 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -32,6 +32,7 @@ function gutenberg_reregister_core_block_types() { 'missing', 'more', 'navigation-link', + 'navigation-link-list', 'nextpage', 'paragraph', 'preformatted', @@ -59,6 +60,7 @@ function gutenberg_reregister_core_block_types() { 'loginout.php' => 'core/loginout', 'navigation.php' => 'core/navigation', 'navigation-link.php' => 'core/navigation-link', + 'navigation-link-list.php' => 'core/navigation-link-list', 'rss.php' => 'core/rss', 'search.php' => 'core/search', 'shortcode.php' => 'core/shortcode', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 2cca51b83e5c9a..0e223b7469df6e 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -36,6 +36,7 @@ import * as html from './html'; import * as mediaText from './media-text'; import * as navigation from './navigation'; import * as navigationLink from './navigation-link'; +import * as navigationLinkList from './navigation-link-list'; import * as latestComments from './latest-comments'; import * as latestPosts from './latest-posts'; import * as legacyWidget from './legacy-widget'; @@ -214,6 +215,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = [ navigation, navigationLink, + navigationLinkList, // Register Legacy Widget block. ...( enableLegacyWidgetBlock ? [ legacyWidget ] : [] ), diff --git a/packages/block-library/src/navigation-link-list/block.json b/packages/block-library/src/navigation-link-list/block.json new file mode 100644 index 00000000000000..b2003841b9880e --- /dev/null +++ b/packages/block-library/src/navigation-link-list/block.json @@ -0,0 +1,12 @@ +{ + "apiVersion": 2, + "name": "core/navigation-link-list", + "category": "design", + "parent": [ "core/navigation" ], + "supports": { + "reusable": false, + "html": false + }, + "editorStyle": "wp-block-navigation-link-list-editor", + "style": "wp-block-navigation-link-list" +} diff --git a/packages/block-library/src/navigation-link-list/edit.js b/packages/block-library/src/navigation-link-list/edit.js new file mode 100644 index 00000000000000..4f476fbb65ad56 --- /dev/null +++ b/packages/block-library/src/navigation-link-list/edit.js @@ -0,0 +1,68 @@ +/** + * WordPress dependencies + */ +import { + InnerBlocks, + BlockControls, + InspectorControls, + useBlockProps, + __experimentalUseInnerBlocksProps as useInnerBlocksProps, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; + +const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/spacer' ]; + +export default function NavigationLinksEdit( { clientId, isSelected } ) { + const { + isImmediateParentOfSelectedBlock, + selectedBlockHasDescendants, + } = useSelect( + ( select ) => { + const { + getClientIdsOfDescendants, + hasSelectedInnerBlock, + getSelectedBlockClientId, + } = select( blockEditorStore ); + const selectedBlockId = getSelectedBlockClientId(); + return { + isImmediateParentOfSelectedBlock: hasSelectedInnerBlock( + clientId, + false + ), + selectedBlockHasDescendants: !! getClientIdsOfDescendants( [ + selectedBlockId, + ] )?.length, + }; + }, + [ clientId ] + ); + + const blockProps = useBlockProps( { + className: 'wp-block-navigation__container', + } ); + + const innerBlocksProps = useInnerBlocksProps( blockProps, { + allowedBlocks: ALLOWED_BLOCKS, + renderAppender: + ( isImmediateParentOfSelectedBlock && + ! selectedBlockHasDescendants ) || + isSelected + ? InnerBlocks.DefaultAppender + : false, + __experimentalAppenderTagName: 'li', + __experimentalCaptureToolbars: true, + __experimentalLayout: { + type: 'default', + alignments: [], + }, + } ); + + return ( + <> + + +
    + + ); +} diff --git a/packages/block-library/src/navigation-link-list/index.js b/packages/block-library/src/navigation-link-list/index.js new file mode 100644 index 00000000000000..0e8d1cba6e1fde --- /dev/null +++ b/packages/block-library/src/navigation-link-list/index.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { customLink as linkIcon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; + +export { metadata, name }; + +export const settings = { + title: _x( 'List of links', 'block title' ), + + icon: linkIcon, + + description: __( 'Add a list of links to your navigation.' ), + + keywords: [ __( 'links' ) ], + + edit, + + save, +}; diff --git a/packages/block-library/src/navigation-link-list/index.php b/packages/block-library/src/navigation-link-list/index.php new file mode 100644 index 00000000000000..d42167b4bfb2b0 --- /dev/null +++ b/packages/block-library/src/navigation-link-list/index.php @@ -0,0 +1,38 @@ +inner_blocks ) ) { + return ''; + } + + $inner_blocks_html = ''; + foreach ( $block->inner_blocks as $inner_block ) { + $inner_blocks_html .= $inner_block->render(); + } + + return sprintf('
      %1$s
    ', $inner_blocks_html); +} + +/** + * Register the navigation link list block. + * + * @uses render_block_core_navigation_link_list() + * @throws WP_Error An WP_Error exception parsing the block definition. + */ +function register_block_core_navigation_link_list() { + register_block_type_from_metadata( + __DIR__ . '/navigation-link-list', + array( + 'render_callback' => 'render_block_core_navigation_link_list', + ) + ); +} + +add_action( 'init', 'register_block_core_navigation_link_list' ); \ No newline at end of file diff --git a/packages/block-library/src/navigation-link-list/save.js b/packages/block-library/src/navigation-link-list/save.js new file mode 100644 index 00000000000000..17571d8f30d2de --- /dev/null +++ b/packages/block-library/src/navigation-link-list/save.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save() { + return ; +} diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json index dc31e79bf798a5..eac69aa31d9837 100644 --- a/packages/block-library/src/navigation-link/block.json +++ b/packages/block-library/src/navigation-link/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/navigation-link", "category": "design", - "parent": [ "core/navigation" ], + "parent": [ "core/navigation-link-list" ], "attributes": { "label": { "type": "string" diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 0f21df8e75ad3d..2c7bc41e4a5614 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -59,38 +59,33 @@ function Navigation( { clientId ); - const innerBlocksProps = useInnerBlocksProps( - { - className: 'wp-block-navigation__container', + const innerBlocksProps = useInnerBlocksProps( blockProps, { + allowedBlocks: [ + 'core/navigation-link-list', + 'core/search', + 'core/social-links', + 'core/page-list', + 'core/spacer', + ], + orientation: attributes.orientation || 'horizontal', + renderAppender: + ( isImmediateParentOfSelectedBlock && + ! selectedBlockHasDescendants ) || + isSelected + ? InnerBlocks.DefaultAppender + : false, + __experimentalAppenderTagName: 'div', + __experimentalCaptureToolbars: true, + // Template lock set to false here so that the Nav + // Block on the experimental menus screen does not + // inherit templateLock={ 'all' }. + templateLock: false, + __experimentalLayout: { + type: 'default', + alignments: [], }, - { - allowedBlocks: [ - 'core/navigation-link', - 'core/search', - 'core/social-links', - 'core/page-list', - 'core/spacer', - ], - orientation: attributes.orientation || 'horizontal', - renderAppender: - ( isImmediateParentOfSelectedBlock && - ! selectedBlockHasDescendants ) || - isSelected - ? InnerBlocks.DefaultAppender - : false, - __experimentalAppenderTagName: 'li', - __experimentalCaptureToolbars: true, - // Template lock set to false here so that the Nav - // Block on the experimental menus screen does not - // inherit templateLock={ 'all' }. - templateLock: false, - __experimentalLayout: { - type: 'default', - alignments: [], - }, - placeholder: , - } - ); + placeholder: , + } ); if ( isPlaceholderShown ) { return ( @@ -141,9 +136,7 @@ function Navigation( { ) } - +