Block Styles: Add "Buttons" block style for navigation block (#127)

* Block Styles: Add "Buttons" block style for navigation block * Update hover state to use lighter grey * Scroll navigation horizontally when it is longer than the screen
WordPress · Mar 22, 2024 · 624ac76 · 624ac76
1 parent 2e61c84
commit 624ac76
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php
@@ -198,6 +198,15 @@ function setup_block_styles() {
 			'label'        => __( 'Borderless', 'wporg' ),
 		)
 	);
+
+	register_block_style(
+		'core/navigation',
+		array(
+			'name'         => 'button-list',
+			'label'        => __( 'Buttons', 'wporg' ),
+			'style_handle' => STYLE_HANDLE,
+		)
+	);
 }
 
 /**

diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss
@@ -112,4 +112,44 @@
 			box-shadow: inset 0 0 0 3px var(--wp--custom--button--outline--hover--border--color);
 		}
 	}
+
+	// Block style for navigation, but uses button style mixins.
+	&.is-style-button-list {
+		gap: 0;
+		overflow-x: auto;
+		white-space: nowrap;
+
+		.wp-block-navigation-item__content {
+			--wp--custom--button--outline--border--color: transparent !important;
+			--wp--custom--button--outline--hover--border--color: var(--wp--preset--color--light-grey-2) !important;
+			--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--light-grey-2) !important;
+			border-radius: 2px;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+			}
+
+			&:focus {
+
+				@include button-color-focus-styles;
+			}
+
+			@include button-small-styles;
+			@include button-toggle-styles;
+		}
+
+		.current-menu-item .wp-block-navigation-item__content {
+
+			@include button-toggle-active-styles;
+
+			--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
+			--wp--custom--button--outline--focus--color--background: var(--wp--preset--color--charcoal-1);
+
+			&:hover {
+				--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--charcoal-1);
+				--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--light-grey-2);
+			}
+		}
+	}
 }