Add align support for older themes

Automattic · Jan 29, 2025 · d8e29f2 · d8e29f2
1 parent e26c2e2
commit d8e29f2
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss
@@ -1,8 +1,32 @@
 @import "../../shared/styles/align";
 
-.wp-block-jetpack-button {
+// This level of CSS specificity is required to overwrite existing styles
+.editor-styles-wrapper .block-editor-block-list__block.wp-block-jetpack-button {
 	@include align-block;
 	max-width: 100%;
 	width: fit-content;
 	margin: 0;
+}
+
+// Support align feature for older themes
+.wp-block[data-align]:has(> .wp-block-jetpack-button) {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.wp-block[data-align] > .wp-block-jetpack-button {
+	display: block;
+}
+
+.wp-block[data-align="center"] > .wp-block-jetpack-button {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-block[data-align="left"] > .wp-block-jetpack-button {
+	margin-right: auto;
+}
+
+.wp-block[data-align="right"] > .wp-block-jetpack-button {
+	margin-left: auto;
 }