From d8e29f2220680d6799c0df7858f72ebebcfb3b9c Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 29 Jan 2025 17:58:19 -0500 Subject: [PATCH] Add align support for older themes --- .../extensions/blocks/button/editor.scss | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss index fe846b0116258..384f6cd398d69 100644 --- 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; } \ No newline at end of file