Merge pull request #352 from bu-ist/bug/5.7-fix-tweet-highlight-styli…

…ng-paragraph-blocks Bug/5.7 fix tweet highlight styling paragraph blocks
bu-ist · Aug 22, 2023 · 0210fce · 0210fce
2 parents 1f0f085 + 4c1748d
commit 0210fce
Show file tree

Hide file tree

Showing 6 changed files with 128,425 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Click to Tweet style fixes. Closes #320. Updates the styles to restore the styling for the Click to Tweet feature on Paragraph blocks.
 - Stats Block: 
   - Update to block api 2 and fix alignment issues for WP 5.7
     - Change default fill / stroke color of the stats block svg donut chart so it isn't white on white background.

diff --git a/dist/blocks.build.js b/dist/blocks.build.js
diff --git a/dist/blocks.editor.build.css b/dist/blocks.editor.build.css
diff --git a/dist/blocks.style.build.css b/dist/blocks.style.build.css
diff --git a/docs/blocks.style.build.css b/docs/blocks.style.build.css
diff --git a/src/blocks/clicktotweet/editor.scss b/src/blocks/clicktotweet/editor.scss
@@ -6,30 +6,43 @@
  */
 
 
-.wp-block-bu-clicktotweet.has-format-highlight .wp-block-bu-clicktotweet-highlight {
+/**
+* Define CSS variables to allow child themes
+* to alter these values easily if needed.
+**/
+:root {
+	--bu_blocks-block-click-tweet-color-highlight: #def0f6;
+	--bu_blocks-block-click-tweet-color-icon: #0587B8;
+	--bu_blocks-block-click-tweet-color-button: #0587B8;
+}
+
+[data-type="core/paragraph"].wp-block-bu-clicktotweet.has-format-highlight .wp-block-bu-clicktotweet-highlight {
+	background: var(--bu_blocks-block-click-tweet-color-highlight);
+
 	&::after {
-		color: #0587B8;
+		color: var(--bu_blocks-block-click-tweet-color-icon);
 		content: "\f301";
 		font-family: "dashicons";
 	}
 }
 
-[data-type="core/paragraph"]:not(.is-selected) {
-	.wp-block-paragraph.wp-block-bu-clicktotweet:not(.has-format-highlight) {
+[data-type="core/paragraph"]:not(.is-selected).wp-block-bu-clicktotweet:not(.has-format-highlight) {
 
-		.wp-block-bu-clicktotweet-content::before {
+	.wp-block-bu-clicktotweet-content {
+		&::before {
 			content: '';
 			border: 1px dashed gray;
+			border-color: var(--bu_blocks-block-click-tweet-color-button);
 			display: block;
 			position: absolute;
 			left: -15px;
 			top: -15px;
 			bottom: -15px;
 			right: -15px;
-
 		}
+
 		&::after {
-			background: gray;
+			background: var(--bu_blocks-block-click-tweet-color-button);
 			bottom: -15px;
 			color: #fff;
 			content: "tweet this";
@@ -41,4 +54,5 @@
 			right: -15px;
 		}
 	}
-}
+
+}