Remove deprecated classnames from Navigation Link block (#35358)

* Remove deprecated classnames from Navigation Link block * Update class names in navigation block and navigation editor
WordPress · Oct 8, 2021 · d721110 · d721110
1 parent 724da47
commit d721110
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 20 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -516,13 +516,9 @@ export default function NavigationLinkEdit( {
 		blockProps.onClick = () => setIsLinkOpen( true );
 	}
 
-	const classes = classnames(
-		'wp-block-navigation-link__content',
-		'wp-block-navigation-item__content',
-		{
-			'wp-block-navigation-link__placeholder': ! url,
-		}
-	);
+	const classes = classnames( 'wp-block-navigation-item__content', {
+		'wp-block-navigation-link__placeholder': ! url,
+	} );
 
 	let missingText = '';
 	switch ( type ) {
@@ -615,7 +611,7 @@ export default function NavigationLinkEdit( {
 						<RichText
 							ref={ ref }
 							identifier="label"
-							className="wp-block-navigation-link__label"
+							className="wp-block-navigation-item__label"
 							value={ label }
 							onChange={ ( labelValue ) =>
 								setAttributes( { label: labelValue } )

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -166,7 +166,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		)
 	);
 	$html               = '<li ' . $wrapper_attributes . '>' .
-		'<a class="wp-block-navigation-link__content wp-block-navigation-item__content" ';
+		'<a class="wp-block-navigation-item__content" ';
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
@@ -192,7 +192,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	// Start anchor tag content.
 	$html .= '>' .
 		// Wrap title with span to isolate it from submenu icon.
-		'<span class="wp-block-navigation-link__label">';
+		'<span class="wp-block-navigation-item__label">';
 
 	if ( isset( $attributes['label'] ) ) {
 		$html .= wp_kses(
@@ -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 wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
+		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
 	$html .= '</a>';
@@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		}
 
 		$html .= sprintf(
-			'<ul class="wp-block-navigation-link__container wp-block-navigation__submenu-container">%s</ul>',
+			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
 			$inner_blocks_html
 		);
 	}

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -4,7 +4,7 @@
 // those from the Page List block.
 .wp-block-navigation {
 	// This wraps just the innermost text for custom menu items.
-	.wp-block-navigation-link__label {
+	.wp-block-navigation-item__label {
 		word-break: normal;
 		overflow-wrap: break-word;
 	}

diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -576,7 +576,7 @@ export default function NavigationSubmenuEdit( {
 						<RichText
 							ref={ ref }
 							identifier="label"
-							className="wp-block-navigation-link__label"
+							className="wp-block-navigation-item__label"
 							value={ label }
 							onChange={ ( labelValue ) =>
 								setAttributes( { label: labelValue } )

diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -233,7 +233,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '<button class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
 
 		// Wrap title with span to isolate it from submenu icon.
-		$html .= '<span class="wp-block-navigation-link__label">';
+		$html .= '<span class="wp-block-navigation-item__label">';
 
 		if ( isset( $attributes['label'] ) ) {
 			$html .= wp_kses(

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -21,7 +21,7 @@
 }
 
 // This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
-.wp-block-navigation-link__label {
+.wp-block-navigation-item__label {
 	display: inline-block;
 }
 

diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
@@ -51,7 +51,7 @@ The structural CSS for the navigation block targets generic classnames across me
 - `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
 - `.wp-block-navigation-item` is applied to every menu item.
 - `.wp-block-navigation-item__content` is applied to the link inside a menu item.
-- `.wp-block-navigation-link__label` is applied to the innermost container around the menu item text label.
+- `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
 - `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
 
 ## Navigation Props

diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -576,7 +576,7 @@ describe( 'Navigation', () => {
 		await createPageButton.click();
 
 		const draftLink = await page.waitForSelector(
-			'.wp-block-navigation-link__content'
+			'.wp-block-navigation-item__content'
 		);
 		await draftLink.click();
 

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
@@ -74,14 +74,14 @@
 				}
 			}
 
-			.wp-block-navigation-link__label,
+			.wp-block-navigation-item__label,
 			.wp-block-navigation-link__placeholder-text {
 				padding: $grid-unit-05;
 				padding-left: $grid-unit-10;
 				line-height: 1;
 			}
 
-			.wp-block-navigation-link__label {
+			.wp-block-navigation-item__label {
 				// Without this Links with submenus display a pointer.
 				cursor: text;
 			}