Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply Global Border-Box Sizing to all blocks that have a border style #64788

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions packages/block-library/src/archives/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/audio/style.scss
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/avatar/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/button/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/categories/style.scss
Original file line number Diff line number Diff line change
@@ -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*/
Expand Down
3 changes: 0 additions & 3 deletions packages/block-library/src/code/style.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/columns/style.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.wp-block-columns {
display: flex;
box-sizing: border-box;

// Responsiveness: Allow wrapping on mobile.
flex-wrap: wrap !important;
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/comment-author-name/style.scss

This file was deleted.

5 changes: 0 additions & 5 deletions packages/block-library/src/comment-content/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 0 additions & 4 deletions packages/block-library/src/comment-date/style.scss

This file was deleted.

2 changes: 0 additions & 2 deletions packages/block-library/src/comment-template/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/comments/style.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions packages/block-library/src/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One catch with this selector is that it would only apply to blocks with border styles applied on the block instance. If a border was applied to a block type via global styles it wouldn't have the correct box-sizing.

This also only covers the application of borders where box-sizing has historically been set for blocks that adopt padding support as well.

Copy link
Member Author

@shail-mehta shail-mehta Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your valuable feedback. I will work on this.

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) {
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; */

Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/details/style.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.wp-block-details {
box-sizing: border-box;
}

.wp-block-details summary {
cursor: pointer;
}
2 changes: 0 additions & 2 deletions packages/block-library/src/file/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
3 changes: 0 additions & 3 deletions packages/block-library/src/latest-comments/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/latest-posts/style.scss
Original file line number Diff line number Diff line change
@@ -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*/
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/loginout/style.scss

This file was deleted.

2 changes: 0 additions & 2 deletions packages/block-library/src/media-text/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/post-author-biography/style.scss

This file was deleted.

4 changes: 0 additions & 4 deletions packages/block-library/src/post-author-name/style.scss

This file was deleted.

1 change: 0 additions & 1 deletion packages/block-library/src/post-author/style.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.wp-block-post-author {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;

&__byline {
width: 100%;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/post-comments-form/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/post-date/style.scss

This file was deleted.

3 changes: 0 additions & 3 deletions packages/block-library/src/post-excerpt/style.scss
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/post-terms/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/post-time-to-read/style.scss

This file was deleted.

2 changes: 0 additions & 2 deletions packages/block-library/src/post-title/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/preformatted/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/pullquote/style.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/query-title/style.scss

This file was deleted.

1 change: 0 additions & 1 deletion packages/block-library/src/quote/style.scss
Original file line number Diff line number Diff line change
@@ -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)),
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/search/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/site-logo/style.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/site-tagline/style.scss

This file was deleted.

3 changes: 0 additions & 3 deletions packages/block-library/src/site-title/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/social-links/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
10 changes: 0 additions & 10 deletions packages/block-library/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/table-of-contents/style.scss

This file was deleted.

3 changes: 0 additions & 3 deletions packages/block-library/src/tag-cloud/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/term-description/style.scss
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/video/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Loading