From bec2a78af80511fb89d3fdd55ddc03a25f99e128 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 18 May 2021 15:20:03 +0100 Subject: [PATCH 1/2] 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 | 4 +- packages/block-library/src/navigation/edit.js | 45 ++++++------ .../src/navigation/placeholder.js | 2 +- 10 files changed, 182 insertions(+), 29 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 b92a656513714b..68950a66b94fa7 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -33,6 +33,7 @@ function gutenberg_reregister_core_block_types() { 'missing', 'more', 'navigation-link', + 'navigation-link-list', 'nextpage', 'paragraph', 'preformatted', @@ -61,6 +62,7 @@ function gutenberg_reregister_core_block_types() { 'navigation.php' => 'core/navigation', 'navigation-link.php' => 'core/navigation-link', 'home-link.php' => 'core/home-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 a4ec8243c4e74c..5961016bdcf515 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -35,6 +35,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 homeLink from './home-link'; import * as latestComments from './latest-comments'; import * as latestPosts from './latest-posts'; @@ -234,6 +235,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = [ navigation, navigationLink, + navigationLinkList, homeLink, // Register Legacy Widget block. 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 efcc6810705506..e7d587d55ad7b4 100644 --- a/packages/block-library/src/navigation-link/block.json +++ b/packages/block-library/src/navigation-link/block.json @@ -3,9 +3,7 @@ "name": "core/navigation-link", "title": "Custom Link", "category": "design", - "parent": [ - "core/navigation" - ], + "parent": [ "core/navigation-link-list" ], "description": "Add a page, link, or another item to your navigation.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 99adf28132389b..68225d4a04954c 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -31,7 +31,7 @@ import PlaceholderPreview from './placeholder-preview'; import ResponsiveWrapper from './responsive-wrapper'; const ALLOWED_BLOCKS = [ - 'core/navigation-link', + 'core/navigation-link-list', 'core/search', 'core/social-links', 'core/page-list', @@ -78,29 +78,24 @@ function Navigation( { clientId ); - const innerBlocksProps = useInnerBlocksProps( - { - className: 'wp-block-navigation__container', - }, - { - allowedBlocks: ALLOWED_BLOCKS, - 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: LAYOUT, - placeholder: , - } - ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + allowedBlocks: ALLOWED_BLOCKS, + 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: LAYOUT, + placeholder: , + } ); if ( isPlaceholderShown ) { return ( @@ -166,7 +161,7 @@ function Navigation( { ) } -