← All changes | build/styles/block-editor/style.css +115 -30 24.0.0 → 24.1.0 View file →

		@@ -339,8 +339,21 @@
339	339	padding: 32px 16px;
340	340	text-align: center;
341	341	}
342	342
	343	+.block-editor-block-inspector__state-badges {
	344	+ display: flex;
	345	+ align-items: center;
	346	+ flex-wrap: wrap;
	347	+ gap: 8px;
	348	+ padding: 8px 16px;
	349	+ margin-top: -16px;
	350	+}
	351	+
	352	+.block-editor-block-inspector__state-badges-text {
	353	+ white-space: nowrap;
	354	+}
	355	+
343	356	.block-editor-block-inspector__no-block-tools {
344	357	border-top: 1px solid #ddd;
345	358	}
346	359
		@@ -635,9 +648,9 @@
635	648	}
636	649	.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
637	650	flex-shrink: 0;
638	651	margin-right: 12px;
639		- fill: #1e1e1e;
	652	+ color: #1e1e1e;
640	653	}
641	654	.block-editor-block-lock-modal__checklist-item:hover {
642	655	background-color: #f0f0f0;
643	656	border-radius: 2px;
		@@ -745,8 +758,9 @@
745	758	display: flex;
746	759	align-items: center;
747	760	flex-wrap: wrap;
748	761	gap: 4px 8px;
	762	+ overflow-wrap: anywhere;
749	763	}
750	764	.block-editor-block-card__title.block-editor-block-card__title {
751	765	font-size: 13px;
752	766	line-height: 1.4;
		@@ -1043,16 +1057,8 @@
1043	1057	animation: components-button__appear-animation 0.1s ease;
1044	1058	animation-fill-mode: forwards;
1045	1059	}
1046	1060	}
1047		-.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
1048		- box-shadow: none;
1049		- outline: none;
1050		-}
1051		-.components-button.block-editor-block-mover-button:focus-visible::before {
1052		- box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1053		- outline: 2px solid transparent;
1054		-}
1055	1061
1056	1062	.block-editor-block-navigation__container {
1057	1063	min-width: 280px;
1058	1064	}
		@@ -1125,9 +1131,9 @@
1125	1131	min-width: 24px;
1126	1132	height: 24px;
1127	1133	}
1128	1134	.block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1129		- fill: var(--wp-block-synced-color);
	1135	+ color: var(--wp-block-synced-color);
1130	1136	}
1131	1137
1132	1138	.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1133	1139	border-top: 1px solid #2f2f2f;
		@@ -1622,8 +1628,9 @@
1622	1628	background: #f0f0f0;
1623	1629	color: var(--wp-admin-theme-color);
1624	1630	}
1625	1631	.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
	1632	+ min-width: 0;
1626	1633	white-space: nowrap;
1627	1634	overflow: hidden;
1628	1635	text-overflow: ellipsis;
1629	1636	max-width: calc(100% - 44px);
		@@ -1638,8 +1645,21 @@
1638	1645	.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1639	1646	flex-shrink: 0;
1640	1647	}
1641	1648
	1649	+.block-editor-panel-color-gradient-settings__labeled-indicators {
	1650	+ width: 100%;
	1651	+ min-width: 0;
	1652	+}
	1653	+
	1654	+.block-editor-panel-color-gradient-settings__color-indicators {
	1655	+ display: flex;
	1656	+ flex-shrink: 0;
	1657	+}
	1658	+.block-editor-panel-color-gradient-settings__color-indicators > * + * {
	1659	+ margin-inline-start: -8px;
	1660	+}
	1661	+
1642	1662	.block-editor-panel-color-gradient-settings__reset {
1643	1663	position: absolute;
1644	1664	right: 0;
1645	1665	top: 8px;
		@@ -1769,8 +1789,17 @@
1769	1789	.block-editor-global-styles__shadow-dropdown-toggle.is-open {
1770	1790	background-color: #f0f0f0;
1771	1791	}
1772	1792
	1793	+.block-editor-panel-duotone-settings__label-row {
	1794	+ width: 100%;
	1795	+ min-width: 0;
	1796	+}
	1797	+
	1798	+.block-editor-panel-duotone-settings__label {
	1799	+ min-width: 0;
	1800	+}
	1801	+
1773	1802	.block-editor-global-styles__shadow-editor__remove-button {
1774	1803	position: absolute;
1775	1804	right: 0;
1776	1805	top: 8px;
		@@ -1853,8 +1882,74 @@
1853	1882	opacity: 1;
1854	1883	}
1855	1884	}
1856	1885
	1886	+.block-editor-global-styles__text-shadow {
	1887	+ width: 260px;
	1888	+ padding: 8px;
	1889	+}
	1890	+
	1891	+.block-editor-global-styles__text-shadow-preview {
	1892	+ display: flex;
	1893	+ align-items: center;
	1894	+ justify-content: center;
	1895	+ height: 80px;
	1896	+ border: #ddd 1px solid;
	1897	+ border-radius: 2px;
	1898	+ font-size: 24px;
	1899	+ margin-bottom: 16px;
	1900	+ /*rtl:begin:ignore*/
	1901	+ background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
	1902	+ background-position: 0 0, 8px 8px;
	1903	+ /*rtl:end:ignore*/
	1904	+ background-size: 16px 16px;
	1905	+}
	1906	+
	1907	+.block-editor-global-styles__text-shadow-list-item {
	1908	+ justify-content: space-between;
	1909	+ gap: 8px;
	1910	+ width: 100%;
	1911	+}
	1912	+.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
	1913	+ opacity: 0;
	1914	+}
	1915	+
	1916	+.block-editor-global-styles__text-shadow-dropdown {
	1917	+ display: block;
	1918	+ padding: 0;
	1919	+ position: relative;
	1920	+ border: 1px solid #ddd;
	1921	+ border-radius: 2px;
	1922	+}
	1923	+
	1924	+.block-editor-global-styles__text-shadow-dropdown-toggle {
	1925	+ width: 100%;
	1926	+ padding: 8px;
	1927	+}
	1928	+.block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
	1929	+ background-color: #f0f0f0;
	1930	+}
	1931	+
	1932	+.block-editor-global-styles__text-shadow-remove-button {
	1933	+ position: absolute;
	1934	+ right: 8px;
	1935	+ top: 8px;
	1936	+ opacity: 0;
	1937	+}
	1938	+@media not (prefers-reduced-motion) {
	1939	+ .block-editor-global-styles__text-shadow-remove-button {
	1940	+ transition: opacity 0.1s ease-in-out;
	1941	+ }
	1942	+}
	1943	+.block-editor-global-styles__text-shadow-dropdown:hover .block-editor-global-styles__text-shadow-remove-button, .block-editor-global-styles__text-shadow-remove-button:focus, .block-editor-global-styles__text-shadow-remove-button:hover {
	1944	+ opacity: 1;
	1945	+}
	1946	+@media (hover: none) {
	1947	+ .block-editor-global-styles__text-shadow-remove-button {
	1948	+ opacity: 1;
	1949	+ }
	1950	+}
	1951	+
1857	1952	.is-inherited-from-global-styles .components-base-control__label,
1858	1953	.is-inherited-from-global-styles .components-input-control__label {
1859	1954	text-decoration-line: underline;
1860	1955	text-decoration-style: dotted;
		@@ -2239,9 +2334,10 @@
2239	2334	align-items: stretch;
2240	2335	justify-content: center;
2241	2336	cursor: var(--wpds-cursor-control, pointer);
2242	2337	background: transparent;
2243		- word-break: break-word;
	2338	+ word-break: normal;
	2339	+ overflow-wrap: break-word;
2244	2340	}
2245	2341	@media not (prefers-reduced-motion) {
2246	2342	.components-button.block-editor-block-types-list__item {
2247	2343	transition: all 0.05s ease-in-out;
		@@ -2512,9 +2608,9 @@
2512	2608	color: inherit;
2513	2609	background-color: transparent;
2514	2610	}
2515	2611	.block-editor-link-control__preview .block-editor-link-control__preview-title span {
2516		- font-weight: normal;
	2612	+ font-weight: 400;
2517	2613	}
2518	2614	.block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2519	2615	position: absolute;
2520	2616	width: 1px;
		@@ -3021,14 +3117,8 @@
3021	3117	}
3022	3118	.block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
3023	3119	top: -4px;
3024	3120	}
3025		-.block-editor-list-view-leaf .block-editor-block-mover-button::before {
3026		- height: 16px;
3027		- min-width: 100%;
3028		- left: 0;
3029		- right: 0;
3030		-}
3031	3121	.block-editor-list-view-leaf .block-editor-inserter__toggle {
3032	3122	background: #1e1e1e;
3033	3123	color: #fff;
3034	3124	height: 24px;
		@@ -3334,8 +3424,13 @@
3334	3424	width: 36px;
3335	3425	height: 24px;
3336	3426	}
3337	3427
	3428	+.block-editor-plain-text {
	3429	+ width: 100%;
	3430	+ field-sizing: content;
	3431	+}
	3432	+
3338	3433	.block-editor-responsive-block-control {
3339	3434	margin-bottom: 28px;
3340	3435	border-bottom: 1px solid #ccc;
3341	3436	padding-bottom: 14px;
		@@ -3373,9 +3468,9 @@
3373	3468	overflow: hidden;
3374	3469	padding: 0;
3375	3470	position: absolute;
3376	3471	width: 1px;
3377		- word-wrap: normal !important;
	3472	+ overflow-wrap: normal !important;
3378	3473	word-break: normal !important;
3379	3474	}
3380	3475
3381	3476	.preset-input-control__wrapper > * {
		@@ -3693,13 +3788,8 @@
3693	3788	font-size: 12px;
3694	3789	margin-bottom: 16px;
3695	3790	}
3696	3791
3697		-.block-editor-hooks__position-control-item-hint {
3698		- color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3699		- margin-block-start: 4px;
3700		-}
3701		-
3702	3792	div.block-editor-bindings__panel {
3703	3793	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3704	3794	}
3705	3795	div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
		@@ -4743,9 +4833,9 @@
4743	4833	.block-editor-block-visibility-modal__options-checkbox--everywhere {
4744	4834	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4745	4835	}
4746	4836	.block-editor-block-visibility-modal__options-icon--checked {
4747		- fill: #ddd;
	4837	+ color: #ddd;
4748	4838	}
4749	4839	.block-editor-block-visibility-modal__sub-options {
4750	4840	width: 100%;
4751	4841	padding-inline-start: 12px;
		@@ -4755,14 +4845,9 @@
4755	4845	color: #757575;
4756	4846	}
4757	4847
4758	4848	.block-editor-block-visibility-info {
4759		- padding-top: 4px;
4760		- padding-bottom: 4px;
4761	4849	margin: 0 16px 16px;
4762		- display: flex;
4763		- align-items: center;
4764		- justify-content: start;
4765	4850	}
4766	4851
4767	4852	/* The stop element is invisible, so its focus indication is drawn around the
4768	4853	canvas it stands for. For the iframed canvas it is an overlay instead of