PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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.0 → trunk 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 }