Merge pull request #47 from BlackbirdDigital/feature/button-styles

Feature/button styles

inc/block-styles.php

@@ -11,6 +11,7 @@
  * Register block styles.
  */
 function register() {
+	/*
 	// Lead Paragraph: paragraph with large, bold text.
 	register_block_style(
 		'core/paragraph',
@@ -20,13 +21,14 @@ function register() {
 			'style' => 'themescaffold-style',
 		)
 	);
+	*/
 
-	// Plain Button: button with only text, no background.
+	// Link Button: button with only text, no background.
 	register_block_style(
 		'core/button',
 		array(
-			'name'  => 'plain',
-			'label' => 'Plain',
+			'name'  => 'link',
+			'label' => 'Link',
 			'style' => 'themescaffold-style',
 		)
 	);

src/scripts/editor.js

@@ -32,11 +32,11 @@ registerBlockCollection( 'acf', {
  * Client-side block style registrations
  */
 ( () => {
-	// Button "plain"
+	// Button "link"
 	/*
 	registerBlockStyle( 'core/button', {
-		name: 'plain',
-		label: 'Plain',
+		name: 'link',
+		label: 'Link',
 		style: 'theme-style',
 	} );
 	*/
@@ -46,5 +46,5 @@ registerBlockCollection( 'acf', {
  * Client-side block style unregistrations must happen on domReady
  */
 domReady( () => {
-	//unregisterBlockStyle( 'core/button', 'fill' );
+	//unregisterBlockStyle( 'core/button', 'outline' );
 } );

src/styles/base/elements/_buttons.scss

@@ -2,29 +2,15 @@
 // Element: buttons.
 //
 
-@use '../../tools/context';
+@use "../../tools/context";
+@use "../../utilities/buttons";
 
 // Only include base button styles on front so we don't interfere with UI buttons in the editor.
 @include context.is-front {
 	button,
-	input[type='button'],
-	input[type='reset'],
-	input[type='submit'] {
-		border: 1px solid;
-		border-color: red;
-		border-radius: 3px;
-		background: transparent;
-		color: red;
-		line-height: 1;
-		padding: 0.6em 1em 0.4em;
-
-		&:hover {
-			border-color: black;
-		}
-
-		&:active,
-		&:focus {
-			border-color: black;
-		}
+	input[type="button"],
+	input[type="reset"],
+	input[type="submit"] {
+		@extend %button-filled;
 	}
 }

src/styles/base/elements/_links.scss

@@ -3,24 +3,4 @@
 //
 
 a {
-	color: blue;
-
-	&:visited {
-		color: blue;
-	}
-
-	&:hover,
-	&:focus,
-	&:active {
-		color: blue;
-	}
-
-	&:focus {
-		outline: thin dotted;
-	}
-
-	&:hover,
-	&:active {
-		outline: 0;
-	}
 }

src/styles/base/global/_colors.scss

@@ -0,0 +1,21 @@
+/**
+ * Utility: colors
+ */
+
+@use "../../settings/theme";
+
+// Color CSS vars.
+$theme-colors: theme.get-map("theme-colors");
+@each $color, $value in $theme-colors {
+	.has-#{$color}-color.has-#{$color}-color.has-#{$color}-color {
+		color: #{theme.get-var("theme-colors", $color)};
+		--has-color: #{theme.get-var("theme-colors", $color)} !important;
+	}
+	.has-#{$color}-background-color.has-#{$color}-background-color.has-#{$color}-background-color {
+		background-color: #{theme.get-var("theme-colors", $color)};
+		--has-background-color: #{theme.get-var(
+				"theme-colors",
+				$color
+			)} !important;
+	}
+}

src/styles/blocks/core/_button.scss

@@ -0,0 +1,23 @@
+//
+// Block: core/button.
+//
+
+.wp-block-button {
+	$self: &;
+
+	&__link {
+		@extend %button-filled;
+	}
+
+	&.is-style-outline {
+		#{$self}__link {
+			@extend %button-outline;
+		}
+	}
+
+	&.is-style-link {
+		#{$self}__link {
+			@extend %button-link-arrow;
+		}
+	}
+}

src/styles/editor.scss

@@ -22,4 +22,4 @@
 		cursor: not-allowed;
 		pointer-events: none;
 	}
-}
+}