WordPress · shail-mehta · Aug 25, 2024 · Aug 25, 2024 · Aug 25, 2024 · Aug 25, 2024
@@ -1,8 +1,3 @@
-.wp-block-archives {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-}
-
 .wp-block-archives-dropdown {
 	label {
 		display: block;

@@ -1,6 +1,4 @@
 .wp-block-audio {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.

@@ -1,6 +1,4 @@
 .wp-block-avatar {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	line-height: 0;
 	img {
 		box-sizing: border-box;

@@ -8,7 +8,6 @@ $blocks-block__margin: 0.5em;
 	display: inline-block;
 	text-align: center;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
-	box-sizing: border-box;
 
 	&.aligncenter {
 		text-align: center;

@@ -1,6 +1,4 @@
 .wp-block-categories {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	&.alignleft {
 		/*rtl:ignore*/

@@ -1,7 +1,4 @@
 .wp-block-code {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-
 	// Provide a minimum of overflow handling and ensure the code markup inherits
 	// the font-family set on pre.
 	code {

@@ -1,6 +1,5 @@
 .wp-block-columns {
 	display: flex;
-	box-sizing: border-box;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap !important;

@@ -3,8 +3,3 @@
 	font-size: 0.875em;
 	line-height: 1.5;
 }
-
-.wp-block-comment-content {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-}
@@ -1,6 +1,4 @@
 .wp-block-comment-template {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;

@@ -1,7 +1,5 @@
 /* Styles for backwards compatibility with the legacy `post-comments` block */
 .wp-block-post-comments {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	/* utility classes */
 	.alignleft {

@@ -162,6 +162,15 @@ html :where(img[class*="wp-image-"]) {
 	margin: 0 0 1em 0;
 }
 
+/**
+ * Applies box-sizing: border-box; to elements with a class containing 'wp-block-'
+ * and a style attribute containing 'border'.
+ * This ensures consistent box-sizing behavior and makes layout calculations more predictable.
+ */
+[class*="wp-block-"][style*="border"] {
+	box-sizing: border-box;
+}
+
 // Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
 // This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
 html :where(.is-position-sticky) {

@@ -12,8 +12,6 @@
 	overflow: hidden;
 	// Use clip instead of overflow: hidden so that sticky position works on child elements.
 	overflow: clip;
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
 	/*rtl:raw: direction: ltr; */
 

@@ -1,7 +1,3 @@
-.wp-block-details {
-	box-sizing: border-box;
-}
-
 .wp-block-details summary {
 	cursor: pointer;
 }
@@ -1,6 +1,4 @@
 .wp-block-file {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	&:not(.wp-element-button) {
 		font-size: 0.8em;

@@ -4,9 +4,6 @@ ol.wp-block-latest-comments {
 	// Due to low specificity this will be safely overridden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
-
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 }
 
 // Following styles leverage :where so that typography block support styles and

@@ -1,6 +1,4 @@
 .wp-block-latest-posts {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	&.alignleft {
 		/*rtl:ignore*/

@@ -6,8 +6,6 @@
 	display: grid;
 	grid-template-columns: 50% 1fr;
 	grid-template-rows: auto;
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	&.has-media-on-the-right {
 		grid-template-columns: 1fr 50%;

@@ -1,7 +1,6 @@
 .wp-block-post-author {
 	display: flex;
 	flex-wrap: wrap;
-	box-sizing: border-box;
 
 	&__byline {
 		width: 100%;

@@ -14,8 +14,6 @@
 }
 
 .wp-block-post-comments-form {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	&[style*="font-weight"] :where(.comment-reply-title) {
 		font-weight: inherit;

@@ -1,8 +1,5 @@
 // Lowest specificity on wrapper margins to avoid overriding layout styles.
 :where(.wp-block-post-excerpt) {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

@@ -1,6 +1,4 @@
 .wp-block-post-terms {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	.wp-block-post-terms__separator {
 		white-space: pre-wrap;

@@ -1,7 +1,5 @@
 .wp-block-post-title {
 	word-break: break-word;
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	a {
 		display: inline-block;

@@ -1,6 +1,4 @@
 .wp-block-preformatted {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	white-space: pre-wrap;
 }
 

@@ -1,7 +1,6 @@
 .wp-block-pullquote {
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
-	box-sizing: border-box;
 	margin: 0 0 1em 0;
 	padding: 4em 0;
 

@@ -1,5 +1,4 @@
 .wp-block-quote {
-	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
 	&.is-style-large:where(:not(.is-style-plain)),

@@ -112,7 +112,6 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
 	border: 1px solid $gray-600;
-	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;

@@ -1,6 +1,4 @@
 .wp-block-site-logo {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	line-height: 0;
 
 	a {

@@ -1,7 +1,4 @@
 .wp-block-site-title {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-
 	:where(a) {
 		color: inherit;
 	}

@@ -1,6 +1,4 @@
 .wp-block-social-links {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 
 	padding-left: 0;
 	padding-right: 0;

@@ -10,9 +10,7 @@
 @import "./comments/style.scss";
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
-@import "./comment-date/style.scss";
 @import "./comment-content/style.scss";
-@import "./comment-author-name/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
 @import "./embed/style.scss";
@@ -25,42 +23,34 @@
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";
 @import "./list/style.scss";
-@import "./loginout/style.scss";
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
-@import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-content/style.scss";
-@import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
 @import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
-@import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
-@import "./post-author-name/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
-@import "./query-title/style.scss";
 @import "./quote/style.scss";
 @import "./read-more/style.scss";
 @import "./rss/style.scss";
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
-@import "./site-tagline/style.scss";
 @import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
-@import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";

@@ -1,7 +1,4 @@
 .wp-block-tag-cloud {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
-
 	&.aligncenter {
 		text-align: center;
 		justify-content: center;

@@ -1,7 +1,5 @@
 // Lowest specificity on wrapper margins to avoid overriding layout styles.
 :where(.wp-block-term-description) {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

@@ -1,6 +1,4 @@
 .wp-block-video {
-	// This block has customizable padding, border-box makes that more predictable.
-	box-sizing: border-box;
 	video {
 		width: 100%;
 		vertical-align: middle;