Like block: update styles (#35187)

* Convert media queries to container queries * Convert media queries to container queries
Automattic · Jan 23, 2024 · 28ae1d4 · 28ae1d4
1 parent bd4b3ed
commit 28ae1d4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-like-block-styles-update-container b/projects/plugins/jetpack/changelog/add-like-block-styles-update-container
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Tint style update
+
+
diff --git a/projects/plugins/jetpack/extensions/blocks/like/editor.scss b/projects/plugins/jetpack/extensions/blocks/like/editor.scss
@@ -10,7 +10,10 @@
 	display: none;
 }
 
-/* Fetched below from https://widgets.wp.com/likes/style.css at 2024-01-15T08:02:21.397Z */
+/* Fetched below from https://widgets.wp.com/likes/style.css at 2024-01-23T11:29:16.073Z */
+.wpl-likebox {
+	container-type:inline-size;
+}
 .wpl-likebox,.wpl-follow a,.wpl-count a {
 	font-size:11px!important;
 	font-family:"Open Sans",sans-serif!important;
@@ -77,8 +80,21 @@
 .wpl-button.like a span,.wpl-button.liked a span,.wpl-button.reblog a span {
 	margin-left:3px;
 }
+@container (max-width:320px) {
+	.wpl-button {
+		min-width:auto;
+	}
+	.wpl-button a {
+		padding-bottom:10px;
+	}
+	.wpl-button a span {
+		display:none;
+	}
+}
 .wpl-count {
 	clear:both;
+	text-overflow:ellipsis;
+	overflow:hidden;
 }
 .wpl-count-text {
 	line-height:1.6;

diff --git a/projects/plugins/jetpack/extensions/blocks/like/tools/update-editor-styles.js b/projects/plugins/jetpack/extensions/blocks/like/tools/update-editor-styles.js
@@ -31,7 +31,11 @@ function processCSS( css ) {
 	// Remove body and HTML styles
 	let processedCSS = css.replace( /body[^{]*\{[^}]*\}/g, '' );
 	processedCSS = processedCSS.replace( /html[^{]*\{[^}]*\}/g, '' );
-
+	// Convert media queries to container queries
+	processedCSS = processedCSS.replace(
+		/@media(?:\s+only\s+screen)?\s*(and)?\s*\(([^)]+)\)/g,
+		'@container ($2)'
+	);
 	// Pretty print the CSS
 	processedCSS = prettyPrintCSS( processedCSS );
 
@@ -42,7 +46,13 @@ function processCSS( css ) {
         padding: 0 16px 16px 52px;
         margin-top: -12px;
     }
-}`;
+}
+
+// Hide the Like block if it tries to load in the editor (e.g. as a part of the Query Loop block).
+.wp-block-jetpack-like .sharedaddy {
+	display: none;
+}
+`;
 
 	const customRule2 = `
 	/* Overrides to fix CSS conflicts within editor. */