PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-editor/style.css +215 -263 23.9.1 → 24.1.0 View file →
@@ -257,11 +257,11 @@
257 257 z-index: 159890;
258 258 }
259 259
260 260 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
261 - width: 226px;
261 + width: auto;
262 262 }
263 -.block-editor-global-styles-background-panel__media-replace-popover .components-button {
263 +.block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button {
264 264 padding: 0 8px;
265 265 }
266 266 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
267 267 margin-left: 16px;
@@ -295,13 +295,8 @@
295 295 }
296 296 .block-editor-block-icon.has-colors svg {
297 297 fill: currentColor;
298 298 }
299 -@media (forced-colors: active) {
300 - .block-editor-block-icon.has-colors svg {
301 - fill: CanvasText;
302 - }
303 -}
304 299 .block-editor-block-icon svg {
305 300 min-width: 20px;
306 301 min-height: 20px;
307 302 max-width: 24px;
@@ -344,8 +339,21 @@
344 339 padding: 32px 16px;
345 340 text-align: center;
346 341 }
347 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 +
348 356 .block-editor-block-inspector__no-block-tools {
349 357 border-top: 1px solid #ddd;
350 358 }
351 359
@@ -640,9 +648,9 @@
640 648 }
641 649 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
642 650 flex-shrink: 0;
643 651 margin-right: 12px;
644 - fill: #1e1e1e;
652 + color: #1e1e1e;
645 653 }
646 654 .block-editor-block-lock-modal__checklist-item:hover {
647 655 background-color: #f0f0f0;
648 656 border-radius: 2px;
@@ -750,8 +758,9 @@
750 758 display: flex;
751 759 align-items: center;
752 760 flex-wrap: wrap;
753 761 gap: 4px 8px;
762 + overflow-wrap: anywhere;
754 763 }
755 764 .block-editor-block-card__title.block-editor-block-card__title {
756 765 font-size: 13px;
757 766 line-height: 1.4;
@@ -855,11 +864,9 @@
855 864 height: 48px;
856 865 padding: 0 13px;
857 866 position: relative;
858 867 -webkit-user-select: none;
859 - -moz-user-select: none;
860 868 user-select: none;
861 - width: -moz-max-content;
862 869 width: max-content;
863 870 }
864 871 .block-editor-block-draggable-chip svg {
865 872 fill: currentColor;
@@ -959,8 +966,9 @@
959 966 }
960 967 .block-editor-block-manager__checklist-item .block-editor-block-icon {
961 968 margin-right: 10px;
962 969 fill: #1e1e1e;
970 + color: #1e1e1e;
963 971 }
964 972
965 973 .block-editor-block-manager__results {
966 974 border-top: 1px solid #ddd;
@@ -1049,16 +1057,8 @@
1049 1057 animation: components-button__appear-animation 0.1s ease;
1050 1058 animation-fill-mode: forwards;
1051 1059 }
1052 1060 }
1053 -.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 {
1054 - box-shadow: none;
1055 - outline: none;
1056 -}
1057 -.components-button.block-editor-block-mover-button:focus-visible::before {
1058 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1059 - outline: 2px solid transparent;
1060 -}
1061 1061
1062 1062 .block-editor-block-navigation__container {
1063 1063 min-width: 280px;
1064 1064 }
@@ -1131,9 +1131,9 @@
1131 1131 min-width: 24px;
1132 1132 height: 24px;
1133 1133 }
1134 1134 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1135 - fill: var(--wp-block-synced-color);
1135 + color: var(--wp-block-synced-color);
1136 1136 }
1137 1137
1138 1138 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1139 1139 border-top: 1px solid #2f2f2f;
@@ -1159,9 +1159,8 @@
1159 1159 }
1160 1160 .components-popover.block-editor-block-popover .components-popover__content {
1161 1161 margin: 0 !important;
1162 1162 min-width: auto;
1163 - width: -moz-max-content;
1164 1163 width: max-content;
1165 1164 overflow-y: visible;
1166 1165 }
1167 1166 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
@@ -1256,10 +1255,9 @@
1256 1255 gap: 8px;
1257 1256 }
1258 1257 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1259 1258 text-align: start;
1260 - -moz-text-align-last: center;
1261 - text-align-last: center;
1259 + text-align-last: center;
1262 1260 }
1263 1261
1264 1262 .components-popover.block-editor-block-switcher__popover .components-popover__content {
1265 1263 min-width: 300px;
@@ -1362,22 +1360,19 @@
1362 1360 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
1363 1361 justify-content: center;
1364 1362 }
1365 1363 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1366 - -moz-column-gap: 24px;
1367 - column-gap: 24px;
1364 + column-gap: 24px;
1368 1365 display: block;
1369 1366 width: 100%;
1370 1367 padding: 32px;
1371 1368 padding-bottom: 0;
1372 1369 padding-top: 0;
1373 - -moz-column-count: 2;
1374 - column-count: 2;
1370 + column-count: 2;
1375 1371 }
1376 1372 @media (min-width: 1440px) {
1377 1373 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1378 - -moz-column-count: 3;
1379 - column-count: 3;
1374 + column-count: 3;
1380 1375 }
1381 1376 }
1382 1377 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1383 1378 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
@@ -1397,10 +1392,9 @@
1397 1392 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
1398 1393 color: var(--wp-admin-theme-color);
1399 1394 }
1400 1395 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
1401 - -moz-column-break-inside: avoid;
1402 - break-inside: avoid-column;
1396 + break-inside: avoid-column;
1403 1397 margin-bottom: 24px;
1404 1398 }
1405 1399 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
1406 1400 padding-top: 8px;
@@ -1634,8 +1628,9 @@
1634 1628 background: #f0f0f0;
1635 1629 color: var(--wp-admin-theme-color);
1636 1630 }
1637 1631 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1632 + min-width: 0;
1638 1633 white-space: nowrap;
1639 1634 overflow: hidden;
1640 1635 text-overflow: ellipsis;
1641 1636 max-width: calc(100% - 44px);
@@ -1650,8 +1645,21 @@
1650 1645 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1651 1646 flex-shrink: 0;
1652 1647 }
1653 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 +
1654 1662 .block-editor-panel-color-gradient-settings__reset {
1655 1663 position: absolute;
1656 1664 right: 0;
1657 1665 top: 8px;
@@ -1781,8 +1789,17 @@
1781 1789 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1782 1790 background-color: #f0f0f0;
1783 1791 }
1784 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 +
1785 1802 .block-editor-global-styles__shadow-editor__remove-button {
1786 1803 position: absolute;
1787 1804 right: 0;
1788 1805 top: 8px;
@@ -1803,11 +1820,9 @@
1803 1820 }
1804 1821 }
1805 1822
1806 1823 .block-editor-global-styles__shadow-indicator {
1807 - -webkit-appearance: none;
1808 - -moz-appearance: none;
1809 - appearance: none;
1824 + appearance: none;
1810 1825 background: none;
1811 1826 color: #2f2f2f;
1812 1827 border: #e0e0e0 1px solid;
1813 1828 border-radius: 2px;
@@ -1867,8 +1882,74 @@
1867 1882 opacity: 1;
1868 1883 }
1869 1884 }
1870 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 +
1871 1952 .is-inherited-from-global-styles .components-base-control__label,
1872 1953 .is-inherited-from-global-styles .components-input-control__label {
1873 1954 text-decoration-line: underline;
1874 1955 text-decoration-style: dotted;
@@ -2088,16 +2169,8 @@
2088 2169 animation: components-button__appear-animation 0.1s ease;
2089 2170 animation-fill-mode: forwards;
2090 2171 }
2091 2172 }
2092 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
2093 - box-shadow: none;
2094 - outline: none;
2095 -}
2096 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
2097 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2098 - outline: 2px solid transparent;
2099 -}
2100 2173
2101 2174 .block-editor-grid-item-mover__move-vertical-button-container {
2102 2175 display: flex;
2103 2176 position: relative;
@@ -2261,9 +2334,10 @@
2261 2334 align-items: stretch;
2262 2335 justify-content: center;
2263 2336 cursor: var(--wpds-cursor-control, pointer);
2264 2337 background: transparent;
2265 - word-break: break-word;
2338 + word-break: normal;
2339 + overflow-wrap: break-word;
2266 2340 }
2267 2341 @media not (prefers-reduced-motion) {
2268 2342 .components-button.block-editor-block-types-list__item {
2269 2343 transition: all 0.05s ease-in-out;
@@ -2534,9 +2608,9 @@
2534 2608 color: inherit;
2535 2609 background-color: transparent;
2536 2610 }
2537 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2538 - font-weight: normal;
2612 + font-weight: 400;
2539 2613 }
2540 2614 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2541 2615 position: absolute;
2542 2616 width: 1px;
@@ -2543,9 +2617,9 @@
2543 2617 height: 1px;
2544 2618 padding: 0;
2545 2619 margin: -1px;
2546 2620 overflow: hidden;
2547 - clip: rect(0, 0, 0, 0);
2621 + clip-path: inset(50%);
2548 2622 border: 0;
2549 2623 }
2550 2624
2551 2625 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2699,10 +2773,9 @@
2699 2773
2700 2774 .link-preview-button__image {
2701 2775 width: 100%;
2702 2776 height: 100%;
2703 - -o-object-fit: cover;
2704 - object-fit: cover;
2777 + object-fit: cover;
2705 2778 border-radius: 2px;
2706 2779 }
2707 2780
2708 2781 .link-preview-button__content {
@@ -2764,8 +2837,11 @@
2764 2837 .block-editor-list-view-leaf {
2765 2838 position: relative;
2766 2839 transform: translateY(0);
2767 2840 }
2841 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2842 + z-index: 1;
2843 +}
2768 2844 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2769 2845 cursor: grab;
2770 2846 }
2771 2847 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2776,13 +2852,8 @@
2776 2852 }
2777 2853 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2778 2854 fill: currentColor;
2779 2855 }
2780 -@media (forced-colors: active) {
2781 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2782 - fill: CanvasText;
2783 - }
2784 -}
2785 2856 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2786 2857 color: inherit;
2787 2858 }
2788 2859 .block-editor-list-view-leaf.is-selected td {
@@ -2794,23 +2865,45 @@
2794 2865 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
2795 2866 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2796 2867 color: var(--wp-block-synced-color);
2797 2868 }
2798 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2799 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2869 +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2870 + --focus-color: var(--wp-block-synced-color);
2800 2871 }
2872 +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2873 + --focus-color: var(--wp-block-synced-color);
2874 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2875 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2876 +}
2801 2877 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2802 2878 color: #fff;
2803 2879 }
2804 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2805 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2880 +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2881 + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2882 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2883 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2884 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2806 2885 }
2807 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2808 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2886 +@media (forced-colors: active) {
2887 + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2888 + background: SelectedItem;
2889 + }
2890 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2891 + color: SelectedItemText;
2892 + }
2893 + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2894 + fill: SelectedItemText;
2895 + }
2896 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2897 + forced-color-adjust: none;
2898 + }
2899 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2900 + --focus-color: CanvasText;
2901 + }
2902 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2903 + --focus-color: SelectedItemText;
2904 + }
2809 2905 }
2810 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2811 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2812 -}
2813 2906 .block-editor-list-view-leaf.is-first-selected td:first-child {
2814 2907 border-top-left-radius: 2px;
2815 2908 }
2816 2909 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2932,8 +3025,9 @@
2932 3025 }
2933 3026 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2934 3027 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2935 3028 box-shadow: none;
3029 + outline: none;
2936 3030 }
2937 3031 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2938 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2939 3033 content: "";
@@ -2938,13 +3032,16 @@
2938 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2939 3033 content: "";
2940 3034 position: absolute;
2941 3035 top: 0;
2942 - right: -29px;
3036 + right: -28px;
2943 3037 bottom: 0;
2944 3038 left: 0;
2945 3039 border-radius: inherit;
2946 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3040 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3041 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3042 + outline-offset: 1px;
3043 + box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2947 3044 z-index: 2;
2948 3045 pointer-events: none;
2949 3046 }
2950 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2949,12 +3046,8 @@
2949 3046 }
2950 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2951 3048 right: 0;
2952 3049 }
2953 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu {
2954 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2955 - z-index: 1;
2956 -}
2957 3050 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2958 3051 opacity: 1;
2959 3052 }
2960 3053 @keyframes __wp-base-styles-fade-in {
@@ -3024,14 +3117,8 @@
3024 3117 }
3025 3118 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
3026 3119 top: -4px;
3027 3120 }
3028 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
3029 - height: 16px;
3030 - min-width: 100%;
3031 - left: 0;
3032 - right: 0;
3033 -}
3034 3121 .block-editor-list-view-leaf .block-editor-inserter__toggle {
3035 3122 background: #1e1e1e;
3036 3123 color: #fff;
3037 3124 height: 24px;
@@ -3337,8 +3424,13 @@
3337 3424 width: 36px;
3338 3425 height: 24px;
3339 3426 }
3340 3427
3428 +.block-editor-plain-text {
3429 + width: 100%;
3430 + field-sizing: content;
3431 +}
3432 +
3341 3433 .block-editor-responsive-block-control {
3342 3434 margin-bottom: 28px;
3343 3435 border-bottom: 1px solid #ccc;
3344 3436 padding-bottom: 14px;
@@ -3376,9 +3468,9 @@
3376 3468 overflow: hidden;
3377 3469 padding: 0;
3378 3470 position: absolute;
3379 3471 width: 1px;
3380 - word-wrap: normal !important;
3472 + overflow-wrap: normal !important;
3381 3473 word-break: normal !important;
3382 3474 }
3383 3475
3384 3476 .preset-input-control__wrapper > * {
@@ -3682,172 +3774,8 @@
3682 3774 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3683 3775 row-gap: 0;
3684 3776 }
3685 3777
3686 -.block-editor-content-only-controls__link {
3687 - width: 100%;
3688 - border-color: #ccc;
3689 -}
3690 -
3691 -.block-editor-content-only-controls__link-row {
3692 - align-items: center;
3693 -}
3694 -
3695 -.block-editor-content-only-controls__link-title {
3696 - width: 100%;
3697 - white-space: nowrap;
3698 - text-overflow: ellipsis;
3699 - overflow: hidden;
3700 -}
3701 -
3702 -.block-editor-content-only-controls__media {
3703 - width: 100%;
3704 - border-color: #ccc;
3705 - padding-right: 32px;
3706 -}
3707 -
3708 -.block-editor-content-only-controls__media-replace-flow {
3709 - display: block;
3710 -}
3711 -
3712 -.block-editor-content-only-controls__media-row {
3713 - align-items: center;
3714 -}
3715 -
3716 -.block-editor-content-only-controls__media-placeholder {
3717 - width: 24px;
3718 - height: 24px;
3719 - border-radius: 2px;
3720 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3721 - display: inline-block;
3722 - padding: 0;
3723 - background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3724 -}
3725 -
3726 -.block-editor-content-only-controls__media-title {
3727 - width: 100%;
3728 - white-space: nowrap;
3729 - text-overflow: ellipsis;
3730 - overflow: hidden;
3731 -}
3732 -
3733 -.block-editor-content-only-controls__media-thumbnail {
3734 - width: 20px;
3735 - height: 20px;
3736 - border-radius: 2px;
3737 - align-self: center;
3738 - overflow: hidden;
3739 -}
3740 -.block-editor-content-only-controls__media-thumbnail img {
3741 - width: 100% !important;
3742 - height: 100% !important;
3743 - -o-object-fit: cover;
3744 - object-fit: cover;
3745 -}
3746 -
3747 -.block-editor-content-only-controls {
3748 - position: relative;
3749 -}
3750 -
3751 -.block-editor-content-only-controls__media-reset {
3752 - position: absolute;
3753 - right: 0;
3754 - top: 8px;
3755 - margin: auto 8px auto;
3756 - opacity: 0;
3757 - border-radius: 2px;
3758 -}
3759 -@media not (prefers-reduced-motion) {
3760 - .block-editor-content-only-controls__media-reset {
3761 - transition: opacity 0.1s ease-in-out;
3762 - }
3763 -}
3764 -.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
3765 - opacity: 1;
3766 -}
3767 -@media (hover: none) {
3768 - .block-editor-content-only-controls__media-reset {
3769 - opacity: 1;
3770 - }
3771 -}
3772 -
3773 -.block-editor-content-only-controls__rich-text {
3774 - width: 100%;
3775 - margin: 0;
3776 - background: #fff;
3777 - color: #1e1e1e;
3778 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3779 - padding: 6px 8px;
3780 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3781 - font-size: 16px;
3782 - /* Override core line-height. To be reviewed. */
3783 - line-height: normal;
3784 - border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3785 - border-radius: var(--wpds-border-radius-sm, 2px);
3786 -}
3787 -@media (min-width: 600px) {
3788 - .block-editor-content-only-controls__rich-text {
3789 - font-size: 13px;
3790 - /* Override core line-height. To be reviewed. */
3791 - line-height: normal;
3792 - }
3793 -}
3794 -.block-editor-content-only-controls__rich-text:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
3795 - border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3796 -}
3797 -.block-editor-content-only-controls__rich-text:focus {
3798 - outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3799 - outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3800 - border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3801 - box-shadow: none;
3802 -}
3803 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3804 - color: rgba(30, 30, 30, 0.62);
3805 -}
3806 -.block-editor-content-only-controls__rich-text::placeholder {
3807 - color: rgba(30, 30, 30, 0.62);
3808 -}
3809 -.block-editor-content-only-controls__rich-text {
3810 - border-color: #949494;
3811 -}
3812 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3813 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3814 -}
3815 -.block-editor-content-only-controls__rich-text::placeholder {
3816 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3817 -}
3818 -.block-editor-content-only-controls__rich-text {
3819 - min-height: 40px;
3820 - padding: 12px;
3821 -}
3822 -
3823 -.block-editor-block-fields__container {
3824 - padding: 0 16px 16px;
3825 -}
3826 -.block-editor-block-fields__container:first-of-type {
3827 - padding-block-start: 8px;
3828 - /*
3829 - * Add border for the entire content controls and remove the similar border
3830 - * for tools panel.
3831 - */
3832 - border-block-start: 1px solid #e0e0e0;
3833 -}
3834 -
3835 -.block-editor-block-fields__header {
3836 - padding: 8px 0;
3837 - margin-bottom: 4px;
3838 -}
3839 -
3840 -.block-editor-block-fields__header-icon {
3841 - flex: 0 0 24px;
3842 -}
3843 -
3844 -.block-editor-block-fields__header-title {
3845 - flex: 1;
3846 - /* Override the default margin on a h2 element. */
3847 - margin: 0 !important;
3848 -}
3849 -
3850 3778 .block-editor-hooks__block-hooks {
3851 3779 /**
3852 3780 * Un-reverse the flex direction for the toggle's label.
3853 3781 */
@@ -3860,21 +3788,8 @@
3860 3788 font-size: 12px;
3861 3789 margin-bottom: 16px;
3862 3790 }
3863 3791
3864 -.block-editor-hooks__position-control-item {
3865 - /**
3866 - * Try to make items match the width of the anchor, subtract any margin on
3867 - * items to calculate the correct inner width.
3868 - */
3869 - max-inline-size: max(var(--anchor-width) - 2 * var(--wp-ui-popup-padding), 223px);
3870 -}
3871 -
3872 -.block-editor-hooks__position-control-item-hint {
3873 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3874 - margin-block-start: 4px;
3875 -}
3876 -
3877 3792 div.block-editor-bindings__panel {
3878 3793 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3879 3794 }
3880 3795 div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
@@ -4194,9 +4109,9 @@
4194 4109 }
4195 4110 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
4196 4111 display: grid;
4197 4112 grid-template-columns: 1fr 1fr;
4198 - grid-gap: 12px;
4113 + gap: 12px;
4199 4114 }
4200 4115 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4201 4116 margin-bottom: 0;
4202 4117 }
@@ -4382,12 +4297,8 @@
4382 4297 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4383 4298 margin-right: 8px;
4384 4299 }
4385 4300
4386 -.block-editor-inserter__preview-container__popover {
4387 - top: 16px !important;
4388 -}
4389 -
4390 4301 .block-editor-inserter__preview-container {
4391 4302 display: none;
4392 4303 width: 280px;
4393 4304 padding: 16px;
@@ -4528,9 +4439,9 @@
4528 4439
4529 4440 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4530 4441 display: grid;
4531 4442 grid-template-columns: 1fr 1fr;
4532 - grid-gap: 8px;
4443 + gap: 8px;
4533 4444 }
4534 4445 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4535 4446 margin-bottom: 0;
4536 4447 }
@@ -4590,9 +4501,9 @@
4590 4501 }
4591 4502
4592 4503 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4593 4504 display: grid;
4594 - grid-gap: 32px;
4505 + gap: 32px;
4595 4506 grid-template-columns: repeat(1, 1fr);
4596 4507 margin-bottom: 16px;
4597 4508 }
4598 4509 @media (min-width: 1080px) {
@@ -4922,9 +4833,9 @@
4922 4833 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4923 4834 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4924 4835 }
4925 4836 .block-editor-block-visibility-modal__options-icon--checked {
4926 - fill: #ddd;
4837 + color: #ddd;
4927 4838 }
4928 4839 .block-editor-block-visibility-modal__sub-options {
4929 4840 width: 100%;
4930 4841 padding-inline-start: 12px;
@@ -4934,11 +4845,52 @@
4934 4845 color: #757575;
4935 4846 }
4936 4847
4937 4848 .block-editor-block-visibility-info {
4938 - padding-top: 4px;
4939 - padding-bottom: 4px;
4940 4849 margin: 0 16px 16px;
4941 - display: flex;
4942 - align-items: center;
4943 - justify-content: start;
4850 +}
4851 +
4852 +/* The stop element is invisible, so its focus indication is drawn around the
4853 + canvas it stands for. For the iframed canvas it is an overlay instead of
4854 + an outline, because Safari paints an outline on an iframe element
4855 + underneath the iframe's content. */
4856 +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4857 + content: "";
4858 + position: absolute;
4859 + inset: 0;
4860 + z-index: 1;
4861 + pointer-events: none;
4862 + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 +}
4864 +
4865 +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4866 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4867 + outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4868 +}
4869 +
4870 +/* Looks like a tooltip. Shown at the top of the canvas while the stop is
4871 + focused. Sticky, because on the widgets screen the stop spans scrolling
4872 + content and the hint must stay in view; anywhere else there is nothing
4873 + to scroll and it stays at the top of the canvas. */
4874 +.block-editor-writing-flow__canvas-stop-hint {
4875 + display: none;
4876 + position: sticky;
4877 + top: 16px;
4878 + margin-inline: auto;
4879 + width: fit-content;
4880 + z-index: 2;
4881 + background: #000;
4882 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4883 + border-radius: 4px;
4884 + color: #f0f0f0;
4885 + text-align: center;
4886 + line-height: 1.4;
4887 + font-size: 12px;
4888 + padding: 4px 8px;
4889 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
4890 + white-space: nowrap;
4891 + pointer-events: none;
4892 +}
4893 +
4894 +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4895 + display: block;
4944 4896 }