72 * Editor Normalization Styles |
78 * Editor Normalization Styles |
73 * |
79 * |
74 * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming |
80 * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming |
75 * of the editor by themes. |
81 * of the editor by themes. |
76 */ |
82 */ |
77 .editor-styles-wrapper { |
83 html :where(.editor-styles-wrapper) { |
78 padding: 8px; |
|
79 /** |
84 /** |
80 * The following styles revert to the browser defaults overriding the WPAdmin styles. |
85 * The following styles revert to the browser defaults overriding the WPAdmin styles. |
81 * This is only needed while the block editor is not being loaded in an iframe. |
86 * This is only needed while the block editor is not being loaded in an iframe. |
82 */ |
87 */ |
83 font-family: serif; |
88 font-family: serif; |
84 font-size: initial; |
89 font-size: initial; |
85 line-height: initial; |
90 line-height: initial; |
86 color: initial; |
91 color: initial; |
87 background: #fff; |
92 background: #fff; |
88 } |
93 } |
89 .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] { |
94 html :where(.editor-styles-wrapper) .wp-align-wrapper { |
90 margin-right: -8px; |
|
91 margin-left: -8px; |
|
92 } |
|
93 .editor-styles-wrapper .wp-align-wrapper { |
|
94 max-width: 840px; |
95 max-width: 840px; |
95 } |
96 } |
96 .editor-styles-wrapper .wp-align-wrapper > .wp-block, .editor-styles-wrapper .wp-align-wrapper.wp-align-full { |
97 html :where(.editor-styles-wrapper) .wp-align-wrapper > .wp-block, html :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-full { |
97 max-width: none; |
98 max-width: none; |
98 } |
99 } |
99 .editor-styles-wrapper .wp-align-wrapper.wp-align-wide { |
100 html :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-wide { |
100 max-width: 840px; |
101 max-width: 840px; |
101 } |
102 } |
102 .editor-styles-wrapper a { |
103 html :where(.editor-styles-wrapper) a { |
103 transition: none; |
104 transition: none; |
104 } |
105 } |
105 .editor-styles-wrapper code, |
106 html :where(.editor-styles-wrapper) code, |
106 .editor-styles-wrapper kbd { |
107 html :where(.editor-styles-wrapper) kbd { |
107 padding: 0; |
108 padding: 0; |
108 margin: 0; |
109 margin: 0; |
109 background: inherit; |
110 background: inherit; |
110 font-size: inherit; |
111 font-size: inherit; |
111 font-family: monospace; |
112 font-family: monospace; |
112 } |
113 } |
113 .editor-styles-wrapper p { |
114 html :where(.editor-styles-wrapper) p { |
114 font-size: revert; |
115 font-size: revert; |
115 line-height: revert; |
116 line-height: revert; |
116 margin: revert; |
117 margin: revert; |
117 } |
118 } |
118 .editor-styles-wrapper ul, |
119 html :where(.editor-styles-wrapper) ul, |
119 .editor-styles-wrapper ol { |
120 html :where(.editor-styles-wrapper) ol { |
120 margin: revert; |
121 margin: revert; |
121 padding: revert; |
122 padding: revert; |
122 list-style-type: revert; |
123 list-style-type: revert; |
123 box-sizing: revert; |
124 box-sizing: border-box; |
124 } |
125 } |
125 .editor-styles-wrapper ul ul, |
126 html :where(.editor-styles-wrapper) ul ul, |
126 .editor-styles-wrapper ul ol, |
127 html :where(.editor-styles-wrapper) ul ol, |
127 .editor-styles-wrapper ol ul, |
128 html :where(.editor-styles-wrapper) ol ul, |
128 .editor-styles-wrapper ol ol { |
129 html :where(.editor-styles-wrapper) ol ol { |
129 margin: revert; |
130 margin: revert; |
130 } |
131 } |
131 .editor-styles-wrapper ul li, |
132 html :where(.editor-styles-wrapper) ul li, |
132 .editor-styles-wrapper ol li { |
133 html :where(.editor-styles-wrapper) ol li { |
133 margin: revert; |
134 margin: revert; |
134 } |
135 } |
135 .editor-styles-wrapper ul ul, |
136 html :where(.editor-styles-wrapper) ul ul, |
136 .editor-styles-wrapper ol ul { |
137 html :where(.editor-styles-wrapper) ol ul { |
137 list-style-type: revert; |
138 list-style-type: revert; |
138 } |
139 } |
139 .editor-styles-wrapper h1, |
140 html :where(.editor-styles-wrapper) h1, |
140 .editor-styles-wrapper h2, |
141 html :where(.editor-styles-wrapper) h2, |
141 .editor-styles-wrapper h3, |
142 html :where(.editor-styles-wrapper) h3, |
142 .editor-styles-wrapper h4, |
143 html :where(.editor-styles-wrapper) h4, |
143 .editor-styles-wrapper h5, |
144 html :where(.editor-styles-wrapper) h5, |
144 .editor-styles-wrapper h6 { |
145 html :where(.editor-styles-wrapper) h6 { |
145 font-size: revert; |
146 font-size: revert; |
146 margin: revert; |
147 margin: revert; |
147 color: revert; |
148 color: revert; |
148 line-height: revert; |
149 line-height: revert; |
149 font-weight: revert; |
150 font-weight: revert; |
150 } |
151 } |
151 .editor-styles-wrapper select { |
152 html :where(.editor-styles-wrapper) select { |
152 font-family: system-ui; |
153 font-family: system-ui; |
153 -webkit-appearance: revert; |
154 -webkit-appearance: revert; |
154 color: revert; |
155 color: revert; |
155 border: revert; |
156 border: revert; |
156 border-radius: revert; |
157 border-radius: revert; |