diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index fda1268715c328..fc192915ab368e 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -225,15 +225,6 @@ export default function NavigationLinkEdit( { [ clientId ] ); - useEffect( () => { - // This side-effect should not create an undo level as those should - // only be created via user interactions. Mark this change as - // not persistent to avoid undo level creation. - // See https://github.com/WordPress/gutenberg/issues/34564. - __unstableMarkNextChangeAsNotPersistent(); - setAttributes( { isTopLevelLink } ); - }, [ isTopLevelLink ] ); - /** * Transform to submenu block. */ diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 1164fa995b28cf..fc3131e9a20510 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -9,18 +9,17 @@ * Build an array with CSS classes and inline styles defining the colors * which will be applied to the navigation markup in the front-end. * - * @param array $context Navigation block context. - * @param array $attributes Block attributes. + * @param array $context Navigation block context. + * @param array $attributes Block attributes. + * @param bool $is_sub_menu Whether the link is part of a sub-menu. * @return array Colors CSS classes and inline styles. */ -function block_core_navigation_link_build_css_colors( $context, $attributes ) { +function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) { $colors = array( 'css_classes' => array(), 'inline_styles' => '', ); - $is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false; - // Text color. $named_text_color = null; $custom_text_color = null; diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index 866333a061de84..53b3fecf2c6b85 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -224,16 +224,6 @@ export default function NavigationSubmenuEdit( { } }, [] ); - // Store the colors from context as attributes for rendering. - useEffect( () => { - // This side-effect should not create an undo level as those should - // only be created via user interactions. Mark this change as - // not persistent to avoid undo level creation. - // See https://github.com/WordPress/gutenberg/issues/34564. - __unstableMarkNextChangeAsNotPersistent(); - setAttributes( { isTopLevelItem } ); - }, [ isTopLevelItem ] ); - /** * The hook shouldn't be necessary but due to a focus loss happening * when selecting a suggestion in the link popover, we force close on block unselection. diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index be6046076e76e1..cf1364f81f113c 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/packages/block-library/src/navigation-submenu/index.php @@ -9,18 +9,17 @@ * Build an array with CSS classes and inline styles defining the colors * which will be applied to the navigation markup in the front-end. * - * @param array $context Navigation block context. - * @param array $attributes Block attributes. + * @param array $context Navigation block context. + * @param array $attributes Block attributes. + * @param bool $is_sub_menu Whether the block is a sub-menu. * @return array Colors CSS classes and inline styles. */ -function block_core_navigation_submenu_build_css_colors( $context, $attributes ) { +function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) { $colors = array( 'css_classes' => array(), 'inline_styles' => '', ); - $is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false; - // Text color. $named_text_color = null; $custom_text_color = null; @@ -250,6 +249,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) { } if ( $has_submenu ) { + $colors = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu ); + $classes = array_merge( + array( 'wp-block-navigation__submenu-container' ), + $colors['css_classes'] + ); + $css_classes = trim( implode( ' ', $classes ) ); + + $style_attribute = $colors['inline_styles']; + $inner_blocks_html = ''; foreach ( $block->inner_blocks as $inner_block ) { $inner_blocks_html .= $inner_block->render(); @@ -263,10 +271,19 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) { $html = $tag_processor->get_updated_html(); } + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => $css_classes, + 'style' => $style_attribute, + ) + ); + $html .= sprintf( - '', + '', + $wrapper_attributes, $inner_blocks_html ); + } $html .= '';