Convert all px values in front-facing styles to relative (em) uni…

…ts (#24523) * Button Block: Use relative instead of absolute units * Use relative units for calendar paddings * Paragraph block: Use relative instead of absolute units * Text Columns: Prefer relative units * Quote block: Prefer relative units * Pullquote block: Prefer relative units * also apply changes to native * Latest Comments Block: Prefer relative units * Use relative units for social-icons block * Don't use $grid-unit-* vars for front-facing styles * Avoid using $default-block-margin for front-facing styles * Convert all remaining pixel values to rem * Use em instead of rem * Use the vars * restore original code block padding * Update packages/block-library/src/button/style.scss Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com> * Update packages/block-library/src/latest-comments/style.scss Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com> * Move vars to separate "group" and fix comments capitalization * this value is closer to the legacy one * no reason for the padding to change here since it was already using em * Update packages/base-styles/_variables.scss Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com> * Value needs to change since it's now relative to the font-size * Fix calculations for relative units in the gallery block * Fix social links editor styles * Revert social-icons style mods Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
WordPress · Aug 28, 2020 · bc77362 · bc77362
1 parent e6d4483
commit bc77362
Show file tree

Hide file tree

Showing 24 changed files with 83 additions and 80 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -81,9 +81,6 @@ $block-padding: 14px; // Space between block footprint and focus boundaries. The
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
-$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
-$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
-$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
 $dimmed-opacity: 1;
 
 $block-edge-to-content: 16px;
@@ -101,3 +98,10 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
 
 $radius-round: 50%;
 $radius-block-ui: 2px;
+
+/**
+ * Block paddings.
+ */
+// Padding for blocks with a background color (e.g. paragraph or group).
+$block-bg-padding--v: 1.25em;
+$block-bg-padding--h: 2.375em;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -1,4 +1,4 @@
-$blocks-button__height: 56px;
+$blocks-button__height: 3.1em;
 
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
@@ -10,8 +10,8 @@ $blocks-button__height: 56px;
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
-	font-size: $big-font-size;
-	padding: 12px 24px;
+	font-size: 1.125em;
+	padding: 0.667em 1.333em;
 	text-align: center;
 	text-decoration: none;
 	overflow-wrap: break-word;

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -1,8 +1,8 @@
 // Increased specificity to override blocks default margin.
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin-right: $grid-unit-10;
-	margin-bottom: $grid-unit-10;
+	margin-right: 0.5em;
+	margin-bottom: 0.5em;
 
 	&:last-child {
 		margin-right: 0;
@@ -13,7 +13,7 @@
 	/*rtl:ignore*/
 	margin-right: 0;
 	/*rtl:ignore*/
-	margin-left: $grid-unit-10;
+	margin-left: 0.5em;
 
 	&:first-child {
 		margin-left: 0;
@@ -24,7 +24,7 @@
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
-	margin-right: $grid-unit-10;
+	margin-right: 0.5em;
 
 	&:last-child {
 		margin-right: 0;

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
@@ -3,7 +3,7 @@
 
 	th,
 	tbody td {
-		padding: 4px;
+		padding: 0.25em;
 		border: 1px solid $gray-200;
 	}
 

diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
@@ -1,6 +1,6 @@
 .wp-block-code {
 	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
+	font-size: 0.9em;
 	color: $gray-900;
 	padding: 0.8em 1em;
 	border: 1px solid $gray-200;

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,6 @@
 .wp-block-columns {
 	display: flex;
-	margin-bottom: $default-block-margin;
+	margin-bottom: 1.75em;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
@@ -35,13 +35,13 @@
 		// As with mobile styles, this must be important since the Column
 		// assigns its own width as an inline style, which should take effect
 		// starting at `break-medium`.
-		flex-basis: calc(50% - #{$grid-unit-20}) !important;
+		flex-basis: calc(50% - 1em) !important;
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2em;
 		}
 	}
 
@@ -65,7 +65,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2em;
 		}
 	}
 }

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -9,7 +9,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: $grid-unit-20;
+	padding: 1em;
 
 	&.has-parallax {
 		background-attachment: fixed;
@@ -92,7 +92,7 @@
 	}
 
 	.wp-block-cover__inner-container {
-		width: calc(100% - 70px);
+		width: calc(100% - 4.375em);
 		z-index: z-index(".wp-block-cover__inner-container");
 		color: $white;
 	}
@@ -218,6 +218,6 @@ section.wp-block-cover-image > h2,
 	z-index: 1;
 	margin-bottom: 0;
 	max-width: $content-width;
-	padding: $block-padding;
+	padding: 0.44em;
 	text-align: center;
 }
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -14,7 +14,7 @@
 		background: $dark-gray-700;
 		border-radius: 2em;
 		color: $white;
-		font-size: $default-font-size;
+		font-size: 0.8em;
 		padding: 0.5em 1em;
 	}
 

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -10,7 +10,7 @@
 	.blocks-gallery-image,
 	.blocks-gallery-item {
 		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 $grid-unit-20 $grid-unit-20 0;
+		margin: 0 1em 1em 0;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -51,11 +51,12 @@
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;
-			padding: 40px 10px 9px;
+			padding: 3em 0.77em 0.7em;
 			color: $white;
 			text-align: center;
-			font-size: $default-font-size;
+			font-size: 0.8em;
 			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			box-sizing: border-box;
 
 			img {
 				display: inline;
@@ -84,7 +85,7 @@
 	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc(50% - #{ $grid-unit-20 });
+		width: calc(50% - 1em);
 
 		&:nth-of-type(even) {
 			margin-right: 0;
@@ -102,8 +103,8 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ 100% / $i } - #{ $grid-unit-20 * ( $i - 1 ) / $i });
-				margin-right: $grid-unit-20;
+				width: calc(#{ 100% / $i } - #{ 1em * ( $i - 1 ) / $i });
+				margin-right: 1em;
 			}
 		}
 

diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
@@ -1,16 +1,15 @@
 .wp-block-latest-comments__comment {
-	font-size: 15px;
 	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
 	.has-avatars & {
-		min-height: 36px;
+		min-height: 2.25em;
 		list-style: none;
 
 		.wp-block-latest-comments__comment-meta,
 		.wp-block-latest-comments__comment-excerpt {
-			margin-left: 52px;
+			margin-left: 3.25em;
 		}
 	}
 
@@ -21,22 +20,22 @@
 }
 
 .wp-block-latest-comments__comment-excerpt p {
-	font-size: 14px;
+	font-size: 0.875em;
 	line-height: 1.8;
-	margin: 5px 0 20px;
+	margin: 0.36em 0 1.4em;
 }
 
 .wp-block-latest-comments__comment-date {
 	display: block;
-	font-size: 12px;
+	font-size: 0.75em;
 }
 
 .wp-block-latest-comments .avatar,
 .wp-block-latest-comments__comment-avatar {
-	border-radius: 24px;
+	border-radius: 1.5em;
 	display: block;
 	float: left;
-	height: 40px;
-	margin-right: 12px;
-	width: 40px;
+	height: 2.5em;
+	margin-right: 0.75em;
+	width: 2.5em;
 }
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -20,15 +20,15 @@
 		padding: 0;
 
 		li {
-			margin: 0 20px 20px 0;
+			margin: 0 1.25em 1.25em 0;
 			width: 100%;
 		}
 	}
 
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 20px);
+				width: calc((100% / #{ $i }) - 1.25em);
 			}
 		}
 	}
@@ -38,12 +38,12 @@
 .wp-block-latest-posts__post-author {
 	display: block;
 	color: $dark-gray-300;
-	font-size: $default-font-size;
+	font-size: 0.8125em;
 }
 
 .wp-block-latest-posts__post-excerpt {
-	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-20;
+	margin-top: 0.5em;
+	margin-bottom: 1em;
 }
 
 .wp-block-latest-posts__featured-image {

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -28,7 +28,6 @@
 
 // Styles for submenu flyout
 .has-child {
-	$navigation-vertical-padding: $grid-unit-10 * 0.75;
 	.wp-block-navigation__container {
 		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
@@ -47,12 +46,12 @@
 				flex-grow: 1;
 			}
 			> .wp-block-navigation-link__submenu-icon {
-				padding-right: $grid-unit-10;
+				padding-right: 0.5em;
 			}
 		}
 
 		@include break-medium {
-			left: $grid-unit-30;
+			left: 1.5em;
 
 			// Nested submenus sit to the left on large breakpoints
 			.wp-block-navigation__container {
@@ -66,7 +65,7 @@
 					right: 100%;
 					height: 100%;
 					display: block;
-					width: $grid-unit-10;
+					width: 0.5em;
 					background: transparent;
 				}
 			}
@@ -105,7 +104,7 @@
 .wp-block-navigation-link__content {
 	color: inherit;
 	text-decoration: none;
-	padding: $grid-unit-10 $grid-unit-10 * 2;
+	padding: 0.5em 1em;
 
 	+ .wp-block-navigation-link__content {
 		padding-top: 0;
@@ -122,7 +121,7 @@
 
 .wp-block-navigation-link__submenu-icon {
 	height: inherit;
-	padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+	padding: 0.375em 1em;
 
 	svg {
 		fill: currentColor;

diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
@@ -1,17 +1,17 @@
 .is-small-text {
-	font-size: 14px;
+	font-size: 0.875em;
 }
 
 .is-regular-text {
-	font-size: 16px;
+	font-size: 1em;
 }
 
 .is-large-text {
-	font-size: 36px;
+	font-size: 2.25em;
 }
 
 .is-larger-text {
-	font-size: 48px;
+	font-size: 3em;
 }
 
 // Don't show the drop cap when editing the paragraph's content. It causes a

diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
@@ -10,11 +10,11 @@
 	}
 
 	&__avatar {
-		margin-right: $grid-unit-20;
+		margin-right: 1em;
 	}
 
 	&__bio {
-		margin-bottom: $grid-unit-10;
+		margin-bottom: 0.7em;
 		font-size: 0.7em;
 	}
 

diff --git a/packages/block-library/src/pullquote/blockquote.native.scss b/packages/block-library/src/pullquote/blockquote.native.scss
@@ -1,8 +1,8 @@
 .quote {
-	font-size: 18px;
+	font-size: 1.125em;
 }
 
 .citation {
-	font-size: 14px;
-	margin-top: 12px;
+	font-size: 0.875em;
+	margin-top: 0.85em;
 }
diff --git a/packages/block-library/src/pullquote/figure.native.scss b/packages/block-library/src/pullquote/figure.native.scss
@@ -1,6 +1,6 @@
 %shared {
 	border-width: 3px 0;
-	padding: 21px 16px;
+	padding: 1.3125em 1em;
 }
 
 .light {