Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add generic classnames to children of Navigation #33918

Merged
merged 7 commits into from
Aug 12, 2021
Merged

Add generic classnames to children of Navigation #33918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3282598
Add generic classnames to children of Navigation
tellthemachines Aug 6, 2021
7c6c81e
Make server side render recognise navigation child logic
tellthemachines Aug 9, 2021
c0fed60
Add generic class to submenu containers.
tellthemachines Aug 9, 2021
cd2e19e
Fix render issue
tellthemachines Aug 9, 2021
76794d5
Add doc comment and fix php linting issues
tellthemachines Aug 9, 2021
6b153bb
Add generic class to submenu icons.
tellthemachines Aug 9, 2021
d9d1ead
Update test snapshots and fix php lint issues.
tellthemachines Aug 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/block-library/src/home-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function HomeEdit( {

const { textColor, backgroundColor, style } = context;
const blockProps = useBlockProps( {
className: classnames( {
className: classnames( 'wp-block-navigation-item', {
'has-text-color': !! textColor || !! style?.color?.text,
[ `has-${ textColor }-color` ]: !! textColor,
'has-background': !! backgroundColor || !! style?.color?.background,
Expand All @@ -58,7 +58,7 @@ export default function HomeEdit( {
<>
<div { ...blockProps }>
<a
className="wp-block-home-link__content"
className="wp-block-home-link__content wp-block-navigation-item__content"
href={ homeUrl }
onClick={ preventDefault }
>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/home-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
$font_sizes['css_classes']
);
$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
$css_classes = trim( implode( ' ', $classes ) );
$css_classes = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';

$wrapper_attributes = get_block_wrapper_attributes(
array(
Expand Down Expand Up @@ -127,7 +127,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {

$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );

$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content"';
$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content"';

// Start appending HTML attributes to anchor tag.
$html .= ' href="' . esc_url( home_url() ) . '"';
Expand Down
46 changes: 27 additions & 19 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ function getSuggestionsQuery( type, kind ) {
* 4: Theme colors
* 5: Global styles
*
* @param {Object} context
* @param {Object} context
* @param {boolean} isSubMenu
*/
function getColors( context, isSubMenu ) {
Expand Down Expand Up @@ -469,7 +469,7 @@ export default function NavigationLinkEdit( {

const blockProps = useBlockProps( {
ref: listItemRef,
className: classnames( {
className: classnames( 'wp-block-navigation-item', {
'is-editing': isSelected || isParentOfSelectedBlock,
'is-dragging-within': isDraggingWithin,
'has-link': !! url,
Expand All @@ -496,19 +496,23 @@ export default function NavigationLinkEdit( {
const innerBlocksColors = getColors( context, true );
const innerBlocksProps = useInnerBlocksProps(
{
className: classnames( 'wp-block-navigation-link__container', {
'is-parent-of-selected-block': isParentOfSelectedBlock,
'has-text-color': !! (
innerBlocksColors.textColor ||
innerBlocksColors.customTextColor
),
[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
'has-background': !! (
innerBlocksColors.backgroundColor ||
innerBlocksColors.customBackgroundColor
),
[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
} ),
className: classnames(
'wp-block-navigation-link__container',
'wp-block-navigation__submenu-container',
{
'is-parent-of-selected-block': isParentOfSelectedBlock,
'has-text-color': !! (
innerBlocksColors.textColor ||
innerBlocksColors.customTextColor
),
[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
'has-background': !! (
innerBlocksColors.backgroundColor ||
innerBlocksColors.customBackgroundColor
),
[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
}
),
style: {
color: innerBlocksColors.customTextColor,
backgroundColor: innerBlocksColors.customBackgroundColor,
Expand All @@ -527,9 +531,13 @@ export default function NavigationLinkEdit( {
}
);

const classes = classnames( 'wp-block-navigation-link__content', {
'wp-block-navigation-link__placeholder': ! url,
} );
const classes = classnames(
'wp-block-navigation-link__content',
'wp-block-navigation-item__content',
{
'wp-block-navigation-link__placeholder': ! url,
}
);

let missingText = '';
switch ( type ) {
Expand Down Expand Up @@ -712,7 +720,7 @@ export default function NavigationLinkEdit( {
</Popover>
) }
{ hasDescendants && showSubmenuIcon && (
<span className="wp-block-navigation-link__submenu-icon">
<span className="wp-block-navigation-link__submenu-icon wp-block-navigation__submenu-icon">
<ItemSubmenuIcon />
</span>
) }
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/navigation-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {

$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => $css_classes . ( $has_submenu ? ' has-child' : '' ) .
'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
( $is_active ? ' current-menu-item' : '' ),
'style' => $style_attribute,
)
);
$html = '<li ' . $wrapper_attributes . '>' .
'<a class="wp-block-navigation-link__content" ';
'<a class="wp-block-navigation-link__content wp-block-navigation-item__content" ';

// Start appending HTML attributes to anchor tag.
if ( isset( $attributes['url'] ) ) {
Expand Down Expand Up @@ -220,7 +220,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {

if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
// The submenu icon can be hidden by a CSS rule on the Navigation Block.
$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
$html .= '<span class="wp-block-navigation-link__submenu-icon wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
}

$html .= '</a>';
Expand All @@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
}

$html .= sprintf(
'<ul class="wp-block-navigation-link__container">%s</ul>',
'<ul class="wp-block-navigation-link__container wp-block-navigation__submenu-container">%s</ul>',
$inner_blocks_html
);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/page-list/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
},
"customOverlayTextColor": {
"type": "string"
},
"isNavigationChild": {
"type": "boolean"
}
},
"usesContext": [
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/page-list/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -69,6 +70,11 @@ export default function PageListEdit( {
context.customOverlayBackgroundColor,
] );

useEffect( () => {
const isNavigationChild = isEmpty( context ) ? false : true;
setAttributes( { isNavigationChild } );
}, [] );

const { textColor, backgroundColor, showSubmenuIcon, style } =
context || {};

Expand Down
26 changes: 21 additions & 5 deletions packages/block-library/src/page-list/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,14 +128,15 @@ function block_core_page_list_build_css_font_sizes( $context ) {
/**
* Outputs Page list markup from an array of pages with nested children.
*
* @param boolean $is_navigation_child If block is a child of Navigation block.
* @param array $nested_pages The array of nested pages.
* @param array $active_page_ancestor_ids An array of ancestor ids for active page.
* @param array $colors Color information for overlay styles.
* @param integer $depth The nesting depth.
*
* @return string List markup.
*/
function block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
function block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
if ( empty( $nested_pages ) ) {
return;
}
Expand All @@ -149,6 +150,12 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
$css_class .= ' has-child';
}

if ( $is_navigation_child ) {
$css_class .= ' wp-block-navigation-item';
}

$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';

// If this is the first level of submenus, include the overlay colors.
if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
Expand All @@ -158,13 +165,20 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
}

$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '">' . wp_kses(
$page['title'],
wp_kses_allowed_html( 'post' )
) . '</a>';
if ( isset( $page['children'] ) ) {
$markup .= '<span class="wp-block-page-list__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
$markup .= '<ul class="submenu-container">' . block_core_page_list_render_nested_page_list( $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
if ( $is_navigation_child ) {
$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
}
$markup .= '<ul class="submenu-container';
// Extra classname is added when the block is a child of Navigation.
if ( $is_navigation_child ) {
$markup .= ' wp-block-navigation__submenu-container';
}
$markup .= '">' . block_core_page_list_render_nested_page_list( $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
}
$markup .= '</li>';
}
Expand Down Expand Up @@ -258,9 +272,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {

$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );

$is_navigation_child = array_key_exists( 'isNavigationChild', $attributes ) ? $attributes['isNavigationChild'] : ! empty( $block->context );

$wrapper_markup = '<ul %1$s>%2$s</ul>';

$items_markup = block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids, $colors );
$items_markup = block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );

if ( $block->context && $block->context['showSubmenuIcon'] ) {
$css_classes .= ' show-submenu-icons';
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Navigation editor allows creation of a menu when there are existing men

exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
<!-- wp:page-list /-->
<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
<!-- /wp:navigation -->"
`;

Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ exports[`Navigation Creating from existing Menus creates an empty navigation blo

exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:page-list /-->
<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
<!-- /wp:navigation -->"
`;

Expand Down