@wordpress/edit-post 8.31.0 → 8.31.1-next.233ccab9b.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/layout/index.js +164 -99
- package/build/components/layout/index.js.map +1 -1
- package/build-module/components/layout/index.js +166 -101
- package/build-module/components/layout/index.js.map +1 -1
- package/build-style/style-rtl.css +28 -25
- package/build-style/style.css +28 -25
- package/package.json +30 -30
- package/src/components/layout/index.js +153 -104
- package/src/components/layout/style.scss +49 -44
|
@@ -6,10 +6,7 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
overflow: hidden;
|
|
9
|
-
|
|
10
|
-
&.is-resizable {
|
|
11
|
-
padding-block-start: $grid-unit-30;
|
|
12
|
-
}
|
|
9
|
+
padding-block-start: $button-size-compact;
|
|
13
10
|
}
|
|
14
11
|
|
|
15
12
|
.edit-post-meta-boxes-main__presenter {
|
|
@@ -18,11 +15,14 @@
|
|
|
18
15
|
// Windows High Contrast mode will show this outline, but not the shadow.
|
|
19
16
|
outline: 1px solid transparent;
|
|
20
17
|
position: relative;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
// Re-resizable adds an invisible overlay during resizes (apparently meant to avoid text selections)
|
|
19
|
+
// and this has to appear in front of it or else click events will be blocked on touch devices.
|
|
20
|
+
z-index: 10000;
|
|
21
|
+
inset: 0 0 auto;
|
|
22
|
+
height: $button-size-compact;
|
|
23
|
+
|
|
24
|
+
// Style reset for both toggle and separator buttons.
|
|
25
|
+
> button {
|
|
26
26
|
appearance: none;
|
|
27
27
|
padding: 0;
|
|
28
28
|
border: none;
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
background-color: transparent;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
flex-shrink: 0;
|
|
33
|
+
> button[aria-expanded] {
|
|
35
34
|
cursor: pointer;
|
|
36
|
-
|
|
35
|
+
width: 100%;
|
|
36
|
+
display: flex;
|
|
37
37
|
justify-content: space-between;
|
|
38
38
|
align-items: center;
|
|
39
39
|
padding-inline: $grid-unit-30 $grid-unit-15;
|
|
@@ -52,54 +52,59 @@
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
button[role="separator"] {
|
|
56
|
+
cursor: row-resize;
|
|
57
|
+
width: $grid-unit-80;
|
|
58
|
+
margin: auto;
|
|
59
|
+
position: absolute;
|
|
60
|
+
inset: 0;
|
|
57
61
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
transform: translateX(-50%);
|
|
73
|
-
width: inherit;
|
|
74
|
-
height: $grid-unit-05;
|
|
75
|
-
border-radius: $radius-small;
|
|
76
|
-
@media not (prefers-reduced-motion) {
|
|
77
|
-
transition: width 0.3s ease-out;
|
|
78
|
-
}
|
|
62
|
+
&::before {
|
|
63
|
+
content: "";
|
|
64
|
+
background-color: $gray-300;
|
|
65
|
+
// Windows High Contrast mode will show this outline, but not the background-color.
|
|
66
|
+
outline: 2px solid transparent;
|
|
67
|
+
outline-offset: -2px;
|
|
68
|
+
position: absolute;
|
|
69
|
+
inset-block: calc(50% - #{$grid-unit-05} / 2) auto;
|
|
70
|
+
transform: translateX(-50%);
|
|
71
|
+
width: inherit;
|
|
72
|
+
height: $grid-unit-05;
|
|
73
|
+
border-radius: $radius-small;
|
|
74
|
+
@media not (prefers-reduced-motion) {
|
|
75
|
+
transition: width 0.3s ease-out;
|
|
79
76
|
}
|
|
80
77
|
}
|
|
81
78
|
|
|
82
|
-
&:is(:hover, :focus-
|
|
79
|
+
&:is(:hover, :focus-visible)::before {
|
|
83
80
|
background-color: var(--wp-admin-theme-color);
|
|
84
81
|
width: $grid-unit-80 + $grid-unit-20;
|
|
85
82
|
}
|
|
86
83
|
}
|
|
87
84
|
}
|
|
88
85
|
|
|
86
|
+
// Enlarge the toggle/resizable hit area on touch devices.
|
|
89
87
|
@media (pointer: coarse) {
|
|
90
|
-
.
|
|
91
|
-
padding-block-start: $button-size
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
88
|
+
.edit-post-meta-boxes-main {
|
|
89
|
+
padding-block-start: $button-size;
|
|
90
|
+
}
|
|
91
|
+
.edit-post-meta-boxes-main__presenter {
|
|
92
|
+
height: $button-size;
|
|
96
93
|
}
|
|
97
94
|
}
|
|
98
95
|
|
|
99
96
|
.edit-post-meta-boxes-main__liner {
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
// Enable scrolling only for the split view.
|
|
98
|
+
.edit-post-meta-boxes-main & {
|
|
99
|
+
overflow: auto;
|
|
100
|
+
}
|
|
101
|
+
// Keep the contents behind the resize handle.
|
|
102
102
|
isolation: isolate;
|
|
103
|
+
|
|
104
|
+
// While resizing override hidden attribute in case starting from closed state.
|
|
105
|
+
.is-resizing.edit-post-meta-boxes-main & {
|
|
106
|
+
display: unset;
|
|
107
|
+
}
|
|
103
108
|
}
|
|
104
109
|
|
|
105
110
|
// In case the canvas is not iframe’d.
|