-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
editor.scss
171 lines (144 loc) · 5.1 KB
/
editor.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
// These margins make sure that nested blocks stack/overlay with the parent block chrome
// This is sort of an experiment at making sure the editor looks as much like the end result as possible
// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
// When using CSS grid, margins do not collapse on the container.
.wp-block-columns .block-editor-block-list__layout {
// This max-width is used to constrain the main editor column, it should not cascade into columns
.block-editor-block-list__block {
max-width: none;
}
}
// Ideally all block toolbars should be positioned the same.
.components-popover.block-editor-block-list__block-popover
.components-popover__content
.block-editor-block-contextual-toolbar[data-type="core/column"] {
margin-left: 0;
}
.wp-block-columns {
display: block;
> .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
// Responsiveness: Allow wrapping on mobile.
flex-wrap: wrap;
@include break-medium() {
flex-wrap: nowrap;
}
// Set full heights on Columns to enable vertical alignment preview
> [data-type="core/column"],
> [data-type="core/column"] .block-core-columns {
display: flex;
flex-direction: column;
// This flex rule fixes an issue in IE11.
flex: 1 1 auto;
// IE11 does not support `position: sticky`, so we use it here to serve correct Flex rules to modern browsers.
@supports (position: sticky) {
flex: 1;
}
}
// Adjust the individual column block.
> [data-type="core/column"] {
// On mobile, only a single column is shown, so match adjacent block paddings.
padding-left: 0;
padding-right: 0;
margin-left: -$block-padding;
margin-right: -$block-padding;
// Zero out margins.
margin-top: 0;
margin-bottom: 0;
// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;
// Prevent long unbroken words from overflowing.
word-break: break-word; // For back-compat.
overflow-wrap: break-word; // New standard.
// Responsiveness: Show at most one columns on mobile.
flex-basis: 100%;
// Beyond mobile, allow 2 columns.
@include break-small() {
flex-basis: calc(50% - (#{$grid-size-large}));
flex-grow: 0;
margin-left: 0;
margin-right: 0;
}
// Add space between columns. Themes can customize this if they wish to work differently.
// This has to match the same padding applied in style.scss.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
@include break-small() {
&:nth-child(even) {
margin-left: calc(#{$grid-size-large * 2});
}
}
// When columns are in a single row, add space before all except the first.
@include break-medium() {
&:not(:first-child) {
margin-left: calc(#{$grid-size-large * 2});
}
}
// Remove Block "padding" so individual Column is flush with parent Columns
&::before {
left: 0;
right: 0;
}
// The Columns block is a flex-container, therefore it nullifies margin collapsing.
// Therefore, blocks inside this will appear to create a double margin.
// We compensate for this using negative margins.
> .block-core-columns > .block-editor-inner-blocks {
margin-top: -$default-block-margin;
margin-bottom: -$default-block-margin;
}
}
}
}
/**
* Columns act as as a "passthrough container"
* and therefore has its vertical margins/padding removed via negative margins
* therefore we need to compensate for this here by doubling the spacing on the
* vertical to ensure there is equal visual spacing around the inserter. Note there
* is no formal API for a "passthrough" Block so this is an edge case overide
*/
[data-type="core/columns"] {
.block-list-appender {
margin-top: $block-padding*2;
margin-bottom: $block-padding*2;
}
}
/**
* Vertical Alignment Preview
* note: specificity is important here to ensure individual
* * columns alignment is prioritised over parent column alignment
*
*/
.are-vertically-aligned-top .block-core-columns,
div.block-core-columns.is-vertically-aligned-top {
justify-content: flex-start;
}
.are-vertically-aligned-center .block-core-columns,
div.block-core-columns.is-vertically-aligned-center {
justify-content: center;
}
.are-vertically-aligned-bottom .block-core-columns,
div.block-core-columns.is-vertically-aligned-bottom {
justify-content: flex-end;
}
/**
* Fixes single Column breadcrumb position.
*/
[data-type="core/column"] > .editor-block-list__breadcrumb {
left: -$block-left-border-width;
}
/**
* Make single Column overlay not extend past boundaries of parent
*/
.block-core-columns > .block-editor-inner-blocks.has-overlay::after {
left: 0;
right: 0;
}
// Fullwide: show margin left/right to ensure there's room for the side UI.
// This is not a 1:1 preview with the front-end where these margins would presumably be zero.
[data-type="core/columns"][data-align="full"] .wp-block-columns {
padding-left: $block-padding;
padding-right: $block-padding;
@include break-small() {
padding-left: $block-container-side-padding;
padding-right: $block-container-side-padding;
}
}