Add border support to Twenty Twenty-One

Author: Sukhendu2002

src/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss

@@ -200,6 +200,12 @@ $baseline-unit: 10px;
 	--pullquote--color-foreground: var(--global--color-primary);
 	--pullquote--color-background: var(--global--color-background);
 
+	/* Block: Border */
+	--wp--custom--border--width: 1px;
+	--wp--custom--border--style: solid;
+	--wp--custom--border--color: var(--global--color-border);
+	--wp--custom--border--radius: 0;
+
 	--quote--font-family: var(--global--font-secondary);
 	--quote--font-size: var(--global--font-size-md);
 	--quote--font-size-large: var(--global--font-size-xl);

src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/border.scss

@@ -0,0 +1,22 @@
+// Border styles for blocks.
+
+.has-border {
+	border: var(--wp--custom--border--width, 1px) var(--wp--custom--border--style, solid) var(--wp--custom--border--color, var(--global--color-border));
+
+	&.has-border-color {
+		border-color: var(--wp--custom--border--color);
+	}
+
+	&.has-border-radius {
+		border-radius: var(--wp--custom--border--radius);
+	}
+}
+
+// Maintaining backward compatibility with legacy border classes.
+.has-border-color {
+	border-color: var(--wp--custom--border--color);
+}
+
+.has-border-radius {
+	border-radius: var(--wp--custom--border--radius);
+}

src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -15,6 +15,9 @@
 		/* Block: Table */
 		--table--stripes-border-color: rgba(240, 240, 240, 0.15);
 		--table--stripes-background-color: rgba(240, 240, 240, 0.15);
+
+		/* Block Borders */
+		--wp--custom--border--color: var(--global--color-border);
 	}
 
 	.is-dark-theme img {

src/wp-content/themes/twentytwentyone/assets/sass/style.scss

@@ -70,6 +70,7 @@
  *
  * UTILITIES
  * A11y.................Screen reader text, prefers reduced motion etc.
+ * Border...............Block border styles.
  * Color Palette........Classes for the color palette colors.
  * Editor Font Sizes....Editor Font Sizes.
  * Measure..............The width of a line of text, in characters.
@@ -116,6 +117,7 @@
 
 /* Category 07 is for any utility classes that are not assigned to a specific component. */
 @import "07-utilities/a11y";
+@import "07-utilities/border";
 @import "07-utilities/color-palette";
 @import "07-utilities/measure";
 @import "07-utilities/ie";

src/wp-content/themes/twentytwentyone/functions.php

@@ -334,6 +334,9 @@ function twenty_twenty_one_setup() {
 
 		// Remove feed icon link from legacy RSS widget.
 		add_filter( 'rss_widget_feed_link', '__return_empty_string' );
+
+		// Add support for block borders.
+		add_theme_support( 'border' );
 	}
 }
 add_action( 'after_setup_theme', 'twenty_twenty_one_setup' );