← All changes | build/styles/edit-post/style.css +38 -112 23.1.0 → trunk View file →

		@@ -67,8 +67,14 @@
67	67	/**
68	68	* Focus styles.
69	69	*/
70	70	/**
	71	+ * Standard focus rings for the WordPress Design System.
	72	+ *
	73	+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
	74	+ * e.g. `&:focus { @include outset-ring__focus(); }`.
	75	+ */
	76	+/**
71	77	* Applies editor left position to the selector passed as argument
72	78	*/
73	79	/**
74	80	* Styles that are reused verbatim in a few places
		@@ -105,101 +111,8 @@
105	111	--wp-admin-border-width-focus: 1.5px;
106	112	}
107	113	}
108	114
109		-.edit-post-fullscreen-mode-close__view-mode-toggle {
110		- top: 0;
111		- left: 0;
112		- height: 64px;
113		- width: 64px;
114		- z-index: 100;
115		-}
116		-.edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
117		- color: #fff;
118		- height: 100%;
119		- width: 100%;
120		- border-radius: 0;
121		- overflow: hidden;
122		- padding: 0;
123		- display: flex;
124		- align-items: center;
125		- justify-content: center;
126		-}
127		-.edit-post-fullscreen-mode-close__view-mode-toggle .components-button:hover, .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:active {
128		- color: #fff;
129		-}
130		-.edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
131		- box-shadow: none;
132		-}
133		-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
134		-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
135		- background: #1e1e1e;
136		- display: block;
137		-}
138		-
139		-.edit-post-fullscreen-mode-close-site-icon__icon {
140		- fill: currentColor;
141		- width: 100%;
142		- height: 100%;
143		- padding: 12px;
144		-}
145		-
146		-.edit-post-fullscreen-mode-close-site-icon__image {
147		- width: 100%;
148		- height: 100%;
149		- object-fit: cover;
150		- background: #333;
151		- aspect-ratio: 1/1;
152		-}
153		-
154		-.edit-post-fullscreen-mode-close.components-button:focus {
155		- position: relative;
156		-}
157		-.edit-post-fullscreen-mode-close.components-button:focus::before {
158		- content: "";
159		- display: block;
160		- position: absolute;
161		- z-index: 1;
162		- top: 0;
163		- right: 0;
164		- bottom: 0;
165		- left: 0;
166		- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
167		-}
168		-
169		-.edit-post-fullscreen-mode-close__back-icon {
170		- position: absolute;
171		- top: 0;
172		- left: 0;
173		- width: 64px;
174		- height: 64px;
175		- display: flex;
176		- align-items: center;
177		- justify-content: center;
178		- background-color: hsl(0, 0%, 80%);
179		- pointer-events: none;
180		-}
181		-.edit-post-fullscreen-mode-close__back-icon svg {
182		- fill: currentColor;
183		-}
184		-.edit-post-fullscreen-mode-close__back-icon.has-site-icon {
185		- background-color: hsla(0, 0%, 100%, 0.6);
186		- backdrop-filter: saturate(180%) blur(15px);
187		-}
188		-
189		-/**
190		- * Show icon label overrides.
191		- */
192		-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
193		- width: 64px;
194		-}
195		-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
196		- display: block;
197		-}
198		-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
199		- content: none;
200		-}
201		-
202	115	.edit-post-meta-boxes-main {
203	116	filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
204	117	outline: 1px solid transparent;
205	118	background-color: #fff;
		@@ -293,18 +206,24 @@
293	206	.edit-post-layout__metaboxes {
294	207	clear: both;
295	208	}
296	209
297		-.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
	210	+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor,
	211	+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-text-editor {
298	212	flex-shrink: 1;
299	213	flex-basis: 0%;
	214	+ isolation: isolate;
	215	+}
	216	+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
300	217	overflow: hidden;
301		- isolation: isolate;
302	218	}
	219	+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-text-editor {
	220	+ overflow: auto;
	221	+}
303	222
304	223	.edit-post-layout__snackbar {
305	224	position: fixed;
306		- bottom: 24px;
	225	+ bottom: var(--wpds-dimension-size-md, 32px);
307	226	left: 0;
308	227	right: 0;
309	228	padding-inline: 16px;
310	229	box-sizing: border-box;
		@@ -334,9 +253,9 @@
334	253	.edit-post-meta-boxes-area input {
335	254	box-sizing: border-box;
336	255	}
337	256	.edit-post-meta-boxes-area .postbox-header {
338		- border-top: 1px solid #ddd;
	257	+ border-top: 1px solid #e0e0e0;
339	258	border-bottom: 0;
340	259	}
341	260	.edit-post-meta-boxes-area {
342	261	/* Match width and positioning of the meta boxes. Override default styles. */
		@@ -352,10 +271,11 @@
352	271	.edit-post-meta-boxes-area #poststuff h3.hndle,
353	272	.edit-post-meta-boxes-area #poststuff .stuffbox > h3,
354	273	.edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
355	274	box-sizing: border-box;
356		- color: inherit;
357		- font-weight: 600;
	275	+ color: #1e1e1e;
	276	+ font-size: 13px;
	277	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
358	278	outline: none;
359	279	padding: 0 24px;
360	280	position: relative;
361	281	width: 100%;
		@@ -383,13 +303,13 @@
383	303	content: "";
384	304	background: transparent;
385	305	z-index: 1;
386	306	}
387		-.edit-post-meta-boxes-area .components-spinner {
	307	+.edit-post-meta-boxes-area .edit-post-meta-boxes-area__spinner {
388	308	position: absolute;
389	309	top: 10px;
390	310	right: 20px;
391		- z-index: 5;
	311	+ z-index: 2;
392	312	}
393	313	.edit-post-meta-boxes-area .is-hidden {
394	314	display: none;
395	315	}
		@@ -414,9 +334,9 @@
414	334	object-fit: cover;
415	335	}
416	336	.edit-post-welcome-guide__heading,
417	337	.edit-template-welcome-guide__heading {
418		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	338	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
419	339	font-size: 24px;
420	340	line-height: 1.4;
421	341	margin: 16px 0 16px 0;
422	342	padding: 0 24px;
		@@ -434,13 +354,13 @@
434	354	vertical-align: text-top;
435	355	}
436	356	.edit-post-welcome-guide .components-button:hover svg,
437	357	.edit-template-welcome-guide .components-button:hover svg {
438		- fill: #fff;
	358	+ color: #fff;
439	359	}
440	360
441	361	.edit-template-welcome-guide .components-button svg {
442		- fill: #fff;
	362	+ color: #fff;
443	363	}
444	364
445	365	body.js.block-editor-page {
446	366	background: #fff;
		@@ -472,8 +392,17 @@
472	392	body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
473	393	width: auto;
474	394	max-width: 100%;
475	395	}
	396	+@media (min-width: 782px) {
	397	+ body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
	398	+ --wp-admin--admin-bar--height: 0px;
	399	+ --wp-editor-admin-bar-display: none;
	400	+ }
	401	+ body.js.block-editor-page.is-fullscreen-mode #wpadminbar {
	402	+ display: var(--wp-editor-admin-bar-display, block);
	403	+ }
	404	+}
476	405
477	406	.block-editor-page #wpwrap {
478	407	overflow-y: auto;
479	408	}
		@@ -482,14 +411,14 @@
482	411	overflow-y: initial;
483	412	}
484	413	}
485	414
486		-.edit-post-visual-editor.is-iframed {
	415	+.edit-post-visual-editor {
487	416	box-sizing: border-box;
488	417	}
489		-.edit-post-visual-editor.is-iframed *,
490		-.edit-post-visual-editor.is-iframed *::before,
491		-.edit-post-visual-editor.is-iframed *::after {
	418	+.edit-post-visual-editor *,
	419	+.edit-post-visual-editor *::before,
	420	+.edit-post-visual-editor *::after {
492	421	box-sizing: inherit;
493	422	}
494	423
495	424	@media (min-width: 600px) {
		@@ -503,12 +432,9 @@
503	432	}
504	433	}
505	434	@media (min-width: 782px) {
506	435	.block-editor__container {
507		- min-height: calc(100vh - 32px);
508		- }
509		- body.is-fullscreen-mode .block-editor__container {
510		- min-height: 100vh;
	436	+ min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
511	437	}
512	438	}
513	439	.block-editor__container img {
514	440	max-width: 100%;