From 5096297d0a76a245e1b6863c3235bc23086eccc9 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 21 Dec 2021 17:02:29 +1300 Subject: [PATCH 01/10] WIP - manually add block gap support --- packages/block-library/src/navigation/edit/index.js | 4 ++++ packages/block-library/src/navigation/edit/inner-blocks.js | 2 ++ packages/block-library/src/navigation/index.php | 2 ++ 3 files changed, 8 insertions(+) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index d5e4c5d168c6e5..417ad02d9fbcbc 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -116,6 +116,9 @@ function Navigation( { orientation = 'horizontal', flexWrap = 'wrap', } = {}, + style: { + spacing: { blockGap }, + }, } = attributes; let areaMenu, @@ -653,6 +656,7 @@ function Navigation( { !! CustomPlaceholder } orientation={ orientation } + blockGap={ blockGap } /> ) } diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index 8a893c254f0999..f4d7fa76600ad3 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -40,6 +40,7 @@ export default function NavigationInnerBlocks( { appender: CustomAppender, hasCustomPlaceholder, orientation, + blockGap, } ) { const { isImmediateParentOfSelectedBlock, @@ -100,6 +101,7 @@ export default function NavigationInnerBlocks( { const innerBlocksProps = useInnerBlocksProps( { className: 'wp-block-navigation__container', + style: { gap: blockGap }, }, { value: blocks, diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 42cba8e1b02371..61a6997ccd6c5f 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -472,6 +472,8 @@ function render_block_core_navigation( $attributes, $content, $block ) { $layout_class .= ' no-wrap'; } + $block_gap = isset( $attributes['style']['spacing']['blockgap'] ) ? 'style="gap: ' . $attributes['style']['spacing']['blockgap'] . 'px"' : ''; + $colors = block_core_navigation_build_css_colors( $attributes ); $font_sizes = block_core_navigation_build_css_font_sizes( $attributes ); $classes = array_merge( From 07bba07cbdb0d4b36569a5c8312f23854e014d09 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 22 Dec 2021 15:53:50 +1300 Subject: [PATCH 02/10] Add gap styles manually on front end --- packages/block-library/src/navigation/index.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 61a6997ccd6c5f..15e4482f7b3eb9 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -472,7 +472,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { $layout_class .= ' no-wrap'; } - $block_gap = isset( $attributes['style']['spacing']['blockgap'] ) ? 'style="gap: ' . $attributes['style']['spacing']['blockgap'] . 'px"' : ''; + $block_gap = isset( $attributes['style']['spacing']['blockGap'] ) ? 'style="gap: ' . $attributes['style']['spacing']['blockGap'] . '"' : ''; $colors = block_core_navigation_build_css_colors( $attributes ); $font_sizes = block_core_navigation_build_css_font_sizes( $attributes ); @@ -489,7 +489,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { foreach ( $inner_blocks as $inner_block ) { if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) { $is_list_open = true; - $inner_blocks_html .= '