Layout Grid Block - Version 1.0.1

Version Description

  • 26th November 2019 =
  • Fix problem with edit history putting the block into an inbetween state
  • Fix cropping of the grid in the editor
Download this release

Release Info

Developer johnny5
Plugin Icon 128x128 Layout Grid Block
Version 1.0.1
Comparing to
See all releases

Version 1.0.1

Files changed (9) hide show
  1. blocks/front.css +689 -0
  2. blocks/layout-grid.php +24 -0
  3. editor.css +643 -0
  4. index.asset.php +1 -0
  5. index.js +6 -0
  6. index.php +51 -0
  7. license.txt +364 -0
  8. readme.txt +27 -0
  9. style.css +66 -0
blocks/front.css ADDED
@@ -0,0 +1,689 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Grid Block styles.
3
+ * These styles are loaded into both the editor, and the frontend.
4
+ */
5
+ /**
6
+ * Responsive Grid Options
7
+ */
8
+ .wp-block-jetpack-layout-grid {
9
+ display: grid;
10
+ grid-gap: 24px;
11
+ grid-template-columns: repeat(4, 1fr); }
12
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
13
+ grid-column-start: 1; }
14
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
15
+ grid-column-start: 1; }
16
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
17
+ grid-column-start: 1; }
18
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
19
+ grid-column-start: 1; }
20
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
21
+ grid-column-start: 2; }
22
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
23
+ grid-column-start: 2; }
24
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
25
+ grid-column-start: 2; }
26
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
27
+ grid-column-start: 2; }
28
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
29
+ grid-column-start: 3; }
30
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
31
+ grid-column-start: 3; }
32
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
33
+ grid-column-start: 3; }
34
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
35
+ grid-column-start: 3; }
36
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
37
+ grid-column-start: 4; }
38
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
39
+ grid-column-start: 4; }
40
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
41
+ grid-column-start: 4; }
42
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
43
+ grid-column-start: 4; }
44
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
45
+ grid-column-start: 5; }
46
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
47
+ grid-column-start: 5; }
48
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
49
+ grid-column-start: 5; }
50
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
51
+ grid-column-start: 5; }
52
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
53
+ grid-column-start: 6; }
54
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
55
+ grid-column-start: 6; }
56
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
57
+ grid-column-start: 6; }
58
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
59
+ grid-column-start: 6; }
60
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
61
+ grid-column-start: 7; }
62
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
63
+ grid-column-start: 7; }
64
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
65
+ grid-column-start: 7; }
66
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
67
+ grid-column-start: 7; }
68
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
69
+ grid-column-start: 8; }
70
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
71
+ grid-column-start: 8; }
72
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
73
+ grid-column-start: 8; }
74
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
75
+ grid-column-start: 8; }
76
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
77
+ grid-column-start: 9; }
78
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
79
+ grid-column-start: 9; }
80
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
81
+ grid-column-start: 9; }
82
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
83
+ grid-column-start: 9; }
84
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
85
+ grid-column-start: 10; }
86
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
87
+ grid-column-start: 10; }
88
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
89
+ grid-column-start: 10; }
90
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
91
+ grid-column-start: 10; }
92
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
93
+ grid-column-start: 11; }
94
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
95
+ grid-column-start: 11; }
96
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
97
+ grid-column-start: 11; }
98
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
99
+ grid-column-start: 11; }
100
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
101
+ grid-column-start: 12; }
102
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
103
+ grid-column-start: 12; }
104
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
105
+ grid-column-start: 12; }
106
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
107
+ grid-column-start: 12; }
108
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
109
+ grid-column-end: span 1; }
110
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
111
+ grid-column-end: span 1; }
112
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
113
+ grid-column-end: span 1; }
114
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
115
+ grid-column-end: span 1; }
116
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
117
+ grid-column-end: span 2; }
118
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
119
+ grid-column-end: span 2; }
120
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
121
+ grid-column-end: span 2; }
122
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
123
+ grid-column-end: span 2; }
124
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
125
+ grid-column-end: span 3; }
126
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
127
+ grid-column-end: span 3; }
128
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
129
+ grid-column-end: span 3; }
130
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
131
+ grid-column-end: span 3; }
132
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
133
+ grid-column-end: span 4; }
134
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
135
+ grid-column-end: span 4; }
136
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
137
+ grid-column-end: span 4; }
138
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
139
+ grid-column-end: span 4; }
140
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
141
+ grid-column-end: span 5; }
142
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
143
+ grid-column-end: span 5; }
144
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
145
+ grid-column-end: span 5; }
146
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
147
+ grid-column-end: span 5; }
148
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
149
+ grid-column-end: span 6; }
150
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
151
+ grid-column-end: span 6; }
152
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
153
+ grid-column-end: span 6; }
154
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
155
+ grid-column-end: span 6; }
156
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
157
+ grid-column-end: span 7; }
158
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
159
+ grid-column-end: span 7; }
160
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
161
+ grid-column-end: span 7; }
162
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
163
+ grid-column-end: span 7; }
164
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
165
+ grid-column-end: span 8; }
166
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
167
+ grid-column-end: span 8; }
168
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
169
+ grid-column-end: span 8; }
170
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
171
+ grid-column-end: span 8; }
172
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
173
+ grid-column-end: span 9; }
174
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
175
+ grid-column-end: span 9; }
176
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
177
+ grid-column-end: span 9; }
178
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
179
+ grid-column-end: span 9; }
180
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
181
+ grid-column-end: span 10; }
182
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
183
+ grid-column-end: span 10; }
184
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
185
+ grid-column-end: span 10; }
186
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
187
+ grid-column-end: span 10; }
188
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
189
+ grid-column-end: span 11; }
190
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
191
+ grid-column-end: span 11; }
192
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
193
+ grid-column-end: span 11; }
194
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
195
+ grid-column-end: span 11; }
196
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
197
+ grid-column-end: span 12; }
198
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
199
+ grid-column-end: span 12; }
200
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
201
+ grid-column-end: span 12; }
202
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
203
+ grid-column-end: span 12; }
204
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
205
+ grid-row-start: 1; }
206
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
207
+ grid-row-start: 1; }
208
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
209
+ grid-row-start: 1; }
210
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
211
+ grid-row-start: 1; }
212
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
213
+ grid-row-start: 2; }
214
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
215
+ grid-row-start: 2; }
216
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
217
+ grid-row-start: 2; }
218
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
219
+ grid-row-start: 2; }
220
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
221
+ grid-row-start: 3; }
222
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
223
+ grid-row-start: 3; }
224
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
225
+ grid-row-start: 3; }
226
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
227
+ grid-row-start: 3; }
228
+ .wp-block-jetpack-layout-grid.column1-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
229
+ grid-row-start: 4; }
230
+ .wp-block-jetpack-layout-grid.column2-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
231
+ grid-row-start: 4; }
232
+ .wp-block-jetpack-layout-grid.column3-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
233
+ grid-row-start: 4; }
234
+ .wp-block-jetpack-layout-grid.column4-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
235
+ grid-row-start: 4; }
236
+ @media (min-width: 600px) {
237
+ .wp-block-jetpack-layout-grid {
238
+ grid-template-columns: repeat(8, 1fr); }
239
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
240
+ grid-column-start: 1; }
241
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
242
+ grid-column-start: 1; }
243
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
244
+ grid-column-start: 1; }
245
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
246
+ grid-column-start: 1; }
247
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
248
+ grid-column-start: 2; }
249
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
250
+ grid-column-start: 2; }
251
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
252
+ grid-column-start: 2; }
253
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
254
+ grid-column-start: 2; }
255
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
256
+ grid-column-start: 3; }
257
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
258
+ grid-column-start: 3; }
259
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
260
+ grid-column-start: 3; }
261
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
262
+ grid-column-start: 3; }
263
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
264
+ grid-column-start: 4; }
265
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
266
+ grid-column-start: 4; }
267
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
268
+ grid-column-start: 4; }
269
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
270
+ grid-column-start: 4; }
271
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
272
+ grid-column-start: 5; }
273
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
274
+ grid-column-start: 5; }
275
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
276
+ grid-column-start: 5; }
277
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
278
+ grid-column-start: 5; }
279
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
280
+ grid-column-start: 6; }
281
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
282
+ grid-column-start: 6; }
283
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
284
+ grid-column-start: 6; }
285
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
286
+ grid-column-start: 6; }
287
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
288
+ grid-column-start: 7; }
289
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
290
+ grid-column-start: 7; }
291
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
292
+ grid-column-start: 7; }
293
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
294
+ grid-column-start: 7; }
295
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
296
+ grid-column-start: 8; }
297
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
298
+ grid-column-start: 8; }
299
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
300
+ grid-column-start: 8; }
301
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
302
+ grid-column-start: 8; }
303
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
304
+ grid-column-start: 9; }
305
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
306
+ grid-column-start: 9; }
307
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
308
+ grid-column-start: 9; }
309
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
310
+ grid-column-start: 9; }
311
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
312
+ grid-column-start: 10; }
313
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
314
+ grid-column-start: 10; }
315
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
316
+ grid-column-start: 10; }
317
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
318
+ grid-column-start: 10; }
319
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
320
+ grid-column-start: 11; }
321
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
322
+ grid-column-start: 11; }
323
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
324
+ grid-column-start: 11; }
325
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
326
+ grid-column-start: 11; }
327
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
328
+ grid-column-start: 12; }
329
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
330
+ grid-column-start: 12; }
331
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
332
+ grid-column-start: 12; }
333
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
334
+ grid-column-start: 12; }
335
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
336
+ grid-column-end: span 1; }
337
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
338
+ grid-column-end: span 1; }
339
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
340
+ grid-column-end: span 1; }
341
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
342
+ grid-column-end: span 1; }
343
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
344
+ grid-column-end: span 2; }
345
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
346
+ grid-column-end: span 2; }
347
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
348
+ grid-column-end: span 2; }
349
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
350
+ grid-column-end: span 2; }
351
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
352
+ grid-column-end: span 3; }
353
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
354
+ grid-column-end: span 3; }
355
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
356
+ grid-column-end: span 3; }
357
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
358
+ grid-column-end: span 3; }
359
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
360
+ grid-column-end: span 4; }
361
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
362
+ grid-column-end: span 4; }
363
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
364
+ grid-column-end: span 4; }
365
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
366
+ grid-column-end: span 4; }
367
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
368
+ grid-column-end: span 5; }
369
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
370
+ grid-column-end: span 5; }
371
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
372
+ grid-column-end: span 5; }
373
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
374
+ grid-column-end: span 5; }
375
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
376
+ grid-column-end: span 6; }
377
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
378
+ grid-column-end: span 6; }
379
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
380
+ grid-column-end: span 6; }
381
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
382
+ grid-column-end: span 6; }
383
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
384
+ grid-column-end: span 7; }
385
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
386
+ grid-column-end: span 7; }
387
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
388
+ grid-column-end: span 7; }
389
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
390
+ grid-column-end: span 7; }
391
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
392
+ grid-column-end: span 8; }
393
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
394
+ grid-column-end: span 8; }
395
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
396
+ grid-column-end: span 8; }
397
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
398
+ grid-column-end: span 8; }
399
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
400
+ grid-column-end: span 9; }
401
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
402
+ grid-column-end: span 9; }
403
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
404
+ grid-column-end: span 9; }
405
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
406
+ grid-column-end: span 9; }
407
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
408
+ grid-column-end: span 10; }
409
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
410
+ grid-column-end: span 10; }
411
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
412
+ grid-column-end: span 10; }
413
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
414
+ grid-column-end: span 10; }
415
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
416
+ grid-column-end: span 11; }
417
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
418
+ grid-column-end: span 11; }
419
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
420
+ grid-column-end: span 11; }
421
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
422
+ grid-column-end: span 11; }
423
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
424
+ grid-column-end: span 12; }
425
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
426
+ grid-column-end: span 12; }
427
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
428
+ grid-column-end: span 12; }
429
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
430
+ grid-column-end: span 12; }
431
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
432
+ grid-row-start: 1; }
433
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
434
+ grid-row-start: 1; }
435
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
436
+ grid-row-start: 1; }
437
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
438
+ grid-row-start: 1; }
439
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
440
+ grid-row-start: 2; }
441
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
442
+ grid-row-start: 2; }
443
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
444
+ grid-row-start: 2; }
445
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
446
+ grid-row-start: 2; }
447
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
448
+ grid-row-start: 3; }
449
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
450
+ grid-row-start: 3; }
451
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
452
+ grid-row-start: 3; }
453
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
454
+ grid-row-start: 3; }
455
+ .wp-block-jetpack-layout-grid.column1-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
456
+ grid-row-start: 4; }
457
+ .wp-block-jetpack-layout-grid.column2-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
458
+ grid-row-start: 4; }
459
+ .wp-block-jetpack-layout-grid.column3-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
460
+ grid-row-start: 4; }
461
+ .wp-block-jetpack-layout-grid.column4-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
462
+ grid-row-start: 4; } }
463
+ @media (min-width: 1080px) {
464
+ .wp-block-jetpack-layout-grid {
465
+ grid-template-columns: repeat(12, 1fr); }
466
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
467
+ grid-column-start: 1; }
468
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
469
+ grid-column-start: 1; }
470
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
471
+ grid-column-start: 1; }
472
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
473
+ grid-column-start: 1; }
474
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
475
+ grid-column-start: 2; }
476
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
477
+ grid-column-start: 2; }
478
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
479
+ grid-column-start: 2; }
480
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
481
+ grid-column-start: 2; }
482
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
483
+ grid-column-start: 3; }
484
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
485
+ grid-column-start: 3; }
486
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
487
+ grid-column-start: 3; }
488
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
489
+ grid-column-start: 3; }
490
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
491
+ grid-column-start: 4; }
492
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
493
+ grid-column-start: 4; }
494
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
495
+ grid-column-start: 4; }
496
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
497
+ grid-column-start: 4; }
498
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
499
+ grid-column-start: 5; }
500
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
501
+ grid-column-start: 5; }
502
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
503
+ grid-column-start: 5; }
504
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
505
+ grid-column-start: 5; }
506
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
507
+ grid-column-start: 6; }
508
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
509
+ grid-column-start: 6; }
510
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
511
+ grid-column-start: 6; }
512
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
513
+ grid-column-start: 6; }
514
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
515
+ grid-column-start: 7; }
516
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
517
+ grid-column-start: 7; }
518
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
519
+ grid-column-start: 7; }
520
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
521
+ grid-column-start: 7; }
522
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
523
+ grid-column-start: 8; }
524
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
525
+ grid-column-start: 8; }
526
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
527
+ grid-column-start: 8; }
528
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
529
+ grid-column-start: 8; }
530
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
531
+ grid-column-start: 9; }
532
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
533
+ grid-column-start: 9; }
534
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
535
+ grid-column-start: 9; }
536
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
537
+ grid-column-start: 9; }
538
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
539
+ grid-column-start: 10; }
540
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
541
+ grid-column-start: 10; }
542
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
543
+ grid-column-start: 10; }
544
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
545
+ grid-column-start: 10; }
546
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
547
+ grid-column-start: 11; }
548
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
549
+ grid-column-start: 11; }
550
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
551
+ grid-column-start: 11; }
552
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
553
+ grid-column-start: 11; }
554
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
555
+ grid-column-start: 12; }
556
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
557
+ grid-column-start: 12; }
558
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
559
+ grid-column-start: 12; }
560
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
561
+ grid-column-start: 12; }
562
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
563
+ grid-column-end: span 1; }
564
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
565
+ grid-column-end: span 1; }
566
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
567
+ grid-column-end: span 1; }
568
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
569
+ grid-column-end: span 1; }
570
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
571
+ grid-column-end: span 2; }
572
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
573
+ grid-column-end: span 2; }
574
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
575
+ grid-column-end: span 2; }
576
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
577
+ grid-column-end: span 2; }
578
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
579
+ grid-column-end: span 3; }
580
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
581
+ grid-column-end: span 3; }
582
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
583
+ grid-column-end: span 3; }
584
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
585
+ grid-column-end: span 3; }
586
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
587
+ grid-column-end: span 4; }
588
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
589
+ grid-column-end: span 4; }
590
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
591
+ grid-column-end: span 4; }
592
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
593
+ grid-column-end: span 4; }
594
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
595
+ grid-column-end: span 5; }
596
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
597
+ grid-column-end: span 5; }
598
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
599
+ grid-column-end: span 5; }
600
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
601
+ grid-column-end: span 5; }
602
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
603
+ grid-column-end: span 6; }
604
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
605
+ grid-column-end: span 6; }
606
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
607
+ grid-column-end: span 6; }
608
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
609
+ grid-column-end: span 6; }
610
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
611
+ grid-column-end: span 7; }
612
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
613
+ grid-column-end: span 7; }
614
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
615
+ grid-column-end: span 7; }
616
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
617
+ grid-column-end: span 7; }
618
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
619
+ grid-column-end: span 8; }
620
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
621
+ grid-column-end: span 8; }
622
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
623
+ grid-column-end: span 8; }
624
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
625
+ grid-column-end: span 8; }
626
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
627
+ grid-column-end: span 9; }
628
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
629
+ grid-column-end: span 9; }
630
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
631
+ grid-column-end: span 9; }
632
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
633
+ grid-column-end: span 9; }
634
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
635
+ grid-column-end: span 10; }
636
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
637
+ grid-column-end: span 10; }
638
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
639
+ grid-column-end: span 10; }
640
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
641
+ grid-column-end: span 10; }
642
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
643
+ grid-column-end: span 11; }
644
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
645
+ grid-column-end: span 11; }
646
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
647
+ grid-column-end: span 11; }
648
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
649
+ grid-column-end: span 11; }
650
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
651
+ grid-column-end: span 12; }
652
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
653
+ grid-column-end: span 12; }
654
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
655
+ grid-column-end: span 12; }
656
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
657
+ grid-column-end: span 12; }
658
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
659
+ grid-row-start: 1; }
660
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
661
+ grid-row-start: 1; }
662
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
663
+ grid-row-start: 1; }
664
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
665
+ grid-row-start: 1; }
666
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
667
+ grid-row-start: 2; }
668
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
669
+ grid-row-start: 2; }
670
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
671
+ grid-row-start: 2; }
672
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
673
+ grid-row-start: 2; }
674
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
675
+ grid-row-start: 3; }
676
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
677
+ grid-row-start: 3; }
678
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
679
+ grid-row-start: 3; }
680
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
681
+ grid-row-start: 3; }
682
+ .wp-block-jetpack-layout-grid.column1-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) {
683
+ grid-row-start: 4; }
684
+ .wp-block-jetpack-layout-grid.column2-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) {
685
+ grid-row-start: 4; }
686
+ .wp-block-jetpack-layout-grid.column3-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) {
687
+ grid-row-start: 4; }
688
+ .wp-block-jetpack-layout-grid.column4-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
689
+ grid-row-start: 4; } }
blocks/layout-grid.php ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ add_action( 'init', function() {
4
+ register_block_type( 'jetpack/layout-grid', [
5
+ 'editor_script' => 'jetpack-layout-grid',
6
+ 'style' => 'jetpack-layout-grid',
7
+ 'editor_style' => 'jetpack-layout-grid-editor',
8
+ ] );
9
+
10
+ register_block_type( 'jetpack/layout-grid-column', [
11
+ 'editor_script' => 'jetpack-layout-grid',
12
+ 'style' => 'jetpack-layout-grid',
13
+ 'editor_style' => 'jetpack-layout-grid-editor',
14
+ ] );
15
+ } );
16
+
17
+ add_action( 'wp_head', function() {
18
+ wp_enqueue_style(
19
+ 'wpcom-layout-grid-front',
20
+ plugins_url( 'front.css', __FILE__ ),
21
+ [], // no dependencies
22
+ filemtime( plugin_dir_path( __FILE__ ) . 'front.css' )
23
+ );
24
+ } );
editor.css ADDED
@@ -0,0 +1,643 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Visual grid overlay
3
+ */
4
+ .wpcom-overlay-grid {
5
+ position: relative;
6
+ top: 0;
7
+ left: 0;
8
+ bottom: 0;
9
+ right: 0;
10
+ display: grid;
11
+ grid-gap: 24px;
12
+ grid-template-columns: repeat(12, 1fr);
13
+ padding-left: 24px;
14
+ padding-right: 24px;
15
+ z-index: -1; }
16
+ .is-hovered .wpcom-overlay-grid,
17
+ .is-selected .wpcom-overlay-grid {
18
+ position: absolute; }
19
+ .wpcom-overlay-grid .wpcom-overlay-grid__column {
20
+ border-left: 1px solid transparent;
21
+ border-right: 1px solid transparent;
22
+ transition: border .4s ease; }
23
+ .has-child-selected .wpcom-overlay-grid .wpcom-overlay-grid__column,
24
+ .is-hovered .wpcom-overlay-grid .wpcom-overlay-grid__column,
25
+ .is-selected .wpcom-overlay-grid .wpcom-overlay-grid__column {
26
+ border-left: 1px solid #e2e4e7;
27
+ border-right: 1px solid #e2e4e7; }
28
+
29
+ body.is-resizing .wpcom-overlay-grid .wpcom-overlay-grid__column {
30
+ border-left: 1px solid #e2e4e7;
31
+ border-right: 1px solid #e2e4e7; }
32
+
33
+ /**
34
+ * Resize grid overlay
35
+ */
36
+ .wp-block-jetpack-layout-grid .wpcom-resize-grid {
37
+ user-select: none;
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ touch-action: none;
44
+ margin-left: 0;
45
+ margin-right: 0; }
46
+ .wp-block-jetpack-layout-grid .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
47
+ display: grid;
48
+ grid-gap: 24px;
49
+ grid-template-columns: repeat(12, 1fr);
50
+ padding-left: 24px;
51
+ padding-right: 24px; }
52
+ .wp-block-jetpack-layout-grid .wpcom-resize-grid > .wp-block > .editor-block-list__block-edit > [data-block] {
53
+ margin-top: 0;
54
+ margin-bottom: 0; }
55
+ .wp-block-jetpack-layout-grid .wpcom-resize-grid .wp-block {
56
+ max-width: none; }
57
+ .wp-block-jetpack-layout-grid .wpcom-resize-grid.wpcom-resize-grid__resizing .wpcom-resize-grid__column-resizing {
58
+ position: absolute !important;
59
+ height: 100%; }
60
+
61
+ .wpcom-resize-grid__column-hidden {
62
+ display: none; }
63
+
64
+ .wpcom-resize-grid__resizing {
65
+ user-select: none;
66
+ z-index: 10000;
67
+ touch-action: none; }
68
+
69
+ .wpcom-resize-grid__column .components-resizable-box__side-handle {
70
+ z-index: 121; }
71
+
72
+ body.is-resizing [data-type="jetpack/layout-grid"] {
73
+ overflow: inherit; }
74
+
75
+ [data-type="jetpack/layout-grid"][data-align="full"].has-child-selected > .block-editor-block-list__block-edit,
76
+ [data-type="jetpack/layout-grid"][data-align="full"].is-selected > .block-editor-block-list__block-edit,
77
+ body.is-resizing [data-type="jetpack/layout-grid"][data-align="full"] > .block-editor-block-list__block-edit {
78
+ width: 100%; }
79
+
80
+ [data-type="jetpack/layout-grid"][data-align="full"].has-child-selected > .block-editor-block-list__block-edit::before,
81
+ [data-type="jetpack/layout-grid"][data-align="full"].is-selected > .block-editor-block-list__block-edit::before,
82
+ body.is-resizing [data-type="jetpack/layout-grid"][data-align="full"] > .block-editor-block-list__block-edit::before {
83
+ border-left-width: 1px;
84
+ border-right-width: 1px;
85
+ border-style: solid; }
86
+
87
+ /**
88
+ * Grid columns
89
+ */
90
+ .wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
91
+ display: grid;
92
+ grid-gap: 24px;
93
+ grid-template-columns: repeat(12, 1fr);
94
+ margin-left: 0;
95
+ margin-right: 0;
96
+ word-break: break-word;
97
+ overflow-wrap: break-word; }
98
+ .wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .editor-block-list__block-edit > [data-block] {
99
+ margin-top: 0;
100
+ margin-bottom: 0; }
101
+ .wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
102
+ max-width: none; }
103
+
104
+ .wp-block-jetpack-layout-grid {
105
+ display: flex;
106
+ flex-direction: column;
107
+ touch-action: none;
108
+ user-select: none; }
109
+ .wp-block-jetpack-layout-grid.column1-grid__start-1 > .wpcom-resize-grid > .wp-block:nth-child(1),
110
+ .wp-block-jetpack-layout-grid.column1-grid__start-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
111
+ grid-column-start: 1; }
112
+ .wp-block-jetpack-layout-grid.column2-grid__start-1 > .wpcom-resize-grid > .wp-block:nth-child(2),
113
+ .wp-block-jetpack-layout-grid.column2-grid__start-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
114
+ grid-column-start: 1; }
115
+ .wp-block-jetpack-layout-grid.column3-grid__start-1 > .wpcom-resize-grid > .wp-block:nth-child(3),
116
+ .wp-block-jetpack-layout-grid.column3-grid__start-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
117
+ grid-column-start: 1; }
118
+ .wp-block-jetpack-layout-grid.column4-grid__start-1 > .wpcom-resize-grid > .wp-block:nth-child(4),
119
+ .wp-block-jetpack-layout-grid.column4-grid__start-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
120
+ grid-column-start: 1; }
121
+ .wp-block-jetpack-layout-grid.column1-grid__start-2 > .wpcom-resize-grid > .wp-block:nth-child(1),
122
+ .wp-block-jetpack-layout-grid.column1-grid__start-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
123
+ grid-column-start: 2; }
124
+ .wp-block-jetpack-layout-grid.column2-grid__start-2 > .wpcom-resize-grid > .wp-block:nth-child(2),
125
+ .wp-block-jetpack-layout-grid.column2-grid__start-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
126
+ grid-column-start: 2; }
127
+ .wp-block-jetpack-layout-grid.column3-grid__start-2 > .wpcom-resize-grid > .wp-block:nth-child(3),
128
+ .wp-block-jetpack-layout-grid.column3-grid__start-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
129
+ grid-column-start: 2; }
130
+ .wp-block-jetpack-layout-grid.column4-grid__start-2 > .wpcom-resize-grid > .wp-block:nth-child(4),
131
+ .wp-block-jetpack-layout-grid.column4-grid__start-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
132
+ grid-column-start: 2; }
133
+ .wp-block-jetpack-layout-grid.column1-grid__start-3 > .wpcom-resize-grid > .wp-block:nth-child(1),
134
+ .wp-block-jetpack-layout-grid.column1-grid__start-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
135
+ grid-column-start: 3; }
136
+ .wp-block-jetpack-layout-grid.column2-grid__start-3 > .wpcom-resize-grid > .wp-block:nth-child(2),
137
+ .wp-block-jetpack-layout-grid.column2-grid__start-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
138
+ grid-column-start: 3; }
139
+ .wp-block-jetpack-layout-grid.column3-grid__start-3 > .wpcom-resize-grid > .wp-block:nth-child(3),
140
+ .wp-block-jetpack-layout-grid.column3-grid__start-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
141
+ grid-column-start: 3; }
142
+ .wp-block-jetpack-layout-grid.column4-grid__start-3 > .wpcom-resize-grid > .wp-block:nth-child(4),
143
+ .wp-block-jetpack-layout-grid.column4-grid__start-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
144
+ grid-column-start: 3; }
145
+ .wp-block-jetpack-layout-grid.column1-grid__start-4 > .wpcom-resize-grid > .wp-block:nth-child(1),
146
+ .wp-block-jetpack-layout-grid.column1-grid__start-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
147
+ grid-column-start: 4; }
148
+ .wp-block-jetpack-layout-grid.column2-grid__start-4 > .wpcom-resize-grid > .wp-block:nth-child(2),
149
+ .wp-block-jetpack-layout-grid.column2-grid__start-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
150
+ grid-column-start: 4; }
151
+ .wp-block-jetpack-layout-grid.column3-grid__start-4 > .wpcom-resize-grid > .wp-block:nth-child(3),
152
+ .wp-block-jetpack-layout-grid.column3-grid__start-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
153
+ grid-column-start: 4; }
154
+ .wp-block-jetpack-layout-grid.column4-grid__start-4 > .wpcom-resize-grid > .wp-block:nth-child(4),
155
+ .wp-block-jetpack-layout-grid.column4-grid__start-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
156
+ grid-column-start: 4; }
157
+ .wp-block-jetpack-layout-grid.column1-grid__start-5 > .wpcom-resize-grid > .wp-block:nth-child(1),
158
+ .wp-block-jetpack-layout-grid.column1-grid__start-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
159
+ grid-column-start: 5; }
160
+ .wp-block-jetpack-layout-grid.column2-grid__start-5 > .wpcom-resize-grid > .wp-block:nth-child(2),
161
+ .wp-block-jetpack-layout-grid.column2-grid__start-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
162
+ grid-column-start: 5; }
163
+ .wp-block-jetpack-layout-grid.column3-grid__start-5 > .wpcom-resize-grid > .wp-block:nth-child(3),
164
+ .wp-block-jetpack-layout-grid.column3-grid__start-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
165
+ grid-column-start: 5; }
166
+ .wp-block-jetpack-layout-grid.column4-grid__start-5 > .wpcom-resize-grid > .wp-block:nth-child(4),
167
+ .wp-block-jetpack-layout-grid.column4-grid__start-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
168
+ grid-column-start: 5; }
169
+ .wp-block-jetpack-layout-grid.column1-grid__start-6 > .wpcom-resize-grid > .wp-block:nth-child(1),
170
+ .wp-block-jetpack-layout-grid.column1-grid__start-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
171
+ grid-column-start: 6; }
172
+ .wp-block-jetpack-layout-grid.column2-grid__start-6 > .wpcom-resize-grid > .wp-block:nth-child(2),
173
+ .wp-block-jetpack-layout-grid.column2-grid__start-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
174
+ grid-column-start: 6; }
175
+ .wp-block-jetpack-layout-grid.column3-grid__start-6 > .wpcom-resize-grid > .wp-block:nth-child(3),
176
+ .wp-block-jetpack-layout-grid.column3-grid__start-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
177
+ grid-column-start: 6; }
178
+ .wp-block-jetpack-layout-grid.column4-grid__start-6 > .wpcom-resize-grid > .wp-block:nth-child(4),
179
+ .wp-block-jetpack-layout-grid.column4-grid__start-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
180
+ grid-column-start: 6; }
181
+ .wp-block-jetpack-layout-grid.column1-grid__start-7 > .wpcom-resize-grid > .wp-block:nth-child(1),
182
+ .wp-block-jetpack-layout-grid.column1-grid__start-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
183
+ grid-column-start: 7; }
184
+ .wp-block-jetpack-layout-grid.column2-grid__start-7 > .wpcom-resize-grid > .wp-block:nth-child(2),
185
+ .wp-block-jetpack-layout-grid.column2-grid__start-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
186
+ grid-column-start: 7; }
187
+ .wp-block-jetpack-layout-grid.column3-grid__start-7 > .wpcom-resize-grid > .wp-block:nth-child(3),
188
+ .wp-block-jetpack-layout-grid.column3-grid__start-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
189
+ grid-column-start: 7; }
190
+ .wp-block-jetpack-layout-grid.column4-grid__start-7 > .wpcom-resize-grid > .wp-block:nth-child(4),
191
+ .wp-block-jetpack-layout-grid.column4-grid__start-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
192
+ grid-column-start: 7; }
193
+ .wp-block-jetpack-layout-grid.column1-grid__start-8 > .wpcom-resize-grid > .wp-block:nth-child(1),
194
+ .wp-block-jetpack-layout-grid.column1-grid__start-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
195
+ grid-column-start: 8; }
196
+ .wp-block-jetpack-layout-grid.column2-grid__start-8 > .wpcom-resize-grid > .wp-block:nth-child(2),
197
+ .wp-block-jetpack-layout-grid.column2-grid__start-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
198
+ grid-column-start: 8; }
199
+ .wp-block-jetpack-layout-grid.column3-grid__start-8 > .wpcom-resize-grid > .wp-block:nth-child(3),
200
+ .wp-block-jetpack-layout-grid.column3-grid__start-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
201
+ grid-column-start: 8; }
202
+ .wp-block-jetpack-layout-grid.column4-grid__start-8 > .wpcom-resize-grid > .wp-block:nth-child(4),
203
+ .wp-block-jetpack-layout-grid.column4-grid__start-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
204
+ grid-column-start: 8; }
205
+ .wp-block-jetpack-layout-grid.column1-grid__start-9 > .wpcom-resize-grid > .wp-block:nth-child(1),
206
+ .wp-block-jetpack-layout-grid.column1-grid__start-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
207
+ grid-column-start: 9; }
208
+ .wp-block-jetpack-layout-grid.column2-grid__start-9 > .wpcom-resize-grid > .wp-block:nth-child(2),
209
+ .wp-block-jetpack-layout-grid.column2-grid__start-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
210
+ grid-column-start: 9; }
211
+ .wp-block-jetpack-layout-grid.column3-grid__start-9 > .wpcom-resize-grid > .wp-block:nth-child(3),
212
+ .wp-block-jetpack-layout-grid.column3-grid__start-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
213
+ grid-column-start: 9; }
214
+ .wp-block-jetpack-layout-grid.column4-grid__start-9 > .wpcom-resize-grid > .wp-block:nth-child(4),
215
+ .wp-block-jetpack-layout-grid.column4-grid__start-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
216
+ grid-column-start: 9; }
217
+ .wp-block-jetpack-layout-grid.column1-grid__start-10 > .wpcom-resize-grid > .wp-block:nth-child(1),
218
+ .wp-block-jetpack-layout-grid.column1-grid__start-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
219
+ grid-column-start: 10; }
220
+ .wp-block-jetpack-layout-grid.column2-grid__start-10 > .wpcom-resize-grid > .wp-block:nth-child(2),
221
+ .wp-block-jetpack-layout-grid.column2-grid__start-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
222
+ grid-column-start: 10; }
223
+ .wp-block-jetpack-layout-grid.column3-grid__start-10 > .wpcom-resize-grid > .wp-block:nth-child(3),
224
+ .wp-block-jetpack-layout-grid.column3-grid__start-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
225
+ grid-column-start: 10; }
226
+ .wp-block-jetpack-layout-grid.column4-grid__start-10 > .wpcom-resize-grid > .wp-block:nth-child(4),
227
+ .wp-block-jetpack-layout-grid.column4-grid__start-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
228
+ grid-column-start: 10; }
229
+ .wp-block-jetpack-layout-grid.column1-grid__start-11 > .wpcom-resize-grid > .wp-block:nth-child(1),
230
+ .wp-block-jetpack-layout-grid.column1-grid__start-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
231
+ grid-column-start: 11; }
232
+ .wp-block-jetpack-layout-grid.column2-grid__start-11 > .wpcom-resize-grid > .wp-block:nth-child(2),
233
+ .wp-block-jetpack-layout-grid.column2-grid__start-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
234
+ grid-column-start: 11; }
235
+ .wp-block-jetpack-layout-grid.column3-grid__start-11 > .wpcom-resize-grid > .wp-block:nth-child(3),
236
+ .wp-block-jetpack-layout-grid.column3-grid__start-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
237
+ grid-column-start: 11; }
238
+ .wp-block-jetpack-layout-grid.column4-grid__start-11 > .wpcom-resize-grid > .wp-block:nth-child(4),
239
+ .wp-block-jetpack-layout-grid.column4-grid__start-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
240
+ grid-column-start: 11; }
241
+ .wp-block-jetpack-layout-grid.column1-grid__start-12 > .wpcom-resize-grid > .wp-block:nth-child(1),
242
+ .wp-block-jetpack-layout-grid.column1-grid__start-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
243
+ grid-column-start: 12; }
244
+ .wp-block-jetpack-layout-grid.column2-grid__start-12 > .wpcom-resize-grid > .wp-block:nth-child(2),
245
+ .wp-block-jetpack-layout-grid.column2-grid__start-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
246
+ grid-column-start: 12; }
247
+ .wp-block-jetpack-layout-grid.column3-grid__start-12 > .wpcom-resize-grid > .wp-block:nth-child(3),
248
+ .wp-block-jetpack-layout-grid.column3-grid__start-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
249
+ grid-column-start: 12; }
250
+ .wp-block-jetpack-layout-grid.column4-grid__start-12 > .wpcom-resize-grid > .wp-block:nth-child(4),
251
+ .wp-block-jetpack-layout-grid.column4-grid__start-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
252
+ grid-column-start: 12; }
253
+ .wp-block-jetpack-layout-grid.column1-grid__span-1 > .wpcom-resize-grid > .wp-block:nth-child(1),
254
+ .wp-block-jetpack-layout-grid.column1-grid__span-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
255
+ grid-column-end: span 1; }
256
+ .wp-block-jetpack-layout-grid.column2-grid__span-1 > .wpcom-resize-grid > .wp-block:nth-child(2),
257
+ .wp-block-jetpack-layout-grid.column2-grid__span-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
258
+ grid-column-end: span 1; }
259
+ .wp-block-jetpack-layout-grid.column3-grid__span-1 > .wpcom-resize-grid > .wp-block:nth-child(3),
260
+ .wp-block-jetpack-layout-grid.column3-grid__span-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
261
+ grid-column-end: span 1; }
262
+ .wp-block-jetpack-layout-grid.column4-grid__span-1 > .wpcom-resize-grid > .wp-block:nth-child(4),
263
+ .wp-block-jetpack-layout-grid.column4-grid__span-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
264
+ grid-column-end: span 1; }
265
+ .wp-block-jetpack-layout-grid.column4-grid__span-1 > .wpcom-resize-grid > .wp-block:nth-child(5) {
266
+ grid-column-end: span 1; }
267
+ .wp-block-jetpack-layout-grid.column1-grid__span-2 > .wpcom-resize-grid > .wp-block:nth-child(1),
268
+ .wp-block-jetpack-layout-grid.column1-grid__span-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
269
+ grid-column-end: span 2; }
270
+ .wp-block-jetpack-layout-grid.column2-grid__span-2 > .wpcom-resize-grid > .wp-block:nth-child(2),
271
+ .wp-block-jetpack-layout-grid.column2-grid__span-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
272
+ grid-column-end: span 2; }
273
+ .wp-block-jetpack-layout-grid.column3-grid__span-2 > .wpcom-resize-grid > .wp-block:nth-child(3),
274
+ .wp-block-jetpack-layout-grid.column3-grid__span-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
275
+ grid-column-end: span 2; }
276
+ .wp-block-jetpack-layout-grid.column4-grid__span-2 > .wpcom-resize-grid > .wp-block:nth-child(4),
277
+ .wp-block-jetpack-layout-grid.column4-grid__span-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
278
+ grid-column-end: span 2; }
279
+ .wp-block-jetpack-layout-grid.column4-grid__span-2 > .wpcom-resize-grid > .wp-block:nth-child(5) {
280
+ grid-column-end: span 2; }
281
+ .wp-block-jetpack-layout-grid.column1-grid__span-3 > .wpcom-resize-grid > .wp-block:nth-child(1),
282
+ .wp-block-jetpack-layout-grid.column1-grid__span-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
283
+ grid-column-end: span 3; }
284
+ .wp-block-jetpack-layout-grid.column2-grid__span-3 > .wpcom-resize-grid > .wp-block:nth-child(2),
285
+ .wp-block-jetpack-layout-grid.column2-grid__span-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
286
+ grid-column-end: span 3; }
287
+ .wp-block-jetpack-layout-grid.column3-grid__span-3 > .wpcom-resize-grid > .wp-block:nth-child(3),
288
+ .wp-block-jetpack-layout-grid.column3-grid__span-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
289
+ grid-column-end: span 3; }
290
+ .wp-block-jetpack-layout-grid.column4-grid__span-3 > .wpcom-resize-grid > .wp-block:nth-child(4),
291
+ .wp-block-jetpack-layout-grid.column4-grid__span-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
292
+ grid-column-end: span 3; }
293
+ .wp-block-jetpack-layout-grid.column4-grid__span-3 > .wpcom-resize-grid > .wp-block:nth-child(5) {
294
+ grid-column-end: span 3; }
295
+ .wp-block-jetpack-layout-grid.column1-grid__span-4 > .wpcom-resize-grid > .wp-block:nth-child(1),
296
+ .wp-block-jetpack-layout-grid.column1-grid__span-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
297
+ grid-column-end: span 4; }
298
+ .wp-block-jetpack-layout-grid.column2-grid__span-4 > .wpcom-resize-grid > .wp-block:nth-child(2),
299
+ .wp-block-jetpack-layout-grid.column2-grid__span-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
300
+ grid-column-end: span 4; }
301
+ .wp-block-jetpack-layout-grid.column3-grid__span-4 > .wpcom-resize-grid > .wp-block:nth-child(3),
302
+ .wp-block-jetpack-layout-grid.column3-grid__span-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
303
+ grid-column-end: span 4; }
304
+ .wp-block-jetpack-layout-grid.column4-grid__span-4 > .wpcom-resize-grid > .wp-block:nth-child(4),
305
+ .wp-block-jetpack-layout-grid.column4-grid__span-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
306
+ grid-column-end: span 4; }
307
+ .wp-block-jetpack-layout-grid.column4-grid__span-4 > .wpcom-resize-grid > .wp-block:nth-child(5) {
308
+ grid-column-end: span 4; }
309
+ .wp-block-jetpack-layout-grid.column1-grid__span-5 > .wpcom-resize-grid > .wp-block:nth-child(1),
310
+ .wp-block-jetpack-layout-grid.column1-grid__span-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
311
+ grid-column-end: span 5; }
312
+ .wp-block-jetpack-layout-grid.column2-grid__span-5 > .wpcom-resize-grid > .wp-block:nth-child(2),
313
+ .wp-block-jetpack-layout-grid.column2-grid__span-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
314
+ grid-column-end: span 5; }
315
+ .wp-block-jetpack-layout-grid.column3-grid__span-5 > .wpcom-resize-grid > .wp-block:nth-child(3),
316
+ .wp-block-jetpack-layout-grid.column3-grid__span-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
317
+ grid-column-end: span 5; }
318
+ .wp-block-jetpack-layout-grid.column4-grid__span-5 > .wpcom-resize-grid > .wp-block:nth-child(4),
319
+ .wp-block-jetpack-layout-grid.column4-grid__span-5 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
320
+ grid-column-end: span 5; }
321
+ .wp-block-jetpack-layout-grid.column4-grid__span-5 > .wpcom-resize-grid > .wp-block:nth-child(5) {
322
+ grid-column-end: span 5; }
323
+ .wp-block-jetpack-layout-grid.column1-grid__span-6 > .wpcom-resize-grid > .wp-block:nth-child(1),
324
+ .wp-block-jetpack-layout-grid.column1-grid__span-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
325
+ grid-column-end: span 6; }
326
+ .wp-block-jetpack-layout-grid.column2-grid__span-6 > .wpcom-resize-grid > .wp-block:nth-child(2),
327
+ .wp-block-jetpack-layout-grid.column2-grid__span-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
328
+ grid-column-end: span 6; }
329
+ .wp-block-jetpack-layout-grid.column3-grid__span-6 > .wpcom-resize-grid > .wp-block:nth-child(3),
330
+ .wp-block-jetpack-layout-grid.column3-grid__span-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
331
+ grid-column-end: span 6; }
332
+ .wp-block-jetpack-layout-grid.column4-grid__span-6 > .wpcom-resize-grid > .wp-block:nth-child(4),
333
+ .wp-block-jetpack-layout-grid.column4-grid__span-6 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
334
+ grid-column-end: span 6; }
335
+ .wp-block-jetpack-layout-grid.column4-grid__span-6 > .wpcom-resize-grid > .wp-block:nth-child(5) {
336
+ grid-column-end: span 6; }
337
+ .wp-block-jetpack-layout-grid.column1-grid__span-7 > .wpcom-resize-grid > .wp-block:nth-child(1),
338
+ .wp-block-jetpack-layout-grid.column1-grid__span-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
339
+ grid-column-end: span 7; }
340
+ .wp-block-jetpack-layout-grid.column2-grid__span-7 > .wpcom-resize-grid > .wp-block:nth-child(2),
341
+ .wp-block-jetpack-layout-grid.column2-grid__span-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
342
+ grid-column-end: span 7; }
343
+ .wp-block-jetpack-layout-grid.column3-grid__span-7 > .wpcom-resize-grid > .wp-block:nth-child(3),
344
+ .wp-block-jetpack-layout-grid.column3-grid__span-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
345
+ grid-column-end: span 7; }
346
+ .wp-block-jetpack-layout-grid.column4-grid__span-7 > .wpcom-resize-grid > .wp-block:nth-child(4),
347
+ .wp-block-jetpack-layout-grid.column4-grid__span-7 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
348
+ grid-column-end: span 7; }
349
+ .wp-block-jetpack-layout-grid.column4-grid__span-7 > .wpcom-resize-grid > .wp-block:nth-child(5) {
350
+ grid-column-end: span 7; }
351
+ .wp-block-jetpack-layout-grid.column1-grid__span-8 > .wpcom-resize-grid > .wp-block:nth-child(1),
352
+ .wp-block-jetpack-layout-grid.column1-grid__span-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
353
+ grid-column-end: span 8; }
354
+ .wp-block-jetpack-layout-grid.column2-grid__span-8 > .wpcom-resize-grid > .wp-block:nth-child(2),
355
+ .wp-block-jetpack-layout-grid.column2-grid__span-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
356
+ grid-column-end: span 8; }
357
+ .wp-block-jetpack-layout-grid.column3-grid__span-8 > .wpcom-resize-grid > .wp-block:nth-child(3),
358
+ .wp-block-jetpack-layout-grid.column3-grid__span-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
359
+ grid-column-end: span 8; }
360
+ .wp-block-jetpack-layout-grid.column4-grid__span-8 > .wpcom-resize-grid > .wp-block:nth-child(4),
361
+ .wp-block-jetpack-layout-grid.column4-grid__span-8 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
362
+ grid-column-end: span 8; }
363
+ .wp-block-jetpack-layout-grid.column4-grid__span-8 > .wpcom-resize-grid > .wp-block:nth-child(5) {
364
+ grid-column-end: span 8; }
365
+ .wp-block-jetpack-layout-grid.column1-grid__span-9 > .wpcom-resize-grid > .wp-block:nth-child(1),
366
+ .wp-block-jetpack-layout-grid.column1-grid__span-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
367
+ grid-column-end: span 9; }
368
+ .wp-block-jetpack-layout-grid.column2-grid__span-9 > .wpcom-resize-grid > .wp-block:nth-child(2),
369
+ .wp-block-jetpack-layout-grid.column2-grid__span-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
370
+ grid-column-end: span 9; }
371
+ .wp-block-jetpack-layout-grid.column3-grid__span-9 > .wpcom-resize-grid > .wp-block:nth-child(3),
372
+ .wp-block-jetpack-layout-grid.column3-grid__span-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
373
+ grid-column-end: span 9; }
374
+ .wp-block-jetpack-layout-grid.column4-grid__span-9 > .wpcom-resize-grid > .wp-block:nth-child(4),
375
+ .wp-block-jetpack-layout-grid.column4-grid__span-9 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
376
+ grid-column-end: span 9; }
377
+ .wp-block-jetpack-layout-grid.column4-grid__span-9 > .wpcom-resize-grid > .wp-block:nth-child(5) {
378
+ grid-column-end: span 9; }
379
+ .wp-block-jetpack-layout-grid.column1-grid__span-10 > .wpcom-resize-grid > .wp-block:nth-child(1),
380
+ .wp-block-jetpack-layout-grid.column1-grid__span-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
381
+ grid-column-end: span 10; }
382
+ .wp-block-jetpack-layout-grid.column2-grid__span-10 > .wpcom-resize-grid > .wp-block:nth-child(2),
383
+ .wp-block-jetpack-layout-grid.column2-grid__span-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
384
+ grid-column-end: span 10; }
385
+ .wp-block-jetpack-layout-grid.column3-grid__span-10 > .wpcom-resize-grid > .wp-block:nth-child(3),
386
+ .wp-block-jetpack-layout-grid.column3-grid__span-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
387
+ grid-column-end: span 10; }
388
+ .wp-block-jetpack-layout-grid.column4-grid__span-10 > .wpcom-resize-grid > .wp-block:nth-child(4),
389
+ .wp-block-jetpack-layout-grid.column4-grid__span-10 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
390
+ grid-column-end: span 10; }
391
+ .wp-block-jetpack-layout-grid.column4-grid__span-10 > .wpcom-resize-grid > .wp-block:nth-child(5) {
392
+ grid-column-end: span 10; }
393
+ .wp-block-jetpack-layout-grid.column1-grid__span-11 > .wpcom-resize-grid > .wp-block:nth-child(1),
394
+ .wp-block-jetpack-layout-grid.column1-grid__span-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
395
+ grid-column-end: span 11; }
396
+ .wp-block-jetpack-layout-grid.column2-grid__span-11 > .wpcom-resize-grid > .wp-block:nth-child(2),
397
+ .wp-block-jetpack-layout-grid.column2-grid__span-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
398
+ grid-column-end: span 11; }
399
+ .wp-block-jetpack-layout-grid.column3-grid__span-11 > .wpcom-resize-grid > .wp-block:nth-child(3),
400
+ .wp-block-jetpack-layout-grid.column3-grid__span-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
401
+ grid-column-end: span 11; }
402
+ .wp-block-jetpack-layout-grid.column4-grid__span-11 > .wpcom-resize-grid > .wp-block:nth-child(4),
403
+ .wp-block-jetpack-layout-grid.column4-grid__span-11 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
404
+ grid-column-end: span 11; }
405
+ .wp-block-jetpack-layout-grid.column4-grid__span-11 > .wpcom-resize-grid > .wp-block:nth-child(5) {
406
+ grid-column-end: span 11; }
407
+ .wp-block-jetpack-layout-grid.column1-grid__span-12 > .wpcom-resize-grid > .wp-block:nth-child(1),
408
+ .wp-block-jetpack-layout-grid.column1-grid__span-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
409
+ grid-column-end: span 12; }
410
+ .wp-block-jetpack-layout-grid.column2-grid__span-12 > .wpcom-resize-grid > .wp-block:nth-child(2),
411
+ .wp-block-jetpack-layout-grid.column2-grid__span-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
412
+ grid-column-end: span 12; }
413
+ .wp-block-jetpack-layout-grid.column3-grid__span-12 > .wpcom-resize-grid > .wp-block:nth-child(3),
414
+ .wp-block-jetpack-layout-grid.column3-grid__span-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
415
+ grid-column-end: span 12; }
416
+ .wp-block-jetpack-layout-grid.column4-grid__span-12 > .wpcom-resize-grid > .wp-block:nth-child(4),
417
+ .wp-block-jetpack-layout-grid.column4-grid__span-12 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
418
+ grid-column-end: span 12; }
419
+ .wp-block-jetpack-layout-grid.column4-grid__span-12 > .wpcom-resize-grid > .wp-block:nth-child(5) {
420
+ grid-column-end: span 12; }
421
+ .wp-block-jetpack-layout-grid.column1-grid__row-1 > .wpcom-resize-grid > .wp-block:nth-child(1),
422
+ .wp-block-jetpack-layout-grid.column1-grid__row-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
423
+ grid-row-start: 1; }
424
+ .wp-block-jetpack-layout-grid.column2-grid__row-1 > .wpcom-resize-grid > .wp-block:nth-child(2),
425
+ .wp-block-jetpack-layout-grid.column2-grid__row-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
426
+ grid-row-start: 1; }
427
+ .wp-block-jetpack-layout-grid.column3-grid__row-1 > .wpcom-resize-grid > .wp-block:nth-child(3),
428
+ .wp-block-jetpack-layout-grid.column3-grid__row-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
429
+ grid-row-start: 1; }
430
+ .wp-block-jetpack-layout-grid.column4-grid__row-1 > .wpcom-resize-grid > .wp-block:nth-child(4),
431
+ .wp-block-jetpack-layout-grid.column4-grid__row-1 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
432
+ grid-row-start: 1; }
433
+ .wp-block-jetpack-layout-grid.column1-grid__row-2 > .wpcom-resize-grid > .wp-block:nth-child(1),
434
+ .wp-block-jetpack-layout-grid.column1-grid__row-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
435
+ grid-row-start: 2; }
436
+ .wp-block-jetpack-layout-grid.column2-grid__row-2 > .wpcom-resize-grid > .wp-block:nth-child(2),
437
+ .wp-block-jetpack-layout-grid.column2-grid__row-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
438
+ grid-row-start: 2; }
439
+ .wp-block-jetpack-layout-grid.column3-grid__row-2 > .wpcom-resize-grid > .wp-block:nth-child(3),
440
+ .wp-block-jetpack-layout-grid.column3-grid__row-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
441
+ grid-row-start: 2; }
442
+ .wp-block-jetpack-layout-grid.column4-grid__row-2 > .wpcom-resize-grid > .wp-block:nth-child(4),
443
+ .wp-block-jetpack-layout-grid.column4-grid__row-2 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
444
+ grid-row-start: 2; }
445
+ .wp-block-jetpack-layout-grid.column1-grid__row-3 > .wpcom-resize-grid > .wp-block:nth-child(1),
446
+ .wp-block-jetpack-layout-grid.column1-grid__row-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
447
+ grid-row-start: 3; }
448
+ .wp-block-jetpack-layout-grid.column2-grid__row-3 > .wpcom-resize-grid > .wp-block:nth-child(2),
449
+ .wp-block-jetpack-layout-grid.column2-grid__row-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
450
+ grid-row-start: 3; }
451
+ .wp-block-jetpack-layout-grid.column3-grid__row-3 > .wpcom-resize-grid > .wp-block:nth-child(3),
452
+ .wp-block-jetpack-layout-grid.column3-grid__row-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
453
+ grid-row-start: 3; }
454
+ .wp-block-jetpack-layout-grid.column4-grid__row-3 > .wpcom-resize-grid > .wp-block:nth-child(4),
455
+ .wp-block-jetpack-layout-grid.column4-grid__row-3 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
456
+ grid-row-start: 3; }
457
+ .wp-block-jetpack-layout-grid.column1-grid__row-4 > .wpcom-resize-grid > .wp-block:nth-child(1),
458
+ .wp-block-jetpack-layout-grid.column1-grid__row-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(1) {
459
+ grid-row-start: 4; }
460
+ .wp-block-jetpack-layout-grid.column2-grid__row-4 > .wpcom-resize-grid > .wp-block:nth-child(2),
461
+ .wp-block-jetpack-layout-grid.column2-grid__row-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(2) {
462
+ grid-row-start: 4; }
463
+ .wp-block-jetpack-layout-grid.column3-grid__row-4 > .wpcom-resize-grid > .wp-block:nth-child(3),
464
+ .wp-block-jetpack-layout-grid.column3-grid__row-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(3) {
465
+ grid-row-start: 4; }
466
+ .wp-block-jetpack-layout-grid.column4-grid__row-4 > .wpcom-resize-grid > .wp-block:nth-child(4),
467
+ .wp-block-jetpack-layout-grid.column4-grid__row-4 > .block-editor-inner-blocks > .editor-block-list__layout > .wp-block:nth-child(4) {
468
+ grid-row-start: 4; }
469
+
470
+ /**
471
+ * Presets for tablet and mobile - switch the number of columns and layout
472
+ */
473
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-tablet .wpcom-overlay-grid,
474
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-tablet .wpcom-resize-grid,
475
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-tablet > .block-editor-inner-blocks > .block-editor-block-list__layout {
476
+ grid-template-columns: repeat(8, 1fr); }
477
+
478
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-mobile .wpcom-overlay-grid,
479
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-mobile .wpcom-resize-grid,
480
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-mobile > .block-editor-inner-blocks > .block-editor-block-list__layout {
481
+ grid-template-columns: repeat(4, 1fr); }
482
+
483
+ .wpcom-overlay-resize__handle .components-resizable-box__container,
484
+ .wp-block-jetpack-layout-grid-column .components-resizable-box__container {
485
+ position: relative;
486
+ user-select: auto;
487
+ width: auto;
488
+ box-sizing: border-box; }
489
+
490
+ .wpcom-overlay-resize__handle .components-resizable-box__handle,
491
+ .wp-block-jetpack-layout-grid-column .components-resizable-box__handle {
492
+ position: absolute;
493
+ user-select: none;
494
+ cursor: col-resize; }
495
+
496
+ .wpcom-overlay-resize__handle {
497
+ position: absolute;
498
+ left: 0;
499
+ top: 0;
500
+ height: 100%; }
501
+
502
+ [data-type="jetpack/layout-grid"].is-selected .wp-blocks-jetpack-layout-grid__resize-handles .components-resizable-box__handle,
503
+ [data-type="jetpack/layout-grid-column"].is-selected .wp-blocks-jetpack-layout-grid__resize-handles .components-resizable-box__handle {
504
+ display: none;
505
+ z-index: 10000; }
506
+
507
+ [data-type="jetpack/layout-grid"].is-selected .wp-block-jetpack-layout-resizable .wp-blocks-jetpack-layout-grid__resize-handles .components-resizable-box__handle,
508
+ [data-type="jetpack/layout-grid"] .wp-block-jetpack-layout-resizable [data-type="jetpack/layout-grid-column"].is-selected .wp-blocks-jetpack-layout-grid__resize-handles .components-resizable-box__handle {
509
+ display: block; }
510
+
511
+ [data-type="jetpack/layout-grid-column"].is-selected > .block-editor-block-list__block-edit.block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
512
+ left: 18px; }
513
+
514
+ [data-type="jetpack/layout-grid-column"].is-selected > .block-editor-block-list__block-edit.block-editor-block-list__block-edit::before {
515
+ box-shadow: none;
516
+ left: 0;
517
+ right: 0;
518
+ border-left: 1px dashed rgba(66, 88, 99, 0.4);
519
+ border-style: dashed; }
520
+ .is-dark-theme [data-type="jetpack/layout-grid-column"].is-selected > .block-editor-block-list__block-edit.block-editor-block-list__block-edit::before {
521
+ border-left: 1px dashed rgba(255, 255, 255, 0.45); }
522
+
523
+ /* When clicked, hide the fake drag handles and show the real one */
524
+ .wp-block-jetpack-layout-grid__resizing {
525
+ user-select: none;
526
+ z-index: 10000; }
527
+ .wp-block-jetpack-layout-grid__resizing .components-resizable-box__container .components-resizable-box__handle {
528
+ display: none !important; }
529
+
530
+ .wpcom-overlay-resize__handle.components-resizable-box__container .components-resizable-box__handle {
531
+ display: block !important; }
532
+
533
+ .wp-blocks-jetpack-layout-grid__showright.components-resizable-box__container .components-resizable-box__handle-right,
534
+ .wp-blocks-jetpack-layout-grid__showleft.components-resizable-box__container .components-resizable-box__handle-left {
535
+ display: block !important; }
536
+
537
+ /**
538
+ * Margins & Paddings
539
+ */
540
+ [data-type="jetpack/layout-grid"] > .block-editor-block-list__block-edit > [data-block] {
541
+ margin-top: 0;
542
+ margin-bottom: 0; }
543
+
544
+ [data-type="jetpack/layout-grid-column"].wp-block {
545
+ padding-left: 0;
546
+ margin-left: 0;
547
+ padding-right: 0;
548
+ margin-right: 0; }
549
+ [data-type="jetpack/layout-grid-column"].wp-block > .block-editor-block-list__block-edit {
550
+ padding-left: 0;
551
+ margin-left: 0;
552
+ padding-right: 0;
553
+ margin-right: 0; }
554
+
555
+ /**
556
+ * Visual Glitches
557
+ */
558
+ [data-type="jetpack/layout-grid"] .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
559
+ border-color: transparent !important; }
560
+
561
+ [data-type="jetpack/layout-grid-column"] > .block-editor-block-list__block-edit,
562
+ [data-type="jetpack/layout-grid-column"] > .block-editor-block-list__block-edit > [data-block],
563
+ .wp-block-jetpack-layout-grid-column {
564
+ height: 100%;
565
+ border-top: 0.05px solid transparent;
566
+ border-bottom: 0.05px solid transparent; }
567
+
568
+ [data-type="jetpack/layout-grid"][data-align="full"] {
569
+ display: flex;
570
+ flex-direction: column;
571
+ align-items: center; }
572
+ [data-type="jetpack/layout-grid"][data-align="full"] > .block-editor-block-list__block-edit {
573
+ width: calc( 100% + 44px + 44px);
574
+ transition: all .1s ease; }
575
+
576
+ [data-type="jetpack/layout-grid"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar > .block-editor-block-switcher + .block-editor-block-toolbar__slot {
577
+ display: none; }
578
+
579
+ [data-type="jetpack/layout-grid-column"].is-hovered > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
580
+ display: none; }
581
+
582
+ [data-type="jetpack/layout-grid-column"].is-hovered > .block-editor-block-list__block-edit::before {
583
+ content: none; }
584
+
585
+ /**
586
+ * Inspector Controls
587
+ */
588
+ .jetpack-layout-grid-columns .block-editor-block-styles__item-preview {
589
+ position: relative; }
590
+ .jetpack-layout-grid-columns .block-editor-block-styles__item-preview svg {
591
+ position: absolute;
592
+ top: 50%;
593
+ left: 50%;
594
+ transform: translate(-50%, -50%); }
595
+
596
+ .components-button-group + .jetpack-layout-grid-settings {
597
+ margin-top: 16px; }
598
+
599
+ .components-panel__body .jetpack-layout-grid-settings__group {
600
+ display: flex;
601
+ padding: 8px 0;
602
+ margin-bottom: 8px; }
603
+ .components-panel__body .jetpack-layout-grid-settings__group .components-base-control,
604
+ .components-panel__body .jetpack-layout-grid-settings__group .components-base-control__field {
605
+ margin-bottom: 0; }
606
+ .components-panel__body .jetpack-layout-grid-settings__group .components-base-control:first-child {
607
+ margin-right: 16px; }
608
+
609
+ /**
610
+ * Placeholder options
611
+ */
612
+ .wp-block-jetpack-layout-grid .block-editor-inner-blocks__template-picker-options {
613
+ display: flex;
614
+ flex-direction: row;
615
+ flex-wrap: nowrap;
616
+ width: 100%;
617
+ list-style: none;
618
+ margin-bottom: 0; }
619
+ .wp-block-jetpack-layout-grid .block-editor-inner-blocks__template-picker-options > li {
620
+ list-style: none;
621
+ flex-basis: 100%;
622
+ flex-shrink: 1;
623
+ max-width: 100px; }
624
+ .wp-block-jetpack-layout-grid .block-editor-inner-blocks__template-picker-options .block-editor-inner-blocks__template-picker-option {
625
+ height: auto;
626
+ line-height: inherit;
627
+ background: #fff; }
628
+
629
+ .jetpack-layout-grid-previewing {
630
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
631
+ font-size: 13px;
632
+ position: absolute;
633
+ bottom: -38px;
634
+ left: -3px;
635
+ padding: 0 8px;
636
+ height: 24px;
637
+ background-color: rgba(0, 0, 0, 0.8);
638
+ color: #fff;
639
+ display: none; }
640
+
641
+ [data-type="jetpack/layout-grid"].has-child-selected .jetpack-layout-grid-previewing,
642
+ [data-type="jetpack/layout-grid"].is-selected .jetpack-layout-grid-previewing {
643
+ display: block; }
index.asset.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => 'ba996c84bdb680b74865f9ae25ff428b');
index.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=23)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t){!function(){e.exports=this.wp.components}()},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t,n){var r;
2
+ /*!
3
+ Copyright (c) 2017 Jed Watson.
4
+ Licensed under the MIT License (MIT), see
5
+ http://jedwatson.github.io/classnames
6
+ */!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var c=typeof r;if("string"===c||"number"===c)e.push(r);else if(Array.isArray(r)&&r.length){var i=o.apply(null,r);i&&e.push(i)}else if("object"===c)for(var a in r)n.call(r,a)&&r[a]&&e.push(a)}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}},function(e,t,n){var r=n(21),o=n(4);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(22);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.data}()},function(e,t){!function(){e.exports=this.wp.compose}()},function(e,t,n){var r=n(18),o=n(19),c=n(20);e.exports=function(e){return r(e)||o(e)||c()}},function(e,t){!function(){e.exports=this.lodash}()},function(e,t){!function(){e.exports=this.wp.keycodes}()},function(e,t){e.exports=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}},function(e,t){e.exports=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(e){return n(e)}:e.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(t)}e.exports=r},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),c=n(12),i=n(1),a=n(15),s=n.n(a),u=n(7),l=n.n(u),f=n(8),p=n.n(f),b=n(9),d=n.n(b),h=n(10),m=n.n(h),v=n(4),g=n.n(v),O=n(11),j=n.n(O),y=n(0),k=n(16),_=n(6),w=n.n(_),E=n(5),S=n(3),C=n(17),x=n(13),P=n(14),M=function(){return[{label:Object(i.__)("1 column"),value:1},{label:Object(i.__)("2 columns"),value:2},{label:Object(i.__)("3 columns"),value:3},{label:Object(i.__)("4 columns"),value:4}]},z="Tablet",B="Mobile",A=function(){return[{value:"Desktop",label:Object(i.__)("Desktop")},{value:z,label:Object(i.__)("Tablet")},{value:B,label:Object(i.__)("Mobile")}]},D=4,L=["Desktop",z,B];function R(e,t){return"column".concat(e+1).concat(t,"Span")}function N(e,t){return"column".concat(e+1).concat(t,"Offset")}var V=function(e){return e===z?8:e===B?4:12};function T(e,t,n){return e===z?3===t&&2===n?V(e):t>1?V(e)/2:V(e):e===B?V(e):V(e)/t}function I(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function G(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?I(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var H=function(e,t){return"column".concat(e+1,"-grid__span-").concat(t)},U=function(e,t){return"column".concat(e+1,"-grid__start-").concat(t)},X=function(e,t){return"column".concat(e+1,"-grid__row-").concat(t)},F=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__span-").concat(t)},K=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__start-").concat(t)},W=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__row-").concat(t)};function q(e,t){return Math.floor(e/t)}function J(e,t){return e%t}function Q(e,t,n,r){return{name:e,column:t,value:n,device:r,enabled:!(arguments.length>4&&void 0!==arguments[4])||arguments[4]}}function Y(e,t,n){for(var r=[],o=V(e),c=function(e,t,n){for(var r=[],o=0,c=0;c<e;c++){var i=R(c,t),a=N(c,t),s=n[i]||T(t,e,c),u=n[a]||0;r.push({position:o+u,span:s}),o+=u,o+=s}return r}(t,e,n),i=0;i<c.length;i++){var a=c[i],s=a.span,u=a.position,l=q(u,o),f=J(u,o);r.push(Q("span",i,s,e)),r.push(Q("offset",i,f+1,e,f>0)),r.push(Q("row",i,l+1,e))}return r}function Z(e,t){var n={};return e.filter((function(e){return e.enabled&&t[e.name]})).map((function(e){return n[t[e.name](e.column,e.value,e.device)]=!0})),n}var $=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(y.createElement)(S.Path,{d:"M4 5v13h17V5H4zm10 2v9h-3V7h3zM6 7h3v9H6V7zm13 9h-3V7h3v9z"}))},ee=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm32 22H9V14h30v20z"}))},te=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7,12v24h34V12H7z M23,34H9V14h14V34z M39,34H25V14h14V34z"}))},ne=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm23 2h9v20h-9V14zm-2 20h-8V14h8v20zM9 14h9v20H9V14z"}))},re=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm8 22H9V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20z"}))},oe=function(e){var t=e.columns;return 4===t?Object(y.createElement)(re,null):3===t?Object(y.createElement)(ne,null):2===t?Object(y.createElement)(te,null):Object(y.createElement)(ee,null)};var ce=function(e){var t=e.height,n=e.xPos,r=e.top,o=e.isSelected,c=w()("wpcom-overlay-resize__handle","components-resizable-box__container",{"is-selected":o}),i={height:t+"px",width:n+"px",top:r+"px"},a={left:n+"px"};return Object(y.createElement)("div",{className:c,style:i},Object(y.createElement)("span",null,Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",style:a})))},ie=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onMouseDown",(function(e){var t=e.target;if((0===e.button||e.touches)&&(t.dataset.resizeRight||t.dataset.resizeLeft)){n.block=t.closest(".wp-block");var r=n.block.getBoundingClientRect(),o=r.height,c=r.right,i=r.left,a=r.top,s=t.getBoundingClientRect().width,u=n.getChildPosition(n.block),l=t.dataset.resizeLeft;n.setState({resizingColumn:u,xPos:n.getAdjustedOffset(n.getMouseX(e),s),height:o,width:s,top:n.getAdjustedTop(a),direction:l?"left":"right",max:l?n.getAdjustedOffset(c,s):n.getAdjustedOffset(i,s)}),0===e.button?(document.addEventListener("mousemove",n.onMouseMove),document.addEventListener("mouseup",n.onMouseUp),e.preventDefault()):(document.addEventListener("touchmove",n.onMouseMove),document.addEventListener("touchend",n.onMouseUp)),e.stopPropagation()}})),o()(g()(n),"onMouseMove",(function(e){e.stopPropagation(),void 0===e.touches&&e.preventDefault();var t=n.block.getBoundingClientRect().height;n.setState({xPos:n.getRestrictedOffset(n.getAdjustedOffset(n.getMouseX(e))),height:t});var r=n.getNearestColumn(n.state.direction,e);r&&n.props.onResize(n.state.resizingColumn,r)})),o()(g()(n),"onMouseUp",(function(e){n.setState({resizingColumn:-1}),document.removeEventListener("mousemove",n.onMouseMove),document.removeEventListener("mouseup",n.onMouseUp),document.removeEventListener("touchmove",n.onMouseMove),document.removeEventListener("touchend",n.onMouseUp)})),n.containerRef=Object(y.createRef)(),n.state={resizingColumn:-1,xPos:0,height:0},n}return j()(t,e),p()(t,[{key:"getNearestColumn",value:function(e,t){var n=this.props,r=n.totalColumns,o=n.layoutGrid,c=o.getStart(this.state.resizingColumn),i=o.getSpan(this.state.resizingColumn),a=Math.min(r,Math.max(0,function(e,t,n,r){var o=e.getBoundingClientRect(),c=o.width/r,i=t-o.x,a=Math.floor(i/c),s=i%c;return"left"===n?s<=c/2?a:a+1:s<c/2?a:a+1}(this.containerRef.current,this.getMouseX(t),e,r)));if("left"===e){if(a===c)return null;var s=Math.abs(a-c),u={start:a,span:a>c?i-s:i+s,direction:e};return u.start>=c+i?null:(u.span=Math.max(1,u.span),u)}return{span:Math.max(1,a-c),direction:e}}},{key:"getMouseX",value:function(e){var t=e.clientX,n=e.targetTouches;return t||n&&n[0].clientX}},{key:"getAdjustedOffset",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=this.state.width,r=t>0?t:n;return e-this.containerRef.current.getBoundingClientRect().left-r/2}},{key:"getAdjustedTop",value:function(e){return e-this.containerRef.current.getBoundingClientRect().top}},{key:"getRestrictedOffset",value:function(e){var t=this.state,n=t.direction,r=t.max,o=t.width;return"left"===n?Math.min(r-o,e):Math.max(r+o,e)}},{key:"getChildPosition",value:function(e){for(var t=0;null!==e.previousSibling;)e=e.previousSibling,t++;return t}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.children,r=e.isSelected,o=this.state,c=o.resizingColumn,i=o.xPos,a=o.height,s=w()(t,-1!==c?"wp-block-jetpack-layout-grid__resizing":null);return Object(y.createElement)("div",{className:s,onMouseDown:this.onMouseDown,onTouchStart:this.onMouseDown,ref:this.containerRef},-1!==c&&Object(y.createElement)(ce,{height:a,xPos:i,top:this.state.top,isSelected:r}),n)}}]),t}(y.Component);function ae(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function se(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ae(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ae(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var ue=function(){function e(t,n,r){l()(this,e),this.attributes=t,this.device=n,this.columnCount=r}return p()(e,[{key:"getGridValues",value:function(){for(var e={},t=0;t<this.columnCount;t++){var n=T(this.device,this.columnCount,t);e[R(t,this.device)]=this.getSpan(t)||n,e[N(t,this.device)]=this.getOffset(t)}return e}},{key:"applyAdjustments",value:function(e){for(var t=this.getGridValues(),n=0;n<e.length;n++)t=se({},t,{},e[n]);return t}},{key:"getSpanAdjustment",value:function(e,t){return o()({},R(e,this.device),t)}},{key:"getAdjustOffset",value:function(e,t){return o()({},N(e,this.device),t)}},{key:"getShrinkOffset",value:function(e,t){var n=this.getOffset(e),r=t>=n?n:t;return{adjustment:this.getAdjustOffset(e,n-r),offsetUsed:r}}},{key:"hasOverlaps",value:function(e){for(var t=0;t<e.length;t++)for(var n=e[t],r=t+1;r<e.length;r++){var o=e[r];if(n.start>o.start&&n.start<o.end)return!0;if(n.end>o.start&&n.end<o.end)return!0}return!1}},{key:"validateGrid",value:function(e){for(var t,n,r=[],o=V(this.device),c=0,i=0,a=0;a<this.columnCount;a++){var s=e[R(a,this.device)],u=e[N(a,this.device)];if((i+=u)>=o&&(i-=o),(i+=s)>o)return!1;r.push({start:c+u,end:c+u+s}),c+=s+u}return!(c>(t=this.device,n=this.columnCount,t===z&&n>2?2*V(t):t===B?V(t)*n:V(t)))&&!this.hasOverlaps(r)}},{key:"getEndAdjustments",value:function(e,t){var n=[];if(t<0)return[this.getAdjustOffset(e,this.getOffset(e)+Math.abs(t))];if(t>0)for(var r=e;r<this.columnCount&&t>0;r++){var o=this.getShrinkOffset(r,Math.abs(t));n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartMovedLeft",value:function(e,t){for(var n=[],r=e;r>=0&&t>0;r--){var o=this.getShrinkOffset(r,t);n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartAdjustments",value:function(e,t){var n=this.getOffset(e),r=this.getOffsetFromStart(e,t),o=r-n;return o<0?this.getStartMovedLeft(e,Math.abs(o)):[this.getAdjustOffset(e,r)]}},{key:"getSpan",value:function(e){return this.attributes[R(e,this.device)]}},{key:"getOffset",value:function(e){return this.attributes[N(e,this.device)]}},{key:"getStart",value:function(e){for(var t=0,n=0;n<e;n++)t+=this.getSpan(n)+this.getOffset(n);var r=Math.max(1,Math.floor(t/V(this.device)));return(t+this.getOffset(e))%(r*V(this.device))}},{key:"getOffsetFromStart",value:function(e,t){if(0===e)return t;var n=t-this.getStart(e);return this.getOffset(e)+n}},{key:"convertOffsetToStart",value:function(e,t){return this.getStart(e)+(t-this.getOffset(e))}},{key:"getAdjustedGrid",value:function(e,t){var n=t.start,r=void 0===n?this.getStart(e):n,o=t.span,c=void 0===o?this.getSpan(e):o,i=[];r!==this.getStart(e)&&c!==this.getSpan(e)?i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getSpanAdjustment(e,c)):c!==this.getSpan(e)?i=(i=i.concat(this.getSpanAdjustment(e,c))).concat(this.getEndAdjustments(e+1,c-this.getSpan(e))):r!==this.getStart(e)&&(i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getEndAdjustments(e+1,r-this.getStart(e))));var a=this.applyAdjustments(i);return i.length>0&&this.validateGrid(a)?a:null}}]),e}();function le(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var fe=["jetpack/layout-grid-column"],pe=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onChangeLayout",(function(e){for(var t={},r=0;r<e;r++)for(var o=0;o<L.length;o++){var c=T(L[o],e,r);t[R(r,L[o])]=c,t[N(r,L[o])]=0}n.props.updateColumns(n.props.columns,e,t)})),o()(g()(n),"onChangeDevice",(function(e){n.setState({selectedDevice:e})})),o()(g()(n),"onResize",(function(e,t){var r=new ue(n.props.attributes,n.state.selectedDevice,n.props.columns).getAdjustedGrid(e,t);r&&n.props.setAttributes(r)})),o()(g()(n),"onChangeSpan",(function(e,t,r){var o=new ue(n.props.attributes,t,n.props.columns).getAdjustedGrid(e,{span:parseInt(r,10)});o&&n.props.setAttributes(o)})),o()(g()(n),"onChangeOffset",(function(e,t,r){var o=new ue(n.props.attributes,t,n.props.columns),c=o.getAdjustedGrid(e,{start:o.convertOffsetToStart(e,parseInt(r,10))});c&&n.props.setAttributes(c)})),n.overlayRef=Object(y.createRef)(),n.state={selectedDevice:A()[0].value},n}return j()(t,e),p()(t,[{key:"renderDeviceSettings",value:function(e,t,n){for(var r=this,o=new ue(n,t,this.props.columns),c=[],a=function(n){var a=o.getSpan(n)||T(t,e,n),s=o.getOffset(n)||0;c.push(Object(y.createElement)("div",{className:"jetpack-layout-grid-settings",key:n},Object(y.createElement)("strong",null,Object(i.__)("Column")," ",n+1),Object(y.createElement)("div",{className:"jetpack-layout-grid-settings__group"},Object(y.createElement)(S.TextControl,{type:"number",label:Object(i.__)("Offset"),value:s||0,min:0,max:V(t)-1,onChange:function(e){return r.onChangeOffset(n,t,e)}}),Object(y.createElement)(S.TextControl,{type:"number",label:Object(i.__)("Span"),value:a,min:1,max:V(t),onChange:function(e){return r.onChangeSpan(n,t,e)}}))))},s=0;s<e;s++)a(s);return c}},{key:"removeExisting",value:function(e){return e.replace(/column\d-\w*-grid__\w*-\d*/g,"").replace(/column\d-grid__\w*-\d*/g,"").replace(/\s{2,}/,"")}},{key:"getPreviewText",value:function(e){return"Mobile"===e?Object(i.__)("Showing mobile layout"):"Tablet"===e?Object(i.__)("Showing tablet layout"):Object(i.__)("Showing desktop layout")}},{key:"canResizeBreakpoint",value:function(e){return!(!this.overlayRef||!this.overlayRef.current)&&this.overlayRef.current.getBoundingClientRect().width/V(e)>50}},{key:"render",value:function(){var e=this,t=this.props,n=t.className,r=t.attributes,o=void 0===r?{}:r,c=t.isSelected,a=t.columns,s=this.state.selectedDevice,u=function(e,t){return Z(Y(e,t,arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),{span:H,offset:U,row:X})}(s,a,o),l=new ue(o,s,a),f=w()(this.removeExisting(n),u,{"wp-block-jetpack-layout-tablet":"Tablet"===s,"wp-block-jetpack-layout-desktop":"Desktop"===s,"wp-block-jetpack-layout-mobile":"Mobile"===s,"wp-block-jetpack-layout-resizable":this.canResizeBreakpoint(s)});return 0===a?Object(y.createElement)(S.Placeholder,{icon:"layout",label:Object(i.__)("Choose Layout"),instructions:Object(i.__)("Select a layout to start with:"),className:f},Object(y.createElement)("ul",{className:"block-editor-inner-blocks__template-picker-options"},M().map((function(t){return Object(y.createElement)("li",{key:t.value},Object(y.createElement)(S.IconButton,{isLarge:!0,icon:Object(y.createElement)(oe,{columns:t.value}),onClick:function(){return e.onChangeLayout(t.value)},className:"block-editor-inner-blocks__template-picker-option",label:t.label}))})))):Object(y.createElement)(S.IsolatedEventContainer,null,Object(y.createElement)(ie,{className:f,onResize:this.onResize,totalColumns:V(s),layoutGrid:l,isSelected:c},Object(y.createElement)("div",{className:"wpcom-overlay-grid",ref:this.overlayRef},Object(k.times)(V(s)).map((function(e){return Object(y.createElement)("div",{className:"wpcom-overlay-grid__column",key:e})}))),Object(y.createElement)(E.InnerBlocks,{template:null,templateLock:"all",allowedBlocks:fe}),Object(y.createElement)(E.InspectorControls,null,Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Layout")},Object(y.createElement)("div",{className:"jetpack-layout-grid-columns block-editor-block-styles"},M().map((function(t){return Object(y.createElement)("div",{key:t.value,className:w()("block-editor-block-styles__item",{"is-active":a===t.value}),onClick:function(){return e.onChangeLayout(t.value)},onKeyDown:function(n){C.ENTER!==n.keyCode&&C.SPACE!==n.keyCode||(n.preventDefault(),e.onChangeLayout(t.value))},role:"button",tabIndex:"0","aria-label":t.label},Object(y.createElement)("div",{className:"block-editor-block-styles__item-preview"},Object(y.createElement)(oe,{columns:t.value})),Object(y.createElement)("div",{className:"editor-block-styles__item-label block-editor-block-styles__item-label"},t.label))}))),Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Changing the number of columns will reset your layout and could remove content.")))),Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Responsive Breakpoints")},Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Note that previewing your post will show your browser's breakpoint, not the currently selected one."))),Object(y.createElement)(S.ButtonGroup,null,A().map((function(t){return Object(y.createElement)(S.Button,{key:t.value,isDefault:!0,isPrimary:t.value===s,onClick:function(){return e.onChangeDevice(t.value)}},t.label)}))),this.renderDeviceSettings(a,s,o))),Object(y.createElement)("div",{className:"jetpack-layout-grid-previewing"},this.getPreviewText(s))))}}]),t}(y.Component);var be=Object(P.compose)([Object(x.withDispatch)((function(e,t,n){return{updateColumns:function(r,i,a){var u=t.clientId,l=e("core/block-editor").replaceBlock,f=function(e,t,n){if(n>t)return[].concat(s()(e),s()(Object(k.times)(n-t,(function(){return Object(c.createBlock)("jetpack/layout-grid-column")}))));var r=s()(e),o=0;return r.reverse(),(r=r.filter((function(e){return!(o<t-n&&0===e.innerBlocks.length)||(o++,!1)}))).slice(Math.max(0,t-n-o)).reverse()}((0,n.select("core/block-editor").getBlocks)(u),r,i);l(u,Object(c.createBlock)(t.name,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?le(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):le(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},t.attributes,{},a),f))}}})),Object(x.withSelect)((function(e,t){var n=t.clientId;return{columns:e("core/block-editor").getBlockCount(n)}}))])(pe),de=function(e){var t=e.attributes,n=e.innerBlocks,r=t.className,o=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={},r={span:F,offset:K,row:W},o=0;o<L.length;o++)n=G({},n,{},Z(Y(L[o],e,t),r));return n}(n.length,t),c=w()(r,o);return Object(y.createElement)("div",{className:c},Object(y.createElement)(E.InnerBlocks.Content,null))},he=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onLeftIn",(function(){n.setState({direction:"left"}),document.addEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onLeftOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onRightIn",(function(){n.setState({direction:"right"}),document.addEventListener("mouseup",n.onRightOut)})),o()(g()(n),"onRightOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onRightOut)})),n.state={direction:null},n}return j()(t,e),p()(t,[{key:"render",value:function(){var e,t=this.props,n=t.className,r=t.hasChildBlocks,c=t.backgroundColor,a=t.setBackgroundColor,s=t.attributes,u=t.setAttributes,l=s.padding,f=this.state.direction,p=w()(n,c.class,(e={},o()(e,"wp-block-jetpack-layout-grid__padding-"+l,!0),o()(e,"has-background",c.color),o()(e,"components-resizable-box__container",!0),o()(e,c.class,c.class),o()(e,"wp-blocks-jetpack-layout-grid__showleft","right"===f),o()(e,"wp-blocks-jetpack-layout-grid__showright","left"===f),e)),b={backgroundColor:c.color};return Object(y.createElement)("div",{className:p,style:b},Object(y.createElement)("span",{className:"wp-blocks-jetpack-layout-grid__resize-handles"},Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right",onMouseDown:this.onRightIn,"data-resize-right":!0}),Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",onMouseDown:this.onLeftIn,"data-resize-left":!0})),Object(y.createElement)(E.InnerBlocks,{templateLock:!1,renderAppender:r?void 0:function(){return Object(y.createElement)(E.InnerBlocks.ButtonBlockAppender,null)}}),Object(y.createElement)(E.InspectorControls,null,Object(y.createElement)(E.PanelColorSettings,{title:Object(i.__)("Column Color"),initialOpen:!0,colorSettings:[{value:c.color,onChange:a,label:Object(i.__)("Background")}]}),Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Column Padding")},Object(y.createElement)("p",null,Object(i.__)("Choose padding for this column:")),Object(y.createElement)(S.SelectControl,{value:l,onChange:function(e){return u({padding:e})},options:[{value:"none",label:Object(i.__)("No padding")},{value:"small",label:Object(i.__)("Small")},{value:"medium",label:Object(i.__)("Medium")},{value:"large",label:Object(i.__)("Large")},{value:"huge",label:Object(i.__)("Huge")}]}))))}}]),t}(y.Component),me=Object(P.compose)(Object(E.withColors)("backgroundColor"),Object(x.withSelect)((function(e,t){var n=t.clientId;return{hasChildBlocks:(0,e("core/block-editor").getBlockOrder)(n).length>0}})))(he),ve=function(e){var t,n=e.attributes,r=void 0===n?{}:n,c=r.className,i=r.backgroundColor,a=r.customBackgroundColor,s=r.padding,u=Object(E.getColorClassName)("background-color",i),l=w()(c,(t={},o()(t,"wp-block-jetpack-layout-grid__padding-"+s,!0),o()(t,"has-background",i),o()(t,u,u),t)),f={backgroundColor:u?void 0:a};return Object(y.createElement)("div",{className:l,style:f},Object(y.createElement)(E.InnerBlocks.Content,null))};function ge(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Oe(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ge(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ge(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function je(e,t){for(var n={},r=function(e){t.map((function(t){n[R(e,t)]={type:"number"},n[N(e,t)]={type:"number",default:0}}))},o=0;o<e;o++)r(o);return n}Object(c.registerBlockType)("jetpack/layout-grid",{title:Object(i.__)("Layout Grid"),description:Object(i.__)("Align blocks to to a global grid, with support for responsive breakpoints."),icon:$,category:"layout",supports:{align:["full"],html:!1},example:{attributes:{columns:2},innerBlocks:[{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/paragraph",attributes:{customFontSize:32,content:Object(i.__)("<strong>Snow Patrol</strong>"),align:"center"}}]},{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/image",attributes:{url:"https://s.w.org/images/core/5.3/Windbuchencom.jpg"}}]}]},attributes:Oe({align:{type:"string",default:"full"}},je(D,L)),edit:be,save:de}),Object(c.registerBlockType)("jetpack/layout-grid-column",{description:Object(i.__)("A column used inside a Layout Grid block."),title:Object(i.__)("Column"),icon:$,category:"layout",parent:["jetpack/layout-grid"],supports:{inserter:!1,reusable:!1,html:!1},attributes:{backgroundColor:{type:"string"},customBackgroundColor:{type:"string"},padding:{type:"string",default:"none"}},edit:me,save:ve})}]);
index.php ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Plugin Name: Layout Grid
4
+ * Plugin URI: https://github.com/automattic/wpcom-blocks
5
+ * Description: Let any blocks align to a global grid
6
+ * Version: 1.0.1
7
+ * Author: Automattic
8
+ * Author URI: https://automattic.com
9
+ * Text Domain: jetpack-layout-grid
10
+ * License: GPL v2 or later
11
+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
12
+ */
13
+
14
+ // Register Block Scripts
15
+ add_action( 'init', function() {
16
+ $asset_file = __DIR__ . '/index.asset.php';
17
+ $asset = file_exists( $asset_file ) ? require_once $asset_file : null;
18
+ $dependencies = isset( $asset['dependencies'] ) ? $asset['dependencies'] : [];
19
+ $version = isset( $asset['version'] ) ? $asset['version'] : filemtime( __DIR__ . '/index.js' );
20
+
21
+ // Block JS
22
+ wp_register_script(
23
+ 'jetpack-layout-grid',
24
+ plugins_url( 'index.js', __FILE__ ),
25
+ $dependencies,
26
+ $version,
27
+ true
28
+ );
29
+
30
+ // Block front end style
31
+ wp_register_style(
32
+ 'jetpack-layout-grid',
33
+ plugins_url( 'style.css', __FILE__ ),
34
+ [],
35
+ filemtime( __DIR__ . '/style.css' )
36
+ );
37
+
38
+ // Block editor style
39
+ wp_register_style(
40
+ 'jetpack-layout-grid-editor',
41
+ plugins_url( 'editor.css', __FILE__ ),
42
+ [],
43
+ filemtime( __DIR__ . '/editor.css' )
44
+ );
45
+ } );
46
+
47
+ /**
48
+ * AUTO-GENERATED blocks will be added here
49
+ */
50
+
51
+ include_once __DIR__ . '/blocks/layout-grid.php';
license.txt ADDED
@@ -0,0 +1,364 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Copyright 2019 by the contributors
2
+
3
+ This program is free software; you can redistribute it and/or modify
4
+ it under the terms of the GNU General Public License as published by
5
+ the Free Software Foundation; either version 2 of the License, or
6
+ (at your option) any later version.
7
+
8
+ This program is distributed in the hope that it will be useful,
9
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
10
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11
+ GNU General Public License for more details.
12
+
13
+ You should have received a copy of the GNU General Public License
14
+ along with this program; if not, write to the Free Software
15
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
16
+
17
+ =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
18
+
19
+ GNU GENERAL PUBLIC LICENSE
20
+ Version 2, June 1991
21
+
22
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
23
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
24
+ Everyone is permitted to copy and distribute verbatim copies
25
+ of this license document, but changing it is not allowed.
26
+
27
+ Preamble
28
+
29
+ The licenses for most software are designed to take away your
30
+ freedom to share and change it. By contrast, the GNU General Public
31
+ License is intended to guarantee your freedom to share and change free
32
+ software--to make sure the software is free for all its users. This
33
+ General Public License applies to most of the Free Software
34
+ Foundation's software and to any other program whose authors commit to
35
+ using it. (Some other Free Software Foundation software is covered by
36
+ the GNU Lesser General Public License instead.) You can apply it to
37
+ your programs, too.
38
+
39
+ When we speak of free software, we are referring to freedom, not
40
+ price. Our General Public Licenses are designed to make sure that you
41
+ have the freedom to distribute copies of free software (and charge for
42
+ this service if you wish), that you receive source code or can get it
43
+ if you want it, that you can change the software or use pieces of it
44
+ in new free programs; and that you know you can do these things.
45
+
46
+ To protect your rights, we need to make restrictions that forbid
47
+ anyone to deny you these rights or to ask you to surrender the rights.
48
+ These restrictions translate to certain responsibilities for you if you
49
+ distribute copies of the software, or if you modify it.
50
+
51
+ For example, if you distribute copies of such a program, whether
52
+ gratis or for a fee, you must give the recipients all the rights that
53
+ you have. You must make sure that they, too, receive or can get the
54
+ source code. And you must show them these terms so they know their
55
+ rights.
56
+
57
+ We protect your rights with two steps: (1) copyright the software, and
58
+ (2) offer you this license which gives you legal permission to copy,
59
+ distribute and/or modify the software.
60
+
61
+ Also, for each author's protection and ours, we want to make certain
62
+ that everyone understands that there is no warranty for this free
63
+ software. If the software is modified by someone else and passed on, we
64
+ want its recipients to know that what they have is not the original, so
65
+ that any problems introduced by others will not reflect on the original
66
+ authors' reputations.
67
+
68
+ Finally, any free program is threatened constantly by software
69
+ patents. We wish to avoid the danger that redistributors of a free
70
+ program will individually obtain patent licenses, in effect making the
71
+ program proprietary. To prevent this, we have made it clear that any
72
+ patent must be licensed for everyone's free use or not licensed at all.
73
+
74
+ The precise terms and conditions for copying, distribution and
75
+ modification follow.
76
+
77
+ GNU GENERAL PUBLIC LICENSE
78
+ TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
79
+
80
+ 0. This License applies to any program or other work which contains
81
+ a notice placed by the copyright holder saying it may be distributed
82
+ under the terms of this General Public License. The "Program", below,
83
+ refers to any such program or work, and a "work based on the Program"
84
+ means either the Program or any derivative work under copyright law:
85
+ that is to say, a work containing the Program or a portion of it,
86
+ either verbatim or with modifications and/or translated into another
87
+ language. (Hereinafter, translation is included without limitation in
88
+ the term "modification".) Each licensee is addressed as "you".
89
+
90
+ Activities other than copying, distribution and modification are not
91
+ covered by this License; they are outside its scope. The act of
92
+ running the Program is not restricted, and the output from the Program
93
+ is covered only if its contents constitute a work based on the
94
+ Program (independent of having been made by running the Program).
95
+ Whether that is true depends on what the Program does.
96
+
97
+ 1. You may copy and distribute verbatim copies of the Program's
98
+ source code as you receive it, in any medium, provided that you
99
+ conspicuously and appropriately publish on each copy an appropriate
100
+ copyright notice and disclaimer of warranty; keep intact all the
101
+ notices that refer to this License and to the absence of any warranty;
102
+ and give any other recipients of the Program a copy of this License
103
+ along with the Program.
104
+
105
+ You may charge a fee for the physical act of transferring a copy, and
106
+ you may at your option offer warranty protection in exchange for a fee.
107
+
108
+ 2. You may modify your copy or copies of the Program or any portion
109
+ of it, thus forming a work based on the Program, and copy and
110
+ distribute such modifications or work under the terms of Section 1
111
+ above, provided that you also meet all of these conditions:
112
+
113
+ a) You must cause the modified files to carry prominent notices
114
+ stating that you changed the files and the date of any change.
115
+
116
+ b) You must cause any work that you distribute or publish, that in
117
+ whole or in part contains or is derived from the Program or any
118
+ part thereof, to be licensed as a whole at no charge to all third
119
+ parties under the terms of this License.
120
+
121
+ c) If the modified program normally reads commands interactively
122
+ when run, you must cause it, when started running for such
123
+ interactive use in the most ordinary way, to print or display an
124
+ announcement including an appropriate copyright notice and a
125
+ notice that there is no warranty (or else, saying that you provide
126
+ a warranty) and that users may redistribute the program under
127
+ these conditions, and telling the user how to view a copy of this
128
+ License. (Exception: if the Program itself is interactive but
129
+ does not normally print such an announcement, your work based on
130
+ the Program is not required to print an announcement.)
131
+
132
+ These requirements apply to the modified work as a whole. If
133
+ identifiable sections of that work are not derived from the Program,
134
+ and can be reasonably considered independent and separate works in
135
+ themselves, then this License, and its terms, do not apply to those
136
+ sections when you distribute them as separate works. But when you
137
+ distribute the same sections as part of a whole which is a work based
138
+ on the Program, the distribution of the whole must be on the terms of
139
+ this License, whose permissions for other licensees extend to the
140
+ entire whole, and thus to each and every part regardless of who wrote it.
141
+
142
+ Thus, it is not the intent of this section to claim rights or contest
143
+ your rights to work written entirely by you; rather, the intent is to
144
+ exercise the right to control the distribution of derivative or
145
+ collective works based on the Program.
146
+
147
+ In addition, mere aggregation of another work not based on the Program
148
+ with the Program (or with a work based on the Program) on a volume of
149
+ a storage or distribution medium does not bring the other work under
150
+ the scope of this License.
151
+
152
+ 3. You may copy and distribute the Program (or a work based on it,
153
+ under Section 2) in object code or executable form under the terms of
154
+ Sections 1 and 2 above provided that you also do one of the following:
155
+
156
+ a) Accompany it with the complete corresponding machine-readable
157
+ source code, which must be distributed under the terms of Sections
158
+ 1 and 2 above on a medium customarily used for software interchange; or,
159
+
160
+ b) Accompany it with a written offer, valid for at least three
161
+ years, to give any third party, for a charge no more than your
162
+ cost of physically performing source distribution, a complete
163
+ machine-readable copy of the corresponding source code, to be
164
+ distributed under the terms of Sections 1 and 2 above on a medium
165
+ customarily used for software interchange; or,
166
+
167
+ c) Accompany it with the information you received as to the offer
168
+ to distribute corresponding source code. (This alternative is
169
+ allowed only for noncommercial distribution and only if you
170
+ received the program in object code or executable form with such
171
+ an offer, in accord with Subsection b above.)
172
+
173
+ The source code for a work means the preferred form of the work for
174
+ making modifications to it. For an executable work, complete source
175
+ code means all the source code for all modules it contains, plus any
176
+ associated interface definition files, plus the scripts used to
177
+ control compilation and installation of the executable. However, as a
178
+ special exception, the source code distributed need not include
179
+ anything that is normally distributed (in either source or binary
180
+ form) with the major components (compiler, kernel, and so on) of the
181
+ operating system on which the executable runs, unless that component
182
+ itself accompanies the executable.
183
+
184
+ If distribution of executable or object code is made by offering
185
+ access to copy from a designated place, then offering equivalent
186
+ access to copy the source code from the same place counts as
187
+ distribution of the source code, even though third parties are not
188
+ compelled to copy the source along with the object code.
189
+
190
+ 4. You may not copy, modify, sublicense, or distribute the Program
191
+ except as expressly provided under this License. Any attempt
192
+ otherwise to copy, modify, sublicense or distribute the Program is
193
+ void, and will automatically terminate your rights under this License.
194
+ However, parties who have received copies, or rights, from you under
195
+ this License will not have their licenses terminated so long as such
196
+ parties remain in full compliance.
197
+
198
+ 5. You are not required to accept this License, since you have not
199
+ signed it. However, nothing else grants you permission to modify or
200
+ distribute the Program or its derivative works. These actions are
201
+ prohibited by law if you do not accept this License. Therefore, by
202
+ modifying or distributing the Program (or any work based on the
203
+ Program), you indicate your acceptance of this License to do so, and
204
+ all its terms and conditions for copying, distributing or modifying
205
+ the Program or works based on it.
206
+
207
+ 6. Each time you redistribute the Program (or any work based on the
208
+ Program), the recipient automatically receives a license from the
209
+ original licensor to copy, distribute or modify the Program subject to
210
+ these terms and conditions. You may not impose any further
211
+ restrictions on the recipients' exercise of the rights granted herein.
212
+ You are not responsible for enforcing compliance by third parties to
213
+ this License.
214
+
215
+ 7. If, as a consequence of a court judgment or allegation of patent
216
+ infringement or for any other reason (not limited to patent issues),
217
+ conditions are imposed on you (whether by court order, agreement or
218
+ otherwise) that contradict the conditions of this License, they do not
219
+ excuse you from the conditions of this License. If you cannot
220
+ distribute so as to satisfy simultaneously your obligations under this
221
+ License and any other pertinent obligations, then as a consequence you
222
+ may not distribute the Program at all. For example, if a patent
223
+ license would not permit royalty-free redistribution of the Program by
224
+ all those who receive copies directly or indirectly through you, then
225
+ the only way you could satisfy both it and this License would be to
226
+ refrain entirely from distribution of the Program.
227
+
228
+ If any portion of this section is held invalid or unenforceable under
229
+ any particular circumstance, the balance of the section is intended to
230
+ apply and the section as a whole is intended to apply in other
231
+ circumstances.
232
+
233
+ It is not the purpose of this section to induce you to infringe any
234
+ patents or other property right claims or to contest validity of any
235
+ such claims; this section has the sole purpose of protecting the
236
+ integrity of the free software distribution system, which is
237
+ implemented by public license practices. Many people have made
238
+ generous contributions to the wide range of software distributed
239
+ through that system in reliance on consistent application of that
240
+ system; it is up to the author/donor to decide if he or she is willing
241
+ to distribute software through any other system and a licensee cannot
242
+ impose that choice.
243
+
244
+ This section is intended to make thoroughly clear what is believed to
245
+ be a consequence of the rest of this License.
246
+
247
+ 8. If the distribution and/or use of the Program is restricted in
248
+ certain countries either by patents or by copyrighted interfaces, the
249
+ original copyright holder who places the Program under this License
250
+ may add an explicit geographical distribution limitation excluding
251
+ those countries, so that distribution is permitted only in or among
252
+ countries not thus excluded. In such case, this License incorporates
253
+ the limitation as if written in the body of this License.
254
+
255
+ 9. The Free Software Foundation may publish revised and/or new versions
256
+ of the General Public License from time to time. Such new versions will
257
+ be similar in spirit to the present version, but may differ in detail to
258
+ address new problems or concerns.
259
+
260
+ Each version is given a distinguishing version number. If the Program
261
+ specifies a version number of this License which applies to it and "any
262
+ later version", you have the option of following the terms and conditions
263
+ either of that version or of any later version published by the Free
264
+ Software Foundation. If the Program does not specify a version number of
265
+ this License, you may choose any version ever published by the Free Software
266
+ Foundation.
267
+
268
+ 10. If you wish to incorporate parts of the Program into other free
269
+ programs whose distribution conditions are different, write to the author
270
+ to ask for permission. For software which is copyrighted by the Free
271
+ Software Foundation, write to the Free Software Foundation; we sometimes
272
+ make exceptions for this. Our decision will be guided by the two goals
273
+ of preserving the free status of all derivatives of our free software and
274
+ of promoting the sharing and reuse of software generally.
275
+
276
+ NO WARRANTY
277
+
278
+ 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
279
+ FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
280
+ OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
281
+ PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
282
+ OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
283
+ MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
284
+ TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
285
+ PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
286
+ REPAIR OR CORRECTION.
287
+
288
+ 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
289
+ WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
290
+ REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
291
+ INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
292
+ OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
293
+ TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
294
+ YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
295
+ PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
296
+ POSSIBILITY OF SUCH DAMAGES.
297
+
298
+ END OF TERMS AND CONDITIONS
299
+
300
+ How to Apply These Terms to Your New Programs
301
+
302
+ If you develop a new program, and you want it to be of the greatest
303
+ possible use to the public, the best way to achieve this is to make it
304
+ free software which everyone can redistribute and change under these terms.
305
+
306
+ To do so, attach the following notices to the program. It is safest
307
+ to attach them to the start of each source file to most effectively
308
+ convey the exclusion of warranty; and each file should have at least
309
+ the "copyright" line and a pointer to where the full notice is found.
310
+
311
+ <one line to give the program's name and a brief idea of what it does.>
312
+ Copyright (C) <year> <name of author>
313
+
314
+ This program is free software; you can redistribute it and/or modify
315
+ it under the terms of the GNU General Public License as published by
316
+ the Free Software Foundation; either version 2 of the License, or
317
+ (at your option) any later version.
318
+
319
+ This program is distributed in the hope that it will be useful,
320
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
321
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
322
+ GNU General Public License for more details.
323
+
324
+ You should have received a copy of the GNU General Public License along
325
+ with this program; if not, write to the Free Software Foundation, Inc.,
326
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
327
+
328
+ Also add information on how to contact you by electronic and paper mail.
329
+
330
+ If the program is interactive, make it output a short notice like this
331
+ when it starts in an interactive mode:
332
+
333
+ Gnomovision version 69, Copyright (C) year name of author
334
+ Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
335
+ This is free software, and you are welcome to redistribute it
336
+ under certain conditions; type `show c' for details.
337
+
338
+ The hypothetical commands `show w' and `show c' should show the appropriate
339
+ parts of the General Public License. Of course, the commands you use may
340
+ be called something other than `show w' and `show c'; they could even be
341
+ mouse-clicks or menu items--whatever suits your program.
342
+
343
+ You should also get your employer (if you work as a programmer) or your
344
+ school, if any, to sign a "copyright disclaimer" for the program, if
345
+ necessary. Here is a sample; alter the names:
346
+
347
+ Yoyodyne, Inc., hereby disclaims all copyright interest in the program
348
+ `Gnomovision' (which makes passes at compilers) written by James Hacker.
349
+
350
+ <signature of Ty Coon>, 1 April 1989
351
+ Ty Coon, President of Vice
352
+
353
+ This General Public License does not permit incorporating your program into
354
+ proprietary programs. If your program is a subroutine library, you may
355
+ consider it more useful to permit linking proprietary applications with the
356
+ library. If this is what you want to do, use the GNU Lesser General
357
+ Public License instead of this License.
358
+
359
+ WRITTEN OFFER
360
+
361
+ The source code for any program binaries or compressed scripts that are
362
+ included with WordPress can be freely obtained at the following URL:
363
+
364
+ https://wordpress.org/download/source/
readme.txt ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Layout Grid Block ===
2
+ Contributors: automattic, jasmussen, johnny5, mkaz
3
+ Stable tag: 1.0.1
4
+ Tested up to: 5.3
5
+ Requires at least: 5.3
6
+ License: GPLv2 or later
7
+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
8
+
9
+ A Gutenberg container block to let you align items consistently across a global grid.
10
+
11
+ == Description ==
12
+
13
+ Want to create a column-based layout with easily customizable column-width and positions? Or perhaps you want to align your content to a global layout grid across your post. With this Layout Grid block you can do both or either. There are also options to provide specific layouts to mobile or tablet breakpoints. Pick a number of columns (1-4), then go ahead and resize and position each column as you want them to look, for any screen. Optionally apply background colours and paddings to add emphasis.
14
+
15
+ == Screenshots ==
16
+
17
+ 1. Grid layout selector.
18
+ 2. Three column grid with resize handles.
19
+
20
+ == Changelog ==
21
+
22
+ = 1.0.1 - 26th November 2019 =
23
+ * Fix problem with edit history putting the block into an inbetween state
24
+ * Fix cropping of the grid in the editor
25
+
26
+ = 1.0 - 7th November 2019 =
27
+ * Initial release
style.css ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Grid Block styles.
3
+ * These styles are loaded into both the editor, and the frontend.
4
+ */
5
+ /**
6
+ * Padding Options
7
+ */
8
+ .wp-block-jetpack-layout-grid {
9
+ padding-left: 24px;
10
+ padding-right: 24px; }
11
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-none {
12
+ padding: 0px; }
13
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-none.has-background {
14
+ padding: 0px 13px; }
15
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-small .wp-block-jetpack-layout-grid-column {
16
+ padding: 8px; }
17
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-small .wp-block-jetpack-layout-grid-column.has-background {
18
+ padding: 8px 21px; }
19
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-medium .wp-block-jetpack-layout-grid-column {
20
+ padding: 16px; }
21
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-medium .wp-block-jetpack-layout-grid-column.has-background {
22
+ padding: 16px 29px; }
23
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-large .wp-block-jetpack-layout-grid-column {
24
+ padding: 24px; }
25
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-large .wp-block-jetpack-layout-grid-column.has-background {
26
+ padding: 24px 37px; }
27
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-huge .wp-block-jetpack-layout-grid-column {
28
+ padding: 48px; }
29
+ .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-grid__padding-huge .wp-block-jetpack-layout-grid-column.has-background {
30
+ padding: 48px 61px; }
31
+
32
+ /**
33
+ * Individual Column Options
34
+ */
35
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.has-background {
36
+ margin-left: -13px;
37
+ margin-right: -13px;
38
+ padding-left: 13px;
39
+ padding-right: 13px;
40
+ padding-top: .05px;
41
+ padding-bottom: .05px; }
42
+
43
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-none {
44
+ padding: 0px; }
45
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-none.has-background {
46
+ padding: 0px 13px; }
47
+
48
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-small {
49
+ padding: 8px; }
50
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-small.has-background {
51
+ padding: 8px 21px; }
52
+
53
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-medium {
54
+ padding: 16px; }
55
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-medium.has-background {
56
+ padding: 16px 29px; }
57
+
58
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-large {
59
+ padding: 24px; }
60
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-large.has-background {
61
+ padding: 24px 37px; }
62
+
63
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-huge {
64
+ padding: 48px; }
65
+ .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-huge.has-background {
66
+ padding: 48px 61px; }