From 9b04698c67e6953db9d1afd0064da6100cb83103 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Mon, 5 May 2025 14:49:28 +0530
Subject: [PATCH] Add border support to Twenty Twenty-One

---
 .../assets/sass/01-settings/global.scss       |  6 +++++
 .../assets/sass/07-utilities/border.scss      | 22 +++++++++++++++++++
 .../assets/sass/style-dark-mode.scss          |  3 +++
 .../twentytwentyone/assets/sass/style.scss    |  2 ++
 .../themes/twentytwentyone/functions.php      |  3 +++
 5 files changed, 36 insertions(+)
 create mode 100644 src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/border.scss

diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss b/src/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss
index 0e5aa0af49583..920a8af313e57 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss
+++ b/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);
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/border.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/border.scss
new file mode 100644
index 0000000000000..c1470460464c0
--- /dev/null
+++ b/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);
+}
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss
index b98321ba145c8..4a39de48cbc97 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss
+++ b/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 {
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/style.scss
index 5a57a61417c5f..2023f4406ad3e 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/style.scss
+++ b/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";
diff --git a/src/wp-content/themes/twentytwentyone/functions.php b/src/wp-content/themes/twentytwentyone/functions.php
index f163e394df734..e2cd05ec73292 100644
--- a/src/wp-content/themes/twentytwentyone/functions.php
+++ b/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' );