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-rtl.css +213 -263 23.9.1 → 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-right: 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-left: 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-left: 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 left: 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 left: 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;
@@ -1866,8 +1881,72 @@
1866 1881 opacity: 1;
1867 1882 }
1868 1883 }
1869 1884
1885 +.block-editor-global-styles__text-shadow {
1886 + width: 260px;
1887 + padding: 8px;
1888 +}
1889 +
1890 +.block-editor-global-styles__text-shadow-preview {
1891 + display: flex;
1892 + align-items: center;
1893 + justify-content: center;
1894 + height: 80px;
1895 + border: #ddd 1px solid;
1896 + border-radius: 2px;
1897 + font-size: 24px;
1898 + margin-bottom: 16px;
1899 + 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);
1900 + background-position: 0 0, 8px 8px;
1901 + background-size: 16px 16px;
1902 +}
1903 +
1904 +.block-editor-global-styles__text-shadow-list-item {
1905 + justify-content: space-between;
1906 + gap: 8px;
1907 + width: 100%;
1908 +}
1909 +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1910 + opacity: 0;
1911 +}
1912 +
1913 +.block-editor-global-styles__text-shadow-dropdown {
1914 + display: block;
1915 + padding: 0;
1916 + position: relative;
1917 + border: 1px solid #ddd;
1918 + border-radius: 2px;
1919 +}
1920 +
1921 +.block-editor-global-styles__text-shadow-dropdown-toggle {
1922 + width: 100%;
1923 + padding: 8px;
1924 +}
1925 +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1926 + background-color: #f0f0f0;
1927 +}
1928 +
1929 +.block-editor-global-styles__text-shadow-remove-button {
1930 + position: absolute;
1931 + left: 8px;
1932 + top: 8px;
1933 + opacity: 0;
1934 +}
1935 +@media not (prefers-reduced-motion) {
1936 + .block-editor-global-styles__text-shadow-remove-button {
1937 + transition: opacity 0.1s ease-in-out;
1938 + }
1939 +}
1940 +.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 {
1941 + opacity: 1;
1942 +}
1943 +@media (hover: none) {
1944 + .block-editor-global-styles__text-shadow-remove-button {
1945 + opacity: 1;
1946 + }
1947 +}
1948 +
1870 1949 .is-inherited-from-global-styles .components-base-control__label,
1871 1950 .is-inherited-from-global-styles .components-input-control__label {
1872 1951 text-decoration-line: underline;
1873 1952 text-decoration-style: dotted;
@@ -2087,16 +2166,8 @@
2087 2166 animation: components-button__appear-animation 0.1s ease;
2088 2167 animation-fill-mode: forwards;
2089 2168 }
2090 2169 }
2091 -.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 {
2092 - box-shadow: none;
2093 - outline: none;
2094 -}
2095 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
2096 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2097 - outline: 2px solid transparent;
2098 -}
2099 2170
2100 2171 .block-editor-grid-item-mover__move-vertical-button-container {
2101 2172 display: flex;
2102 2173 position: relative;
@@ -2260,9 +2331,10 @@
2260 2331 align-items: stretch;
2261 2332 justify-content: center;
2262 2333 cursor: var(--wpds-cursor-control, pointer);
2263 2334 background: transparent;
2264 - word-break: break-word;
2335 + word-break: normal;
2336 + overflow-wrap: break-word;
2265 2337 }
2266 2338 @media not (prefers-reduced-motion) {
2267 2339 .components-button.block-editor-block-types-list__item {
2268 2340 transition: all 0.05s ease-in-out;
@@ -2533,9 +2605,9 @@
2533 2605 color: inherit;
2534 2606 background-color: transparent;
2535 2607 }
2536 2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2537 - font-weight: normal;
2609 + font-weight: 400;
2538 2610 }
2539 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2540 2612 position: absolute;
2541 2613 width: 1px;
@@ -2542,9 +2614,9 @@
2542 2614 height: 1px;
2543 2615 padding: 0;
2544 2616 margin: -1px;
2545 2617 overflow: hidden;
2546 - clip: rect(0, 0, 0, 0);
2618 + clip-path: inset(50%);
2547 2619 border: 0;
2548 2620 }
2549 2621
2550 2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2698,10 +2770,9 @@
2698 2770
2699 2771 .link-preview-button__image {
2700 2772 width: 100%;
2701 2773 height: 100%;
2702 - -o-object-fit: cover;
2703 - object-fit: cover;
2774 + object-fit: cover;
2704 2775 border-radius: 2px;
2705 2776 }
2706 2777
2707 2778 .link-preview-button__content {
@@ -2763,8 +2834,11 @@
2763 2834 .block-editor-list-view-leaf {
2764 2835 position: relative;
2765 2836 transform: translateY(0);
2766 2837 }
2838 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 + z-index: 1;
2840 +}
2767 2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2768 2842 cursor: grab;
2769 2843 }
2770 2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2775,13 +2849,8 @@
2775 2849 }
2776 2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2777 2851 fill: currentColor;
2778 2852 }
2779 -@media (forced-colors: active) {
2780 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2781 - fill: CanvasText;
2782 - }
2783 -}
2784 2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2785 2854 color: inherit;
2786 2855 }
2787 2856 .block-editor-list-view-leaf.is-selected td {
@@ -2793,23 +2862,45 @@
2793 2862 .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,
2794 2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2795 2864 color: var(--wp-block-synced-color);
2796 2865 }
2797 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2798 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2866 +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2867 + --focus-color: var(--wp-block-synced-color);
2799 2868 }
2869 +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2870 + --focus-color: var(--wp-block-synced-color);
2871 + 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)));
2872 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2873 +}
2800 2874 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2801 2875 color: #fff;
2802 2876 }
2803 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2804 - 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));
2877 +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2878 + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2879 + 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)));
2880 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2881 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2805 2882 }
2806 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2807 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2883 +@media (forced-colors: active) {
2884 + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2885 + background: SelectedItem;
2886 + }
2887 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2888 + color: SelectedItemText;
2889 + }
2890 + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2891 + fill: SelectedItemText;
2892 + }
2893 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2894 + forced-color-adjust: none;
2895 + }
2896 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2897 + --focus-color: CanvasText;
2898 + }
2899 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2900 + --focus-color: SelectedItemText;
2901 + }
2808 2902 }
2809 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2810 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2811 -}
2812 2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2813 2904 border-top-right-radius: 2px;
2814 2905 }
2815 2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2931,8 +3022,9 @@
2931 3022 }
2932 3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2933 3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2934 3025 box-shadow: none;
3026 + outline: none;
2935 3027 }
2936 3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2937 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2938 3030 content: "";
@@ -2937,13 +3029,16 @@
2937 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2938 3030 content: "";
2939 3031 position: absolute;
2940 3032 top: 0;
2941 - left: -29px;
3033 + left: -28px;
2942 3034 bottom: 0;
2943 3035 right: 0;
2944 3036 border-radius: inherit;
2945 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3037 + 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)));
3038 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3039 + outline-offset: 1px;
3040 + 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);
2946 3041 z-index: 2;
2947 3042 pointer-events: none;
2948 3043 }
2949 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2948,12 +3043,8 @@
2948 3043 }
2949 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2950 3045 left: 0;
2951 3046 }
2952 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu {
2953 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2954 - z-index: 1;
2955 -}
2956 3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2957 3048 opacity: 1;
2958 3049 }
2959 3050 @keyframes __wp-base-styles-fade-in {
@@ -3023,14 +3114,8 @@
3023 3114 }
3024 3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
3025 3116 top: -4px;
3026 3117 }
3027 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
3028 - height: 16px;
3029 - min-width: 100%;
3030 - right: 0;
3031 - left: 0;
3032 -}
3033 3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
3034 3119 background: #1e1e1e;
3035 3120 color: #fff;
3036 3121 height: 24px;
@@ -3335,8 +3420,13 @@
3335 3420 width: 36px;
3336 3421 height: 24px;
3337 3422 }
3338 3423
3424 +.block-editor-plain-text {
3425 + width: 100%;
3426 + field-sizing: content;
3427 +}
3428 +
3339 3429 .block-editor-responsive-block-control {
3340 3430 margin-bottom: 28px;
3341 3431 border-bottom: 1px solid #ccc;
3342 3432 padding-bottom: 14px;
@@ -3374,9 +3464,9 @@
3374 3464 overflow: hidden;
3375 3465 padding: 0;
3376 3466 position: absolute;
3377 3467 width: 1px;
3378 - word-wrap: normal !important;
3468 + overflow-wrap: normal !important;
3379 3469 word-break: normal !important;
3380 3470 }
3381 3471
3382 3472 .preset-input-control__wrapper > * {
@@ -3680,172 +3770,8 @@
3680 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3681 3771 row-gap: 0;
3682 3772 }
3683 3773
3684 -.block-editor-content-only-controls__link {
3685 - width: 100%;
3686 - border-color: #ccc;
3687 -}
3688 -
3689 -.block-editor-content-only-controls__link-row {
3690 - align-items: center;
3691 -}
3692 -
3693 -.block-editor-content-only-controls__link-title {
3694 - width: 100%;
3695 - white-space: nowrap;
3696 - text-overflow: ellipsis;
3697 - overflow: hidden;
3698 -}
3699 -
3700 -.block-editor-content-only-controls__media {
3701 - width: 100%;
3702 - border-color: #ccc;
3703 - padding-left: 32px;
3704 -}
3705 -
3706 -.block-editor-content-only-controls__media-replace-flow {
3707 - display: block;
3708 -}
3709 -
3710 -.block-editor-content-only-controls__media-row {
3711 - align-items: center;
3712 -}
3713 -
3714 -.block-editor-content-only-controls__media-placeholder {
3715 - width: 24px;
3716 - height: 24px;
3717 - border-radius: 2px;
3718 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3719 - display: inline-block;
3720 - padding: 0;
3721 - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3722 -}
3723 -
3724 -.block-editor-content-only-controls__media-title {
3725 - width: 100%;
3726 - white-space: nowrap;
3727 - text-overflow: ellipsis;
3728 - overflow: hidden;
3729 -}
3730 -
3731 -.block-editor-content-only-controls__media-thumbnail {
3732 - width: 20px;
3733 - height: 20px;
3734 - border-radius: 2px;
3735 - align-self: center;
3736 - overflow: hidden;
3737 -}
3738 -.block-editor-content-only-controls__media-thumbnail img {
3739 - width: 100% !important;
3740 - height: 100% !important;
3741 - -o-object-fit: cover;
3742 - object-fit: cover;
3743 -}
3744 -
3745 -.block-editor-content-only-controls {
3746 - position: relative;
3747 -}
3748 -
3749 -.block-editor-content-only-controls__media-reset {
3750 - position: absolute;
3751 - left: 0;
3752 - top: 8px;
3753 - margin: auto 8px auto;
3754 - opacity: 0;
3755 - border-radius: 2px;
3756 -}
3757 -@media not (prefers-reduced-motion) {
3758 - .block-editor-content-only-controls__media-reset {
3759 - transition: opacity 0.1s ease-in-out;
3760 - }
3761 -}
3762 -.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 {
3763 - opacity: 1;
3764 -}
3765 -@media (hover: none) {
3766 - .block-editor-content-only-controls__media-reset {
3767 - opacity: 1;
3768 - }
3769 -}
3770 -
3771 -.block-editor-content-only-controls__rich-text {
3772 - width: 100%;
3773 - margin: 0;
3774 - background: #fff;
3775 - color: #1e1e1e;
3776 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3777 - padding: 6px 8px;
3778 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3779 - font-size: 16px;
3780 - /* Override core line-height. To be reviewed. */
3781 - line-height: normal;
3782 - border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3783 - border-radius: var(--wpds-border-radius-sm, 2px);
3784 -}
3785 -@media (min-width: 600px) {
3786 - .block-editor-content-only-controls__rich-text {
3787 - font-size: 13px;
3788 - /* Override core line-height. To be reviewed. */
3789 - line-height: normal;
3790 - }
3791 -}
3792 -.block-editor-content-only-controls__rich-text:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
3793 - border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3794 -}
3795 -.block-editor-content-only-controls__rich-text:focus {
3796 - 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)));
3797 - outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3798 - border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3799 - box-shadow: none;
3800 -}
3801 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3802 - color: rgba(30, 30, 30, 0.62);
3803 -}
3804 -.block-editor-content-only-controls__rich-text::placeholder {
3805 - color: rgba(30, 30, 30, 0.62);
3806 -}
3807 -.block-editor-content-only-controls__rich-text {
3808 - border-color: #949494;
3809 -}
3810 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3811 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3812 -}
3813 -.block-editor-content-only-controls__rich-text::placeholder {
3814 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3815 -}
3816 -.block-editor-content-only-controls__rich-text {
3817 - min-height: 40px;
3818 - padding: 12px;
3819 -}
3820 -
3821 -.block-editor-block-fields__container {
3822 - padding: 0 16px 16px;
3823 -}
3824 -.block-editor-block-fields__container:first-of-type {
3825 - padding-block-start: 8px;
3826 - /*
3827 - * Add border for the entire content controls and remove the similar border
3828 - * for tools panel.
3829 - */
3830 - border-block-start: 1px solid #e0e0e0;
3831 -}
3832 -
3833 -.block-editor-block-fields__header {
3834 - padding: 8px 0;
3835 - margin-bottom: 4px;
3836 -}
3837 -
3838 -.block-editor-block-fields__header-icon {
3839 - flex: 0 0 24px;
3840 -}
3841 -
3842 -.block-editor-block-fields__header-title {
3843 - flex: 1;
3844 - /* Override the default margin on a h2 element. */
3845 - margin: 0 !important;
3846 -}
3847 -
3848 3774 .block-editor-hooks__block-hooks {
3849 3775 /**
3850 3776 * Un-reverse the flex direction for the toggle's label.
3851 3777 */
@@ -3858,21 +3784,8 @@
3858 3784 font-size: 12px;
3859 3785 margin-bottom: 16px;
3860 3786 }
3861 3787
3862 -.block-editor-hooks__position-control-item {
3863 - /**
3864 - * Try to make items match the width of the anchor, subtract any margin on
3865 - * items to calculate the correct inner width.
3866 - */
3867 - max-inline-size: max(var(--anchor-width) - 2 * var(--wp-ui-popup-padding), 223px);
3868 -}
3869 -
3870 -.block-editor-hooks__position-control-item-hint {
3871 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3872 - margin-block-start: 4px;
3873 -}
3874 -
3875 3788 div.block-editor-bindings__panel {
3876 3789 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3877 3790 }
3878 3791 div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
@@ -4192,9 +4105,9 @@
4192 4105 }
4193 4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
4194 4107 display: grid;
4195 4108 grid-template-columns: 1fr 1fr;
4196 - grid-gap: 12px;
4109 + gap: 12px;
4197 4110 }
4198 4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4199 4112 margin-bottom: 0;
4200 4113 }
@@ -4380,12 +4293,8 @@
4380 4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4381 4294 margin-left: 8px;
4382 4295 }
4383 4296
4384 -.block-editor-inserter__preview-container__popover {
4385 - top: 16px !important;
4386 -}
4387 -
4388 4297 .block-editor-inserter__preview-container {
4389 4298 display: none;
4390 4299 width: 280px;
4391 4300 padding: 16px;
@@ -4526,9 +4435,9 @@
4526 4435
4527 4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4528 4437 display: grid;
4529 4438 grid-template-columns: 1fr 1fr;
4530 - grid-gap: 8px;
4439 + gap: 8px;
4531 4440 }
4532 4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4533 4442 margin-bottom: 0;
4534 4443 }
@@ -4588,9 +4497,9 @@
4588 4497 }
4589 4498
4590 4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4591 4500 display: grid;
4592 - grid-gap: 32px;
4501 + gap: 32px;
4593 4502 grid-template-columns: repeat(1, 1fr);
4594 4503 margin-bottom: 16px;
4595 4504 }
4596 4505 @media (min-width: 1080px) {
@@ -4920,9 +4829,9 @@
4920 4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4921 4830 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4922 4831 }
4923 4832 .block-editor-block-visibility-modal__options-icon--checked {
4924 - fill: #ddd;
4833 + color: #ddd;
4925 4834 }
4926 4835 .block-editor-block-visibility-modal__sub-options {
4927 4836 width: 100%;
4928 4837 padding-inline-start: 12px;
@@ -4932,11 +4841,52 @@
4932 4841 color: #757575;
4933 4842 }
4934 4843
4935 4844 .block-editor-block-visibility-info {
4936 - padding-top: 4px;
4937 - padding-bottom: 4px;
4938 4845 margin: 0 16px 16px;
4939 - display: flex;
4940 - align-items: center;
4941 - justify-content: start;
4846 +}
4847 +
4848 +/* The stop element is invisible, so its focus indication is drawn around the
4849 + canvas it stands for. For the iframed canvas it is an overlay instead of
4850 + an outline, because Safari paints an outline on an iframe element
4851 + underneath the iframe's content. */
4852 +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4853 + content: "";
4854 + position: absolute;
4855 + inset: 0;
4856 + z-index: 1;
4857 + pointer-events: none;
4858 + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4859 +}
4860 +
4861 +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4862 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 + outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4864 +}
4865 +
4866 +/* Looks like a tooltip. Shown at the top of the canvas while the stop is
4867 + focused. Sticky, because on the widgets screen the stop spans scrolling
4868 + content and the hint must stay in view; anywhere else there is nothing
4869 + to scroll and it stays at the top of the canvas. */
4870 +.block-editor-writing-flow__canvas-stop-hint {
4871 + display: none;
4872 + position: sticky;
4873 + top: 16px;
4874 + margin-inline: auto;
4875 + width: fit-content;
4876 + z-index: 2;
4877 + background: #000;
4878 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4879 + border-radius: 4px;
4880 + color: #f0f0f0;
4881 + text-align: center;
4882 + line-height: 1.4;
4883 + font-size: 12px;
4884 + padding: 4px 8px;
4885 + 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);
4886 + white-space: nowrap;
4887 + pointer-events: none;
4888 +}
4889 +
4890 +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4891 + display: block;
4942 4892 }