Apply text decoration as CSS class

WordPress · Mar 30, 2022 · ffebcb3 · ffebcb3
1 parent 45a8e6b
commit ffebcb3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -90,6 +90,8 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalSkipSerialization": [ "textDecoration" ],
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -325,6 +325,8 @@ function Navigation( {
 		isConvertingClassicMenu ||
 		!! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu );
 
+	const textDecoration = attributes.style?.typography?.textDecoration;
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
@@ -345,6 +347,7 @@ function Navigation( {
 				'background-color',
 				backgroundColor?.slug
 			) ]: !! backgroundColor?.slug,
+			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
 		} ),
 		style: {
 			color: ! textColor?.slug && textColor?.color,

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -486,14 +486,19 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$layout_class .= ' no-wrap';
 	}
 
+	// Manually add block support text decoration as CSS class.
+	$text_decoration       = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );
+	$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
 		$is_responsive_menu ? array( 'is-responsive' ) : array(),
 		$layout_class ? array( $layout_class ) : array(),
-		$is_fallback ? array( 'is-fallback' ) : array()
+		$is_fallback ? array( 'is-fallback' ) : array(),
+		$text_decoration ? array( $text_decoration_class ) : array()
 	);
 
 	$inner_blocks_html = '';

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -51,25 +51,27 @@ $navigation-icon-size: 24px;
 		padding: 0;
 	}
 
-	// Force links to inherit text decoration applied to navigation block.
-	// The extra selector adds specificity to ensure it works when user-set.
-	&[style*="text-decoration"] {
-		.wp-block-navigation-item,
-		.wp-block-navigation__submenu-container {
-			text-decoration: inherit;
+	// The following rules provide class based application of user selected text
+	// decoration via block supports.
+	&.has-text-decoration-underline .wp-block-navigation-item__content {
+		text-decoration: underline;
+
+		&:focus,
+		&:active {
+			text-decoration: underline;
 		}
+	}
 
-		a {
-			text-decoration: inherit;
+	&.has-text-decoration-line-through .wp-block-navigation-item__content {
+		text-decoration: line-through;
 
-			&:focus,
-			&:active {
-				text-decoration: inherit;
-			}
+		&:focus,
+		&:active {
+			text-decoration: line-through;
 		}
 	}
 
-	&:not([style*="text-decoration"]) {
+	&:not([class*="has-text-decoration"]) {
 		a {
 			text-decoration: none;