Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Commit

Permalink
Refactor responsive behavior to better deal with nested .alignwide an…
Browse files Browse the repository at this point in the history 
…d .alignfull blocks. (#701)

* Refactor responsive behavior to better deal with nested .alignwide and .alignfull blocks.

* Improve alignment classes to work with floated blocks.

* Code tidying

* More code tidying and improvements to pass travis tests

* Updating editor styles

* TwentyTwenty: Cleanup editor styles (wip).

* TwentyTwenty: Clean up horiz spacing, and remove conditional top/bottom padding.

* TwentyTwenty: Optimising alignment styles.

* TwentyTwenty: Fix gallery margins to work with new structure.

* TwentyTwenty: Fix large style quote-block margins to work with new structure.

* TwentyNineteen: Cleanup margins in latest comments block.

* TwentyTwenty: Make figcaption match entry-content line length.

* Twenty Twenty: Reverting responsive margins to match orginal design.

* Twenty Twenty: Reverting responsive margins to match orginal design, make author bio width match original design.

* Twenty Twenty: Cleaning up editor styles to match nested behaviors, update default marging for non-wide/full alignment blocks.

* Twenty Twenty: Only allow varying padding on top-level group blocks to ensure expected appreance in nested blocks.

* Twenty Twenty: Only allow varying padding on top-level group blocks to ensure expected appreance in nested blocks in the editor.
  • Loading branch information
@allancole @pattonwebz
allancole authored and pattonwebz committed Nov 11, 2019
1 parent 26bd8fe commit fe07e33
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 136 deletions.
124 changes: 79 additions & 45 deletions assets/css/editor-style-block.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,6 @@ Inter variable font. Usage:
max-width: 610px;
}

.wp-block[data-align="wide"] .wp-block,
.wp-block[data-align="full"] .wp-block {
max-width: none;
}

.wp-block[data-align="wide"] .wp-block[data-align="wide"],
.wp-block[data-align="full"] .wp-block[data-align="wide"] {
max-width: 1200px;
Expand All @@ -106,14 +101,10 @@ Inter variable font. Usage:
}

.wp-block[data-align="wide"] {
margin-bottom: 30px;
margin-top: 30px;
max-width: 1200px;
}

.wp-block[data-align="full"] {
margin-bottom: 50px;
margin-top: 50px;
max-width: none;
}

Expand Down Expand Up @@ -179,6 +170,30 @@ Inter variable font. Usage:
background-color: #cd2653;
}

.has-secondary-color {
color: #6d6d6d;
}

.has-secondary-background-color {
background-color: #6d6d6d;
}

.has-subtle-background-color {
color: #dcd7ca;
}

.has-subtle-background-background-color {
background-color: #dcd7ca;
}

.has-background-color {
color: #6d6d6d;
}

.has-background-background-color {
background-color: #6d6d6d;
}

/* GENERAL COLORS */

.has-black-background-color {
Expand Down Expand Up @@ -678,15 +693,29 @@ hr.wp-block-separator.is-style-dots::before {
.editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container,
.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
margin: 0 auto;
max-width: 1200px;
width: calc(100% - 40px);
}

[data-align="left"] .wp-block-cover,
[data-align="left"] .wp-block-cover-image,
[data-align="right"] .wp-block-cover,
[data-align="right"] .wp-block-cover-image {
max-width: 260px;
.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"],
.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] {
height: auto;
max-height: none;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover {
text-align: left;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
text-align: right;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit,
.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
float: none;
margin-left: 0;
margin-right: 0;
max-width: 100%;
}

.wp-block-cover-image .wp-block-cover-image-text,
Expand Down Expand Up @@ -1052,6 +1081,33 @@ hr.wp-block-separator.is-style-dots::before {
margin: 0;
}

/* BLOCK: COVER */

.wp-block[data-type="core/cover"][data-align="left"] [data-block],
.wp-block[data-type="core/cover"][data-align="right"] [data-block] {
margin-top: 0;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit {
float: right;
margin-left: 20px;
max-width: 260px;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
float: left;
margin-right: 20px;
max-width: 260px;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before {
margin-right: 0;
}

.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before {
margin-left: 0;
}

/* BLOCK: PULL QUOTE */

.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"],
Expand Down Expand Up @@ -1131,12 +1187,6 @@ hr.wp-block-separator.is-style-dots::before {
font-size: 21px;
}

.wp-block[data-align="wide"],
.wp-block[data-align="full"] {
margin-bottom: 60px;
margin-top: 60px;
}

/* TYPOGRAPHY */

.editor-post-title__block .editor-post-title__input,
Expand Down Expand Up @@ -1208,10 +1258,17 @@ hr.wp-block-separator.is-style-dots::before {

/* BLOCK: GROUP */

.editor-styles-wrapper .wp-block-group.has-background {
.editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background,
.editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background,
.editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background {
padding: 40px;
}

.editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background,
.editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background {
padding: 80px;
}

/* BLOCK: LATEST POSTS */

/* BLOCK: PULLQUOTE */
Expand Down Expand Up @@ -1283,27 +1340,12 @@ hr.wp-block-separator.is-style-dots::before {
@media ( min-width: 1000px ) {


/* STRUCTURE */

.wp-block[data-align="wide"],
.wp-block[data-align="full"] {
margin-bottom: 80px;
margin-top: 80px;
}

/* BLOCK: COLUMNS */

.wp-block-column {
font-size: 18px;
}

/* BLOCK: GROUP */

.wp-block[data-align="wide"] .wp-block-group.has-background,
.wp-block[data-align="full"] .wp-block-group.has-background {
padding: 80px 40px;
}

/* BLOCK: SEPARATOR */

hr.wp-block-separator {
Expand Down Expand Up @@ -1334,14 +1376,6 @@ hr.wp-block-separator.is-style-dots::before {
font-size: 18px;
}

/* STRUCTURE */

.wp-block[data-align="wide"],
.wp-block[data-align="full"] {
margin-bottom: 80px;
margin-top: 80px;
}

/* BLOCK: PULLQUOTE */

.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color,
Expand Down
Loading

0 comments on commit fe07e33

Please sign in to comment.