/
style.scss
132 lines (110 loc) · 3.63 KB
/
style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* Default block appender.
*
* This component shows up in 3 places:
* - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
* - on the right, inside empty paragraphs
* - absolute positioned and blue inside nesting containers
*/
.block-editor-default-block-appender {
clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
// Default to centered and content-width, like blocks
margin-left: auto;
margin-right: auto;
position: relative;
&[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
// Outline on root-level default block appender is redundant with the
// WritingFlow click redirector.
outline: 1px solid transparent;
}
.block-editor-default-block-appender__content {
// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
opacity: 0.62;
}
// Dropzone.
.components-drop-zone__content-icon {
display: none;
}
}
// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
// that exists only on empty documents.
.block-editor-default-block-appender .block-editor-inserter,
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
position: absolute;
top: 0;
right: 0;
line-height: 0;
&:disabled {
display: none;
}
}
/**
* Fixed position appender.
* These styles apply to all in-canvas inserters that exist inside nesting containers.
*/
.block-editor-block-list__block .block-list-appender {
position: absolute;
list-style: none;
padding: 0;
z-index: z-index(".block-editor-block-list__block .block-list-appender");
bottom: 0;
right: 0;
// These rules needs extra specificity as it's affected by DOM rules.
&.block-list-appender {
margin: 0;
line-height: 0;
}
.block-editor-default-block-appender {
height: $button-size-small;
}
// @todo: these are currently two separate components. Since we're now
// treating them the same, one or both can be retired.
.block-editor-inserter__toggle.components-button.has-icon,
.block-list-appender__toggle {
flex-direction: row;
box-shadow: none;
height: $button-size-small;
width: $button-size-small;
// Hide by default, then we unhide it when the selected block is a direct ancestor.
display: none;
// Important to override styles form Button component.
padding: 0 !important;
// Basic look
background: $gray-900;
color: $white;
&:hover {
color: $white;
background: var(--wp-admin-theme-color);
}
}
// This content only shows up inside the empty appender.
.block-editor-default-block-appender__content {
display: none;
}
// These could be avoided by employing a :not(:only-child) on the parent,
// but this should be more performant.
// @todo: These styles can almost certainly be refactored away we refactor
// the markup and classes of the component itself. The rules provide some
// baseline styles for when the block is the only one inside.
&:only-child {
position: relative;
right: auto;
align-self: center;
list-style: none;
line-height: inherit;
.block-editor-default-block-appender__content {
display: block;
}
}
}
// Unhide the inserter when you're in the exact container.
.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
.block-editor-block-list__block.is-selected > .block-list-appender {
.block-editor-inserter__toggle.components-button.has-icon,
.block-list-appender__toggle {
display: flex;
}
}
.block-editor-default-block-appender__content {
cursor: text;
}