diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-includes/css/dist/block-library/editor-rtl.css --- a/wp/wp-includes/css/dist/block-library/editor-rtl.css Tue Oct 22 16:11:46 2019 +0200 +++ b/wp/wp-includes/css/dist/block-library/editor-rtl.css Tue Dec 15 13:49:49 2020 +0100 @@ -2,10 +2,40 @@ * Colors */ /** + * Deprecated colors. + * Please avoid using these. + */ +/** * Breakpoints & Media Queries */ /** - * Often re-used variables + * Colors + */ +/** + * Deprecated colors. + * Please avoid using these. + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block UI. + */ +/** + * Border radii. */ /** * Breakpoint mixins @@ -17,258 +47,178 @@ * than the space allows. */ /** - * Button states and focus styles + * Focus styles. */ /** * Applies editor left position to the selector passed as argument */ /** - * Applies editor right position to the selector passed as argument - */ -/** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +:root { + --wp-admin-theme-color: #007cba; + --wp-admin-theme-color-darker-10: #006ba1; + --wp-admin-theme-color-darker-20: #005a87; } + +#start-resizable-editor-section { + display: none; } + .block-editor ul.wp-block-archives { padding-right: 2.5em; } .wp-block-audio { - margin: 0; } + margin-right: 0; + margin-left: 0; } + +.edit-post-visual-editor .block-library-block__reusable-block-container .block-editor-writing-flow__click-redirect { + min-height: auto; } + +.edit-post-visual-editor .block-library-block__reusable-block-container .is-root-container { + padding-right: 0; + padding-left: 0; } -.block-editor-block-list__block[data-type="core/button"][data-align="center"] { - text-align: center; } +.edit-post-visual-editor .block-library-block__reusable-block-container .block-editor-writing-flow { + display: block; } + +.edit-post-visual-editor .block-library-block__reusable-block-container .components-disabled .block-list-appender { + display: none; } -.block-editor-block-list__block[data-type="core/button"][data-align="right"] { +.wp-block[data-align="center"] > .wp-block-button { + text-align: center; + margin-right: auto; + margin-left: auto; } + +.wp-block[data-align="right"] > .wp-block-button { text-align: right; } .wp-block-button { - display: inline-block; - margin-bottom: 0; - position: relative; } - .wp-block-button [contenteditable] { - cursor: text; } - .wp-block-button:not(.has-text-color):not(.is-style-outline) .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable { + position: relative; + cursor: text; } + .wp-block-button:not(.has-text-color):not(.is-style-outline) [data-rich-text-placeholder]::after { color: #fff; } - .wp-block-button .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable { + .wp-block-button:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); + outline: 2px solid transparent; + outline-offset: -2px; } + .wp-block-button[data-rich-text-placeholder]::after { opacity: 0.8; } - .block-editor-block-preview__content .wp-block-button { - max-width: 100%; } - .block-editor-block-preview__content .wp-block-button .block-editor-rich-text__editable[data-is-placeholder-visible="true"] { - height: auto; } - .block-editor-block-preview__content .wp-block-button .wp-block-button__link { - max-width: 100%; - overflow: hidden; - white-space: nowrap !important; - text-overflow: ellipsis; } -.block-library-button__inline-link { - background: #fff; +.wp-block-button__inline-link { + color: #555d66; + height: 0; + overflow: hidden; + max-width: 290px; } + .wp-block-button__inline-link-input__suggestions { + max-width: 290px; } + @media (min-width: 782px) { + .wp-block-button__inline-link { + max-width: 260px; } + .wp-block-button__inline-link-input__suggestions { + max-width: 260px; } } + @media (min-width: 960px) { + .wp-block-button__inline-link { + max-width: 290px; } + .wp-block-button__inline-link-input__suggestions { + max-width: 290px; } } + .is-selected .wp-block-button__inline-link { + height: auto; + overflow: visible; + margin-top: 16px; } + +div[data-type="core/button"] { + display: table; } + +.wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] { + display: inline-block; + width: auto; } + +.wp-block[data-align="center"] > .wp-block-buttons { display: flex; - flex-wrap: wrap; align-items: center; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - line-height: 1.4; - width: 374px; } - .block-library-button__inline-link .block-editor-url-input { - width: auto; } - .block-library-button__inline-link .block-editor-url-input__suggestions { - width: 302px; - z-index: 6; } - .block-library-button__inline-link > .dashicon { - width: 36px; } - .block-library-button__inline-link .dashicon { - color: #8f98a1; } - .block-library-button__inline-link .block-editor-url-input input[type="text"]:-ms-input-placeholder { - color: #8f98a1; } - .block-library-button__inline-link .block-editor-url-input input[type="text"]::-ms-input-placeholder { - color: #8f98a1; } - .block-library-button__inline-link .block-editor-url-input input[type="text"]::placeholder { - color: #8f98a1; } - [data-align="center"] .block-library-button__inline-link { - margin-right: auto; - margin-left: auto; } - [data-align="right"] .block-library-button__inline-link { - margin-right: auto; - margin-left: 0; } + flex-wrap: wrap; + justify-content: center; } + +.wp-block[data-align="right"] > .wp-block-buttons { + display: flex; + justify-content: flex-end; } + +.wp-block-buttons .block-list-appender { + display: inline-block; } .block-editor .wp-block-categories ul { padding-right: 2.5em; } .block-editor .wp-block-categories ul ul { margin-top: 6px; } -.wp-block-code .block-editor-plain-text { - font-family: Menlo, Consolas, monaco, monospace; - color: #23282d; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; } - @media (min-width: 600px) { - .wp-block-code .block-editor-plain-text { - font-size: 13px; } } - .wp-block-code .block-editor-plain-text:focus { - box-shadow: none; } - -.components-tab-button { - display: inline-flex; - align-items: flex-end; - margin: 0; - padding: 3px; - background: none; - outline: none; - color: #555d66; - cursor: pointer; - position: relative; - height: 36px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - font-weight: 500; - border: 0; } - .components-tab-button.is-active, .components-tab-button.is-active:hover { - color: #fff; } - .components-tab-button:disabled { - cursor: default; } - .components-tab-button > span { - border: 1px solid transparent; - padding: 0 6px; - box-sizing: content-box; - height: 28px; - line-height: 28px; } - .components-tab-button:hover > span, - .components-tab-button:focus > span { - color: #555d66; } - .components-tab-button:not(:disabled).is-active > span, - .components-tab-button:not(:disabled):hover > span, - .components-tab-button:not(:disabled):focus > span { - border: 1px solid #555d66; } - .components-tab-button.is-active > span, - .components-tab-button.is-active:hover > span { - background-color: #555d66; - color: #fff; } - -.wp-block-columns .block-editor-block-list__layout { - margin-right: 0; - margin-left: 0; } - .wp-block-columns .block-editor-block-list__layout .block-editor-block-list__block { - max-width: none; } - -.block-editor-block-list__block[data-align="full"] .wp-block-columns > .block-editor-inner-blocks { - padding-right: 14px; - padding-left: 14px; } - @media (min-width: 600px) { - .block-editor-block-list__block[data-align="full"] .wp-block-columns > .block-editor-inner-blocks { - padding-right: 60px; - padding-left: 60px; } } - -.wp-block-columns { +.wp-block-code > code { display: block; } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout { - display: flex; - flex-wrap: wrap; } - @media (min-width: 782px) { - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout { - flex-wrap: nowrap; } } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] { - display: flex; - flex-direction: column; - flex: 1; - padding-right: 0; - padding-left: 0; - margin-right: -14px; - margin-left: -14px; - min-width: 0; - word-break: break-word; - overflow-wrap: break-word; - flex-basis: 100%; } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] > .block-editor-block-list__block-edit > div > .block-editor-inner-blocks { - margin-top: -28px; - margin-bottom: -28px; } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] > .block-editor-block-list__block-edit { - margin-top: 0; - margin-bottom: 0; } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] > .block-editor-block-list__block-edit::before { - right: 0; - left: 0; } - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar { - margin-right: -1px; } - @media (min-width: 600px) { - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] { - margin-right: 14px; - margin-left: 14px; } } - @media (min-width: 600px) { - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] { - flex-basis: calc(50% - (16px + 28px)); - flex-grow: 0; } } - @media (min-width: 600px) { - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"]:nth-child(even) { - margin-right: calc(32px + 14px); } } - @media (min-width: 782px) { - .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"]:not(:first-child) { - margin-right: calc(32px + 14px); } } + +.wp-block-columns .wp-block { + max-width: none; } + +@media (min-width: 600px) { + .editor-styles-wrapper +.block-editor-block-list__block.wp-block-column:nth-child(even) { + margin-right: 32px; } } + +@media (min-width: 782px) { + .editor-styles-wrapper +.block-editor-block-list__block.wp-block-column:not(:first-child) { + margin-right: 32px; } } + +.block-editor-block-list__block.wp-block-column.wp-block-column { + margin-top: 0; + margin-bottom: 0; } -.wp-block-columns [data-type="core/column"].is-hovered > .block-editor-block-list__block-edit::before { - content: none; } - -.wp-block-columns [data-type="core/column"].is-hovered .block-editor-block-list__breadcrumb { - display: none; } - -.wp-block-columns [data-type="core/column"] { - pointer-events: none; } - .wp-block-columns [data-type="core/column"] .block-editor-block-list__layout { - pointer-events: all; } +.wp-block-cover { + position: relative; } + .wp-block-cover.is-placeholder { + min-height: auto !important; + padding: 0 !important; } + .wp-block-cover.components-placeholder h2 { + color: inherit; } + .wp-block-cover .block-editor-block-list__layout { + width: 100%; } + .wp-block-cover .wp-block-cover__inner-container { + text-align: right; + margin-right: 0; + margin-left: 0; } + .wp-block-cover .wp-block-cover__placeholder-background-options { + width: 100%; } -.wp-block-cover-image.components-placeholder h2, -.wp-block-cover.components-placeholder h2 { - color: inherit; } - -.wp-block-cover-image.has-right-content .block-editor-rich-text__inline-toolbar, -.wp-block-cover-image.has-left-content .block-editor-rich-text__inline-toolbar, -.wp-block-cover.has-right-content .block-editor-rich-text__inline-toolbar, -.wp-block-cover.has-left-content .block-editor-rich-text__inline-toolbar { - display: inline-block; } - -.wp-block-cover-image .block-editor-block-list__layout, -.wp-block-cover .block-editor-block-list__layout { +[data-align="left"] > .wp-block-cover, +[data-align="right"] > .wp-block-cover { + max-width: 290px; width: 100%; } -.wp-block-cover-image .block-editor-block-list__block, -.wp-block-cover .block-editor-block-list__block { - color: #f8f9f9; } - -.wp-block-cover-image .wp-block-cover__inner-container, -.wp-block-cover .wp-block-cover__inner-container { - text-align: right; } - -.wp-block-cover-image .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout, -.wp-block-cover .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { - margin-right: 0; - margin-left: 0; } +.block-library-cover__reset-button { + margin-right: auto; } -.wp-block-cover-image.components-placeholder, -.wp-block-cover.components-placeholder { - background: rgba(139, 139, 150, 0.1); - min-height: 200px; } - .is-dark-theme .wp-block-cover-image.components-placeholder, .is-dark-theme - .wp-block-cover.components-placeholder { - background: rgba(255, 255, 255, 0.15); } +.block-library-cover__resize-container { + position: absolute !important; + top: 0; + right: 0; + left: 0; + bottom: 0; } -[data-align="left"] .wp-block-cover-image, -[data-align="right"] .wp-block-cover-image, [data-align="left"] -.wp-block-cover, -[data-align="right"] -.wp-block-cover { - max-width: 305px; - width: 100%; } +.block-library-cover__resize-container:not(.is-resizing) { + height: auto !important; } .wp-block-embed { - margin: 0; + margin-right: 0; + margin-left: 0; clear: both; } - @media (min-width: 600px) { - .wp-block-embed { - min-width: 360px; } - .wp-block-embed.components-placeholder { - min-width: 0; } } .wp-block-embed.is-loading { display: flex; flex-direction: column; @@ -277,12 +227,16 @@ padding: 1em; min-height: 200px; text-align: center; - background: #f8f9f9; } + border-radius: 2px; + background-color: #fff; + box-shadow: inset 0 0 0 1px #1e1e1e; } .wp-block-embed.is-loading p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } .wp-block-embed .components-placeholder__error { word-break: break-word; } + .wp-block-embed .components-placeholder__learn-more { + margin-top: 1em; } .block-library-embed__interactive-overlay { position: absolute; @@ -297,8 +251,6 @@ justify-content: space-between; align-items: center; margin-bottom: 0; } - .wp-block-file.is-transient { - animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite; } .wp-block-file .wp-block-file__content-wrapper { flex-grow: 1; } .wp-block-file .wp-block-file__textlink { @@ -313,6 +265,8 @@ margin-right: 1em; } .wp-block-freeform.block-library-rich-text__tinymce { + height: auto; + /* Allow height of embed iframes to be calculated properly */ /* Remove blue highlighting of selected images in WebKit */ /* Image captions */ /* WP Views */ } @@ -325,26 +279,14 @@ margin-right: 0; } .wp-block-freeform.block-library-rich-text__tinymce blockquote { margin: 0; - box-shadow: inset 0 0 0 0 #e2e4e7; + box-shadow: inset 0 0 0 0 #ddd; border-right: 4px solid #000; padding-right: 1em; } .wp-block-freeform.block-library-rich-text__tinymce pre { white-space: pre-wrap; font-family: Menlo, Consolas, monaco, monospace; - font-size: 14px; - color: #23282d; } - .wp-block-freeform.block-library-rich-text__tinymce h1 { - font-size: 2em; } - .wp-block-freeform.block-library-rich-text__tinymce h2 { - font-size: 1.6em; } - .wp-block-freeform.block-library-rich-text__tinymce h3 { - font-size: 1.4em; } - .wp-block-freeform.block-library-rich-text__tinymce h4 { - font-size: 1.2em; } - .wp-block-freeform.block-library-rich-text__tinymce h5 { - font-size: 1.1em; } - .wp-block-freeform.block-library-rich-text__tinymce h6 { - font-size: 1em; } + font-size: 15px; + color: #1e1e1e; } .wp-block-freeform.block-library-rich-text__tinymce > *:first-child { margin-top: 0; } .wp-block-freeform.block-library-rich-text__tinymce > *:last-child { @@ -352,7 +294,8 @@ .wp-block-freeform.block-library-rich-text__tinymce.mce-edit-focus { outline: none; } .wp-block-freeform.block-library-rich-text__tinymce a { - color: #007fac; } + color: #007cba; + color: var(--wp-admin-theme-color); } .wp-block-freeform.block-library-rich-text__tinymce:focus a[data-mce-selected] { padding: 0 2px; margin: 0 -2px; @@ -362,12 +305,12 @@ .wp-block-freeform.block-library-rich-text__tinymce code { padding: 2px; border-radius: 2px; - color: #23282d; - background: #f3f4f5; + color: #1e1e1e; + background: #f0f0f0; font-family: Menlo, Consolas, monaco, monospace; font-size: 14px; } .wp-block-freeform.block-library-rich-text__tinymce:focus code[data-mce-selected] { - background: #e8eaeb; } + background: #ddd; } .wp-block-freeform.block-library-rich-text__tinymce .alignright { float: right; margin: 0.5em 0 0.5em 1em; } @@ -385,7 +328,7 @@ margin: 15px auto; outline: 0; cursor: default; - background-image: url(/wp-includes/js/tinymce/skins/wordpress/images/more-2x.png); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAADtgAAAAoBAMAAAA86gLBAAAAJFBMVEVMaXG7u7vBwcHDw8POzs68vLzGxsbMzMy+vr7AwMDQ0NDGxsYKLGzpAAAADHRSTlMA///zWf+/f///TMxNVGuqAAABwklEQVR4Ae3dMXLaQBTH4bfj8UCpx8hq0vgKvgFNemhT6Qo6gg6R+0ZahM2QLmyBJ99XWP9V5+o3jIUcLQEAAAAAAAAAAAAAAAAAAAAAAABQ8j0WL9lfTtlt18uNXAUA8O/KVtfa1tdcrOdSh9gCQAMlh1hMNbZZ1bsrsQWABsrhLRbz7z5in/32UbfUMUbkMQCAh5RfGYv82UdMdZ6HS2wjT2ILAI8r3XmM2B3WvM59vfO2xXYW2yYAENuPU8S+X/N67mKxzy225yaxBQCxLV392UdcvwV0jPVUj98ntkBWT7C7+9u2/V/vGtvXIWJ6/4rtbottWa6Ri0NUT/u72LYttrb97LHdvUXMxxrb8TO2W2TF1rYbbLG1bbGNjMi4+2Sbi1FsbbvNFlvbFtt5fDnE3d9sP1/XeIyV2Nr2U2/guZUuptNrH/dPI9eLB6SaAEBs6wPJf3/PNk9tYgsAYrv/8TFuzx/fvkFqGtrEFgDEdpcZUb7ejXy6ntrEFgDENvL6gsas4vbdyKt4DACI7TxElJv/Z7udpqFNbAFAbKduy2uU2trttM/x28UWAAAAAAAAAAAAAAAAAAAAAAAAAADgDyPwGmGTCZp7AAAAAElFTkSuQmCC); background-size: 1900px 20px; background-repeat: no-repeat; background-position: center; } @@ -427,10 +370,10 @@ .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected="2"] .mce-shim { display: none; } .wp-block-freeform.block-library-rich-text__tinymce .wpview .loading-placeholder { - border: 1px dashed #e8eaeb; + border: 1px dashed #ddd; padding: 10px; } .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error { - border: 1px solid #e8eaeb; + border: 1px solid #ddd; padding: 1em 0; margin: 0; word-wrap: break-word; } @@ -495,19 +438,18 @@ border: none; padding: 0; } -div[data-type="core/freeform"] .block-editor-block-list__block-edit::before { +div[data-type="core/freeform"]::before { transition: border-color 0.1s linear, box-shadow 0.1s linear; - border: 1px solid #e2e4e7; + border: 1px solid #ddd; outline: 1px solid transparent; } + @media (prefers-reduced-motion: reduce) { + div[data-type="core/freeform"]::before { + transition-duration: 0s; } } -div[data-type="core/freeform"].is-selected .block-editor-block-list__block-edit::before { - border-color: #b5bcc2; - border-right-color: transparent; } +div[data-type="core/freeform"].is-selected::before { + border-color: #1e1e1e; } -div[data-type="core/freeform"].is-hovered .block-editor-block-list__breadcrumb { - display: none; } - -div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { +div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { margin-top: 0; padding-top: 0; } @@ -520,7 +462,7 @@ .mce-toolbar-grp .mce-btn.mce-active:hover button, .mce-toolbar-grp .mce-btn.mce-active i, .mce-toolbar-grp .mce-btn.mce-active:hover i { - color: #23282d; } + color: #1e1e1e; } .mce-toolbar-grp .mce-rtl .mce-flow-layout-item.mce-last { margin-left: 0; @@ -530,24 +472,29 @@ font-style: normal; } .block-library-classic__toolbar { + display: none; width: auto; - margin: 0 -14px; + margin: 0; position: -webkit-sticky; position: sticky; - z-index: 10; - top: 14px; - transform: translateY(-14px); - border: 1px solid #e2e4e7; + z-index: 31; + top: 0; + border: 1px solid #ddd; border-bottom: none; - padding: 0 14px; } - .is-selected .block-library-classic__toolbar { - border-color: #b5bcc2; - border-right-color: transparent; } + border-radius: 2px; + margin-bottom: 8px; + padding: 0; } + div[data-type="core/freeform"].is-selected .block-library-classic__toolbar, + div[data-type="core/freeform"].is-typing .block-library-classic__toolbar { + display: block; + border-color: #1e1e1e; } + .block-library-classic__toolbar .mce-tinymce { + box-shadow: none; } @media (min-width: 600px) { .block-library-classic__toolbar { padding: 0; } } .block-library-classic__toolbar:empty { - height: 37px; + display: block; background: #f5f5f5; border-bottom: 1px solid #e2e4e7; } .block-library-classic__toolbar:empty::before { @@ -557,6 +504,8 @@ color: #555d66; line-height: 37px; padding: 14px; } + .block-library-classic__toolbar div.mce-toolbar-grp { + border-bottom: 1px solid #1e1e1e; } .block-library-classic__toolbar .mce-tinymce-inline, .block-library-classic__toolbar .mce-tinymce-inline > div, .block-library-classic__toolbar div.mce-toolbar-grp, @@ -577,152 +526,82 @@ .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { display: block; } -@media (min-width: 600px) { - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-switcher__no-switcher-icon { - display: none; } - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar { - float: left; - margin-left: 25px; - transform: translateY(-13px); - top: 14px; } - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar .block-editor-block-toolbar { - border: none; - box-shadow: none; - margin-top: 3px; } } - @media (min-width: 600px) and (min-width: 782px) { - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar .block-editor-block-toolbar { - margin-top: 0; } } - -@media (min-width: 600px) { - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar .block-editor-block-toolbar::before { - content: ""; - display: block; - border-right: 1px solid #e2e4e7; - margin-top: 4px; - margin-bottom: 4px; } - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar__control.components-button:hover { - background-color: transparent; } - .block-editor-block-list__block[data-type="core/freeform"] .block-editor-block-contextual-toolbar .components-toolbar { - background: transparent; - border: none; } - .block-editor-block-list__block[data-type="core/freeform"] .mce-container.mce-toolbar.mce-stack-layout-item { - padding-left: 36px; } } - -ul.wp-block-gallery li { +.wp-block-gallery li { list-style-type: none; } -.blocks-gallery-item figure:not(.is-selected):focus { +.wp-block-gallery .block-editor-media-placeholder { + margin-bottom: 12px; + padding: 12px; } + .wp-block-gallery .block-editor-media-placeholder .components-placeholder__label { + display: none; } + .wp-block-gallery .block-editor-media-placeholder .components-button { + margin-bottom: 0; } + +figure.wp-block-gallery { + display: block; + margin: 0; } + +.blocks-gallery-grid.blocks-gallery-grid { + padding-right: 0; + margin-right: 0; + margin-bottom: 0; } + +.blocks-gallery-item figure:not(.is-selected):focus, +.blocks-gallery-item img:focus { outline: none; } -.blocks-gallery-item .is-selected { - outline: 4px solid #0085ba; } - -body.admin-color-sunrise .blocks-gallery-item .is-selected { - outline: 4px solid #d1864a; } - -body.admin-color-ocean .blocks-gallery-item .is-selected { - outline: 4px solid #a3b9a2; } - -body.admin-color-midnight .blocks-gallery-item .is-selected { - outline: 4px solid #e14d43; } +.blocks-gallery-item figure.is-selected { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); + border-radius: 2px; + outline: 2px solid transparent; } + .blocks-gallery-item figure.is-selected img { + border-radius: 2px; } -body.admin-color-ectoplasm .blocks-gallery-item .is-selected { - outline: 4px solid #a7b656; } - -body.admin-color-coffee .blocks-gallery-item .is-selected { - outline: 4px solid #c2a68c; } - -body.admin-color-blue .blocks-gallery-item .is-selected { - outline: 4px solid #82b4cb; } - -body.admin-color-light .blocks-gallery-item .is-selected { - outline: 4px solid #0085ba; } - -.blocks-gallery-item .is-transient img { +.blocks-gallery-item figure.is-transient img { opacity: 0.3; } -.blocks-gallery-item .block-editor-rich-text { - position: absolute; - bottom: 0; - width: 100%; - max-height: 100%; - overflow-y: auto; } - -.blocks-gallery-item .block-editor-rich-text figcaption:not([data-is-placeholder-visible="true"]) { - position: relative; - overflow: hidden; } - -@supports ((position: -webkit-sticky) or (position: sticky)) { - .blocks-gallery-item .is-selected .block-editor-rich-text { - left: 0; - right: 0; - margin-top: -4px; } } - -.blocks-gallery-item .is-selected .block-editor-rich-text .block-editor-rich-text__inline-toolbar { - top: 0; } +.blocks-gallery-item .is-selected .block-library-gallery-item__inline-menu { + display: inline-flex; } -.blocks-gallery-item .is-selected .block-editor-rich-text figcaption { - padding-top: 48px; } - -.blocks-gallery-item .components-form-file-upload, -.blocks-gallery-item .components-button.block-library-gallery-add-item-button { - width: 100%; +.blocks-gallery-item .block-editor-media-placeholder { + margin: 0; height: 100%; } - -.blocks-gallery-item .components-button.block-library-gallery-add-item-button { - display: flex; - flex-direction: column; - justify-content: center; - box-shadow: none; - border: none; - border-radius: 0; - min-height: 100px; } - .blocks-gallery-item .components-button.block-library-gallery-add-item-button .dashicon { - margin-top: 10px; } - .blocks-gallery-item .components-button.block-library-gallery-add-item-button:hover, .blocks-gallery-item .components-button.block-library-gallery-add-item-button:focus { - border: 1px solid #555d66; } - -.blocks-gallery-item .block-editor-rich-text figcaption a { - color: #fff; } + .blocks-gallery-item .block-editor-media-placeholder .components-placeholder__label { + display: flex; } .block-library-gallery-item__inline-menu { - padding: 2px; + display: none; position: absolute; top: -2px; - left: -2px; - background-color: #0085ba; - display: inline-flex; - z-index: 20; } - -body.admin-color-sunrise .block-library-gallery-item__inline-menu { - background-color: #d1864a; } - -body.admin-color-ocean .block-library-gallery-item__inline-menu { - background-color: #a3b9a2; } - -body.admin-color-midnight .block-library-gallery-item__inline-menu { - background-color: #e14d43; } - -body.admin-color-ectoplasm .block-library-gallery-item__inline-menu { - background-color: #a7b656; } - -body.admin-color-coffee .block-library-gallery-item__inline-menu { - background-color: #c2a68c; } - -body.admin-color-blue .block-library-gallery-item__inline-menu { - background-color: #82b4cb; } - -body.admin-color-light .block-library-gallery-item__inline-menu { - background-color: #0085ba; } - .block-library-gallery-item__inline-menu .components-button { - color: #fff; } - .block-library-gallery-item__inline-menu .components-button:hover, .block-library-gallery-item__inline-menu .components-button:focus { - color: #fff; } - -.blocks-gallery-item__remove { - padding: 0; } - .blocks-gallery-item__remove.components-button:focus { - color: inherit; } + margin: 8px; + z-index: 20; + transition: box-shadow 0.2s ease-out; + border-radius: 2px; + background: #fff; + border: 1px solid #1e1e1e; } + @media (prefers-reduced-motion: reduce) { + .block-library-gallery-item__inline-menu { + transition-duration: 0s; } } + .block-library-gallery-item__inline-menu:hover { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } + @media (min-width: 600px) { + .columns-7 .block-library-gallery-item__inline-menu, + .columns-8 .block-library-gallery-item__inline-menu { + padding: 2px; } } + .block-library-gallery-item__inline-menu .components-button.has-icon:not(:focus) { + border: none; + box-shadow: none; } + @media (min-width: 600px) { + .columns-7 .block-library-gallery-item__inline-menu .components-button.has-icon, + .columns-8 .block-library-gallery-item__inline-menu .components-button.has-icon { + padding: 0; + width: inherit; + height: inherit; } } + .block-library-gallery-item__inline-menu.is-left { + right: -2px; } + .block-library-gallery-item__inline-menu.is-right { + left: -2px; } .blocks-gallery-item .components-spinner { position: absolute; @@ -731,63 +610,88 @@ margin-top: -9px; margin-right: -9px; } -.is-selected .wp-block-gallery .blocks-gallery-image:nth-last-child(2), -.is-selected .wp-block-gallery .blocks-gallery-item:nth-last-child(2), -.is-typing .wp-block-gallery .blocks-gallery-image:nth-last-child(2), -.is-typing .wp-block-gallery .blocks-gallery-item:nth-last-child(2) { +/** + * Group: All Alignment Settings + */ +.wp-block-group { + margin-top: 0; + margin-bottom: 0; } + .wp-block-group .block-editor-block-list__insertion-point { + right: 0; + left: 0; } + .wp-block-group > .wp-block-group__inner-container > [data-align="full"] { + margin-right: auto; + margin-left: auto; } + .wp-block-group.has-background > .wp-block-group__inner-container > [data-align="full"] { + margin-right: -30px; + width: calc(100% + 60px); } + +/** + * Group: Full Width Alignment + */ +[data-align="full"] .wp-block-group > .wp-block-group__inner-container > .wp-block { + padding-right: 14px; + padding-left: 14px; } + @media (min-width: 600px) { + [data-align="full"] .wp-block-group > .wp-block-group__inner-container > .wp-block { + padding-right: 0; + padding-left: 0; } } + +[data-align="full"] .wp-block-group > .wp-block-group__inner-container > [data-align="full"] { + padding-left: 0; + padding-right: 0; + right: 0; + width: 100%; + max-width: none; } + +[data-align="full"] .wp-block-group.has-background > .wp-block-group__inner-container > [data-align="full"] { + width: calc(100% + 60px); } + +[data-type="core/group"].is-selected .block-list-appender { + margin-right: 0; margin-left: 0; } -.wp-block-heading h1, -.wp-block-heading h2, -.wp-block-heading h3, -.wp-block-heading h4, -.wp-block-heading h5, -.wp-block-heading h6 { - color: inherit; - margin: 0; } - -.wp-block-heading h1 { - font-size: 2.44em; } +[data-type="core/group"].is-selected .has-background .block-list-appender { + margin-top: 18px; + margin-bottom: 18px; } -.wp-block-heading h2 { - font-size: 1.95em; } - -.wp-block-heading h3 { - font-size: 1.56em; } +.block-library-heading-level-dropdown .components-popover__content { + min-width: 230px; } + .block-library-heading-level-dropdown .components-popover__content > div { + padding: 0; } -.wp-block-heading h4 { - font-size: 1.25em; } - -.wp-block-heading h5 { - font-size: 1em; } +.block-library-heading-level-toolbar { + border: none; } -.wp-block-heading h6 { - font-size: 0.8em; } - -.wp-block-heading h1, -.wp-block-heading h2, -.wp-block-heading h3 { - line-height: 1.4; } - -.wp-block-heading h4 { - line-height: 1.5; } +.wp-block-html { + margin-bottom: 28px; } + .wp-block-html .block-library-html__preview-overlay { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; } + .wp-block-html .block-editor-plain-text { + font-family: Menlo, Consolas, monaco, monospace; + color: #1e1e1e; + padding: 0.8em 1em; + border: 1px solid #ddd; + border-radius: 4px; + max-height: 250px; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; } + @media (min-width: 600px) { + .wp-block-html .block-editor-plain-text { + font-size: 13px; } } + .wp-block-html .block-editor-plain-text:focus { + box-shadow: none; } -.wp-block-html .block-editor-plain-text { - font-family: Menlo, Consolas, monaco, monospace; - color: #23282d; - padding: 0.8em 1em; - border: 1px solid #e2e4e7; - border-radius: 4px; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; } - @media (min-width: 600px) { - .wp-block-html .block-editor-plain-text { - font-size: 13px; } } - .wp-block-html .block-editor-plain-text:focus { - box-shadow: none; } +figure.wp-block-image:not(.wp-block) { + margin: 0; } .wp-block-image { position: relative; } + .wp-block-image .is-applying img, .wp-block-image.is-transient img { opacity: 0.3; } .wp-block-image figcaption img { @@ -803,35 +707,8 @@ display: inline-block; } .wp-block-image .components-resizable-box__container img { display: block; - width: 100%; } - -.wp-block-image.is-focused .components-resizable-box__handle { - display: block; - z-index: 1; } - -.block-editor-block-list__block[data-type="core/image"][data-align="center"] .wp-block-image { - margin-right: auto; - margin-left: auto; } - -.block-editor-block-list__block[data-type="core/image"][data-align="center"][data-resized="false"] .wp-block-image > div { - margin-right: auto; - margin-left: auto; } - -.edit-post-sidebar .block-library-image__dimensions { - margin-bottom: 1em; } - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row { - display: flex; - justify-content: space-between; } - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__width, - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__height { - margin-bottom: 0.5em; } - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__width input, - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__height input { - line-height: 1.25; } - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__width { - margin-left: 5px; } - .edit-post-sidebar .block-library-image__dimensions .block-library-image__dimensions__row .block-library-image__dimensions__height { - margin-right: 5px; } + width: inherit; + height: inherit; } .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal { position: absolute; @@ -842,28 +719,60 @@ .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal { margin: -1px; } } -[data-type="core/image"][data-align="center"] .block-editor-block-list__block-edit figure, -[data-type="core/image"][data-align="left"] .block-editor-block-list__block-edit figure, -[data-type="core/image"][data-align="right"] .block-editor-block-list__block-edit figure { - margin: 0; - display: table; } +[data-align="wide"] > .wp-block-image img, +[data-align="full"] > .wp-block-image img { + width: 100%; } + +.wp-block[data-align="left"] > .wp-block-image { + margin-left: 1em; + margin-right: 0; + margin-top: 0.5em; + margin-bottom: 0.5em; } -[data-type="core/image"][data-align="center"] .block-editor-block-list__block-edit .block-editor-rich-text, -[data-type="core/image"][data-align="left"] .block-editor-block-list__block-edit .block-editor-rich-text, -[data-type="core/image"][data-align="right"] .block-editor-block-list__block-edit .block-editor-rich-text { - display: table-caption; - caption-side: bottom; } +.wp-block[data-align="right"] > .wp-block-image { + margin-right: 1em; + margin-left: 0; + margin-top: 0.5em; + margin-bottom: 0.5em; } -[data-type="core/image"][data-align="wide"] figure img, -[data-type="core/image"][data-align="full"] figure img { +.wp-block[data-align="center"] > .wp-block-image { + margin-right: auto; + margin-left: auto; + text-align: center; } + +.wp-block-image__crop-area { + position: relative; + max-width: 100%; width: 100%; } -[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized { - margin: 0; - display: table; } - [data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized .block-editor-rich-text { - display: table-caption; - caption-side: bottom; } +.wp-block-image__crop-icon { + padding: 0 8px; + min-width: 48px; + display: flex; + justify-content: center; + align-items: center; } + .wp-block-image__crop-icon svg { + fill: currentColor; } + +.wp-block-image__zoom .components-popover__content { + overflow: visible; } + +.wp-block-image__zoom .components-range-control { + flex: 1; } + +.wp-block-image__zoom .components-base-control__field { + display: flex; + margin-bottom: 0; } + +.wp-block-image__aspect-ratio { + height: 46px; + margin-bottom: -8px; + display: flex; + align-items: center; } + .wp-block-image__aspect-ratio .components-button { + width: 36px; + padding-right: 0; + padding-left: 0; } .wp-block-latest-comments.has-avatars .avatar { margin-left: 10px; } @@ -885,76 +794,55 @@ .wp-block-latest-posts li a > div { display: inline; } -.wp-block-legacy-widget__edit-container, -.wp-block-legacy-widget__preview { - padding-right: 2.5em; - padding-left: 2.5em; } - .wp-block-legacy-widget__edit-container .widget-inside { border: none; - display: block; } + display: block; + box-shadow: none; } + +.wp-block-legacy-widget__edit-container .widget.open { + z-index: 0; } .wp-block-legacy-widget__update-button { margin-right: auto; display: block; } -.wp-block-legacy-widget__edit-container .widget-inside { - box-shadow: none; } - .wp-block-legacy-widget__preview { overflow: auto; } -.wp-block-media-text { - grid-template-areas: "media-text-media media-text-content" "resizer resizer"; } +.wp-block-legacy-widget__preview, +.wp-block-legacy-widget__edit-container, +.wp-block-legacy-widget__edit-widget-title { + padding: 8px 14px; } -.wp-block-media-text.has-media-on-the-right { - grid-template-areas: "media-text-content media-text-media" "resizer resizer"; } +.wp-block-legacy-widget__edit-widget-title { + background: #ddd; + color: #1e1e1e; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + padding: 8px 14px; + font-weight: 600; } .wp-block-media-text .__resizable_base__ { - grid-area: resizer; } + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-column: 1 / span 2; + -ms-grid-row: 2; + grid-row: 2; } .wp-block-media-text .editor-media-container__resizer { - grid-area: media-text-media; - align-self: center; width: 100% !important; } -.wp-block-media-text .block-editor-inner-blocks { - word-break: break-word; - grid-area: media-text-content; - text-align: initial; - padding: 0 8% 0 8%; } - -.wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block { - max-width: unset; } - -figure.block-library-media-text__media-container { - margin: 0; - height: 100%; - width: 100%; } +.wp-block-media-text.is-image-fill .editor-media-container__resizer { + height: 100% !important; } -.wp-block-media-text .block-library-media-text__media-container img, -.wp-block-media-text .block-library-media-text__media-container video { - vertical-align: middle; - width: 100%; } - -.editor-media-container__resizer .components-resizable-box__handle { - display: none; } - -.wp-block-media-text.is-selected:not(.is-stacked-on-mobile) .editor-media-container__resizer .components-resizable-box__handle { - display: block; } - -@media (min-width: 600px) { - .wp-block-media-text.is-selected.is-stacked-on-mobile .editor-media-container__resizer .components-resizable-box__handle { - display: block; } } - -.editor-styles-wrapper .block-library-list ul, -.editor-styles-wrapper .block-library-list ol { - padding-right: 1.3em; - margin-right: 1.3em; } +.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block { + max-width: unset; } .block-editor-block-list__block[data-type="core/more"] { max-width: 100%; - text-align: center; } + text-align: center; + margin-top: 28px; + margin-bottom: 28px; } .block-editor .wp-block-more { display: block; @@ -975,7 +863,8 @@ border-radius: 4px; background: #fff; padding: 6px 8px; - height: 24px; } + height: 24px; + max-width: 100%; } .block-editor .wp-block-more input[type="text"]:focus { box-shadow: none; } .block-editor .wp-block-more::before { @@ -986,8 +875,184 @@ left: 0; border-top: 3px dashed #ccd0d4; } +.editor-styles-wrapper .wp-block-navigation ul, +.editor-styles-wrapper .wp-block-navigation ol { + margin-bottom: 0; + margin-right: 0; + padding-right: 0; } + +.editor-styles-wrapper .wp-block-navigation .block-editor-block-list__block { + margin: 0; } + +.wp-block-navigation .block-list-appender { + margin: 0; + display: flex; + align-items: center; } + +.wp-block-navigation.is-vertical .block-list-appender { + margin: 8px; } + +.wp-block-navigation__inserter-content { + padding: 16px; } + +.wp-block-navigation__container.is-parent-of-selected-block { + visibility: visible; + opacity: 1; } + +.has-child > .wp-block-navigation__container, .has-child:hover > .wp-block-navigation__container { + opacity: 0; + visibility: hidden; } + +.has-child.is-selected > .wp-block-navigation__container, .has-child.has-child-selected > .wp-block-navigation__container { + opacity: 1; + visibility: visible; } + +/** + * Colors Selector component + */ +.block-library-colors-selector { + width: auto; } + .block-library-colors-selector .block-library-colors-selector__toggle { + display: block; + margin: 0 auto; + padding: 3px; + width: auto; } + .block-library-colors-selector .block-library-colors-selector__icon-container { + height: 30px; + position: relative; + margin: 0 auto; + padding: 3px; + display: flex; + align-items: center; + border-radius: 4px; } + .block-library-colors-selector .block-library-colors-selector__state-selection { + margin-right: auto; + margin-left: auto; } + .block-library-colors-selector .block-library-colors-selector__state-selection { + border-radius: 11px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + width: 22px; + min-width: 22px; + height: 22px; + min-height: 22px; + line-height: 20px; + padding: 2px; } + .block-library-colors-selector .block-library-colors-selector__state-selection > svg { + min-width: auto !important; } + .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg, + .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path { + color: inherit; } + +.block-library-colors-selector__popover .color-palette-controller-container { + padding: 16px; } + +.block-library-colors-selector__popover .components-base-control__label { + height: 20px; + line-height: 20px; } + +.block-library-colors-selector__popover .component-color-indicator { + float: left; + margin-top: 2px; } + +.block-library-colors-selector__popover .components-panel__body-title { + display: none; } + +.is-editing > .wp-block-navigation__container { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; } + +.wp-block-navigation.is-style-dark .block-editor-button-block-appender.block-list-appender__toggle { + color: #fff; } + +.wp-block-navigation.is-style-dark .block-editor-button-block-appender.block-list-appender__toggle > svg { + color: #000; + background-color: #fff; } + +.wp-block-navigation-placeholder .components-spinner { + margin-top: -4px; + margin-right: 4px; + vertical-align: middle; + margin-left: 7px; } + +.wp-block-navigation-placeholder .components-custom-select-control__label { + margin-bottom: 1rem; } + +.wp-block-navigation-placeholder .components-custom-select-control__button { + height: auto; + padding: 0.375rem 1.5rem 0.375rem 0.75rem; + min-width: 13.75rem; } + +.wp-block-navigation-placeholder .components-custom-select-control.has-menus .components-custom-select-control__item.is-create-empty-option { + position: relative; + margin-top: 20px; } + .wp-block-navigation-placeholder .components-custom-select-control.has-menus .components-custom-select-control__item.is-create-empty-option::before { + content: ""; + position: absolute; + top: -10px; + right: 25px; + left: 25px; + height: 15px; + border-top: 1px solid #757575; } + +.wp-block-navigation-placeholder .components-custom-select-control__label { + font-size: 13px; + font-weight: normal; } + +.wp-block-navigation-placeholder .components-custom-select-control__menu { + margin: 0; + max-height: none; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; } + +.wp-block-navigation .block-editor-button-block-appender { + justify-content: flex-start; } + +.wp-block-navigation-link__field .components-text-control__input.components-text-control__input, +.wp-block-navigation-link__container { + border-radius: 0; + line-height: 36px; + min-height: 36px; } + +/** + * Adjust Navigation Item. + */ +.wp-block-navigation-link .block-editor-block-list__layout { + display: block; } + +.wp-block-navigation-link.is-editing, .wp-block-navigation-link.is-selected { + min-width: 20px; } + +.wp-block-navigation-link .block-editor-rich-text__editable.is-selected:not(.keep-placeholder-on-focus):not(:focus)[data-rich-text-placeholder]::after { + display: inline-block; } + +.wp-block-navigation-link .block-list-appender { + margin: 16px; + margin-right: 10px; + margin-top: 10px; } + +.wp-block-navigation-link__nofollow-external-link { + display: block; } + +.wp-block-navigation-link__separator { + margin: 8px 0 8px; + border-top: 1px solid #ddd; } + +.components-popover.wp-block-navigation-link__dropdown-content { + margin-top: -1px; + margin-right: -4px; } + +.wp-block-navigation-link__dropdown-content .components-popover__content > div { + padding: 8px 0; } + +.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] > .block-editor-block-list__insertion-point { + display: none; } + .block-editor-block-list__block[data-type="core/nextpage"] { - max-width: 100%; } + max-width: 100%; + margin-top: 28px; + margin-bottom: 28px; } .wp-block-nextpage { display: block; @@ -1013,25 +1078,47 @@ left: 0; border-top: 3px dashed #ccd0d4; } -.block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable.wp-block-paragraph { - padding-left: 108px; } - .wp-block .wp-block .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable.wp-block-paragraph { - padding-left: 36px; } +.block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus { + min-height: auto !important; } + +.wp-block-post-excerpt__excerpt.is-inline { + display: inline-block; } -.wp-block-preformatted pre { - white-space: pre-wrap; } +.wp-block-post-author { + display: flex; + flex-wrap: wrap; + line-height: 1.5; } + .wp-block-post-author .wp-block-post-author__byline { + font-size: 0.5em; + margin-top: 0; + position: relative; + font-style: normal; } + .wp-block-post-author .wp-block-post-author__content { + flex-grow: 1; + flex-basis: 0; } + .wp-block-post-author .wp-block-post-author__avatar img { + margin: 0; } + .wp-block-post-author .wp-block-post-author__avatar { + margin-bottom: -8px; } + .wp-block-post-author .wp-block-post-author__name { + margin: 0; + font-weight: bold; } + .wp-block-post-author .wp-block-post-author__bio { + margin: 0 0 8px; + font-size: 0.7em; } -.block-editor-block-list__block[data-type="core/pullquote"][data-align="left"] .block-editor-rich-text p, .block-editor-block-list__block[data-type="core/pullquote"][data-align="right"] .block-editor-rich-text p { +.wp-block[data-align="left"] > .wp-block-pullquote p, +.wp-block[data-align="right"] > .wp-block-pullquote p { font-size: 20px; } -.wp-block-pullquote blockquote > .block-editor-rich-text p { +.wp-block-pullquote blockquote p { font-size: 28px; line-height: 1.6; } .wp-block-pullquote.is-style-solid-color { margin-right: 0; margin-left: 0; } - .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p { + .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 32px; } .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation { text-transform: none; @@ -1040,87 +1127,273 @@ .wp-block-pullquote .wp-block-pullquote__citation { color: inherit; } -.wp-block-quote { - margin: 0; } - .wp-block-quote__citation { - font-size: 13px; } +.wp-block-quote__citation { + font-size: 13px; } .block-editor .wp-block-rss { padding-right: 2.5em; } .block-editor .wp-block-rss.is-grid { padding-right: 0; } -.wp-block-search .wp-block-search__input { - border-radius: 4px; - border: 1px solid #8d96a0; - color: rgba(14, 28, 46, 0.62); +.wp-block-rss li a > div { + display: inline; } + +.wp-block-rss__placeholder-form { + display: flex; + align-items: stretch; } + .wp-block-rss__placeholder-form > * { + margin-bottom: 8px; } + @media (min-width: 782px) { + .wp-block-rss__placeholder-form > * { + margin-bottom: 0; } } + +.wp-block-rss__placeholder-input { + display: flex; + align-items: stretch; + flex-grow: 1; } + .wp-block-rss__placeholder-input .components-base-control__field { + margin: 0; + display: flex; + align-items: stretch; + flex-grow: 1; + margin-left: 8px; } + +.wp-block-search__input { + border-radius: 2px; + border: 1px solid #7e8993; + color: rgba(30, 30, 30, 0.62); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; } - .wp-block-search .wp-block-search__input:focus { + font-size: 13px; + padding: 8px; } + .wp-block-search__input:focus { outline: none; } -.wp-block-search .wp-block-search__button { +.wp-block-search__button { background: #f7f7f7; - border-radius: 4px; + border-radius: 2px; border: 1px solid #ccc; box-shadow: inset 0 -1px 0 #ccc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; } - .wp-block-search .wp-block-search__button .wp-block-search__button-rich-text { - padding: 6px 10px; } + font-size: 13px; + padding: 6px 10px; } + +.block-editor-block-list__block[data-type="core/separator"] { + padding-top: 0.1px; + padding-bottom: 0.1px; } + .block-editor-block-list__block[data-type="core/separator"].block-editor-block-list__block { + margin-top: 0; + margin-bottom: 0; } .wp-block-shortcode { display: flex; - flex-direction: row; + flex-direction: column; padding: 14px; - background-color: #f8f9f9; font-size: 13px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin-bottom: 28px; } .wp-block-shortcode label { display: flex; align-items: center; - margin-left: 8px; white-space: nowrap; font-weight: 600; flex-shrink: 0; } .wp-block-shortcode .block-editor-plain-text { - flex-grow: 1; } + max-height: 250px; } .wp-block-shortcode .dashicon { margin-left: 8px; } -.block-library-spacer__resize-container.is-selected { - background: #f3f4f5; } +.block-editor .blocks-shortcode__textarea, +.blocks-shortcode__textarea { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + padding: 6px 8px; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 2px; + border: 1px solid #757575; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } + @media (prefers-reduced-motion: reduce) { + .block-editor .blocks-shortcode__textarea, + .blocks-shortcode__textarea { + transition-duration: 0s; } } + @media (min-width: 600px) { + .block-editor .blocks-shortcode__textarea, + .blocks-shortcode__textarea { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } } + .block-editor .blocks-shortcode__textarea:focus, + .blocks-shortcode__textarea:focus { + border-color: #007cba; + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); + outline: 2px solid transparent; } + .block-editor .blocks-shortcode__textarea::-webkit-input-placeholder, + .blocks-shortcode__textarea::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); } + .block-editor .blocks-shortcode__textarea::-moz-placeholder, + .blocks-shortcode__textarea::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); } + .block-editor .blocks-shortcode__textarea:-ms-input-placeholder, + .blocks-shortcode__textarea:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); } + .is-dark-theme .block-editor .blocks-shortcode__textarea::-webkit-input-placeholder, .is-dark-theme + .blocks-shortcode__textarea::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme .block-editor .blocks-shortcode__textarea::-moz-placeholder, .is-dark-theme + .blocks-shortcode__textarea::-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme .block-editor .blocks-shortcode__textarea:-ms-input-placeholder, .is-dark-theme + .blocks-shortcode__textarea:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.65); } + +.wp-block-social-links .wp-social-link button { + color: currentColor; + padding: 6px; } + +.wp-block-social-links.is-style-pill-shape .wp-social-link button { + padding-right: 16px; + padding-left: 16px; } + +.wp-block-social-links div.block-editor-url-input { + display: inline-block; + margin-right: 8px; } + +.editor-styles-wrapper .wp-block-social-link { + margin: 0; + margin-left: 8px; } + +.editor-styles-wrapper .wp-block-social-links { + padding: 0; } + +.wp-block-social-links .block-list-appender { + margin: 0; + display: flex; + align-items: center; } + +.wp-block[data-align="center"] > .wp-block-social-links { + justify-content: center; } + +.block-editor-block-preview__content .wp-social-link:disabled { + opacity: 1; } + +[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-block-social-links { + min-height: 36px; } + +[data-type="core/social-links"] .wp-social-link__is-incomplete { + transition: transform 0.1s ease; + transform-origin: center center; } + +[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-social-link__is-incomplete { + opacity: 0; + transform: scale(0); + width: 0; + padding: 0; + margin-left: 0; } + +.wp-social-link.wp-social-link__is-incomplete { + opacity: 0.5; } + @media (prefers-reduced-motion: reduce) { + .wp-social-link.wp-social-link__is-incomplete { + transition-duration: 0s; } } + +.wp-block-social-links .is-selected .wp-social-link__is-incomplete, +.wp-social-link.wp-social-link__is-incomplete:hover, +.wp-social-link.wp-social-link__is-incomplete:focus { + opacity: 1; } + +[data-type="core/social-links"] .wp-social-link:focus { + opacity: 1; + box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007cba; + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; } + +.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"].is-selected::after, +.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"]:not([contenteditable]):focus::after { + left: 8px; } + +.block-library-spacer__resize-container.has-show-handle { + background: #f0f0f0; } + .is-dark-theme .block-library-spacer__resize-container.has-show-handle { + background: rgba(255, 255, 255, 0.15); } + +.block-library-spacer__resize-container { + clear: both; + margin-bottom: 28px; } + .block-library-spacer__resize-container .components-resizable-box__handle::before { + content: none; } .edit-post-visual-editor p.wp-block-subhead { color: #6c7781; font-size: 1.1em; font-style: italic; } -.block-editor-block-list__block[data-type="core/table"][data-align="left"] table, .block-editor-block-list__block[data-type="core/table"][data-align="right"] table, .block-editor-block-list__block[data-type="core/table"][data-align="center"] table { - width: auto; } +.wp-block[data-align="left"] > .wp-block-table, +.wp-block[data-align="right"] > .wp-block-table, +.wp-block[data-align="center"] > .wp-block-table { + height: auto; } + .wp-block[data-align="left"] > .wp-block-table table, + .wp-block[data-align="right"] > .wp-block-table table, + .wp-block[data-align="center"] > .wp-block-table table { + width: auto; } + .wp-block[data-align="left"] > .wp-block-table td, + .wp-block[data-align="left"] > .wp-block-table th, + .wp-block[data-align="right"] > .wp-block-table td, + .wp-block[data-align="right"] > .wp-block-table th, + .wp-block[data-align="center"] > .wp-block-table td, + .wp-block[data-align="center"] > .wp-block-table th { + word-break: break-word; } -.block-editor-block-list__block[data-type="core/table"][data-align="center"] { +.wp-block[data-align="center"] > .wp-block-table { text-align: initial; } - .block-editor-block-list__block[data-type="core/table"][data-align="center"] table { + .wp-block[data-align="center"] > .wp-block-table table { margin: 0 auto; } -.wp-block-table table { - border-collapse: collapse; - width: 100%; } - -.wp-block-table td, -.wp-block-table th { - padding: 0; - border: 1px solid #000; } +.wp-block-table { + margin: 0; } + .wp-block-table table { + border-collapse: collapse; } + .wp-block-table td, + .wp-block-table th { + border: 1px solid; } + .wp-block-table td.is-selected, + .wp-block-table th.is-selected { + border-color: #007cba; + border-color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 1px #007cba; + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); + border-style: double; } + .wp-block-table figcaption { + color: #555d66; + font-size: 13px; + text-align: center; } -.wp-block-table td.is-selected, -.wp-block-table th.is-selected { - border-color: #00a0d2; - box-shadow: inset 0 0 0 1px #00a0d2; - border-style: double; } +.blocks-table__placeholder-form.blocks-table__placeholder-form { + display: flex; + flex-direction: column; + align-items: flex-start; } + .blocks-table__placeholder-form.blocks-table__placeholder-form > * { + margin-bottom: 8px; } + @media (min-width: 782px) { + .blocks-table__placeholder-form.blocks-table__placeholder-form { + flex-direction: row; + align-items: flex-end; } + .blocks-table__placeholder-form.blocks-table__placeholder-form > * { + margin-bottom: 0; } } -.wp-block-table__cell-content { - padding: 0.5em; } +.blocks-table__placeholder-input { + width: 112px; + margin-left: 8px; + margin-bottom: 0; } + .blocks-table__placeholder-input input { + height: 36px; } + .blocks-table__placeholder-input .components-base-control__field { + margin-bottom: 0; } .block-editor .wp-block-tag-cloud a { display: inline-block; @@ -1132,23 +1405,182 @@ color: #8f98a1; text-decoration: none; } -.wp-block-text-columns .block-editor-rich-text__editable:focus { - outline: 1px solid #e2e4e7; } +.wp-block-template-part__placeholder-preview-dropdown-content .components-popover__content { + min-width: 320px; + padding: 0; } + +.wp-block-template-part__placeholder-preview-search-form { + border-bottom: 1px solid #ddd; } -pre.wp-block-verse, -.wp-block-verse pre { - color: #191e23; +.wp-block-template-part__placeholder-preview-container { + background: #fff; + padding-bottom: 16px; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-preview-item { + border-radius: 2px; + cursor: pointer; + margin-top: 16px; + transition: all 0.05s ease-in-out; + border: 1px solid transparent; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-preview-item:hover { + border: 1px solid #007cba; + border: 1px solid var(--wp-admin-theme-color); } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-preview-item:focus { + box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #007cba; + box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--wp-admin-theme-color); + outline: 2px solid transparent; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-preview-item.is-placeholder { + min-height: 100px; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-preview-item-title { + padding: 4px; + font-size: 12px; + text-align: right; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-panel-group-header { + padding: 16px 16px 0; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-panel-group-content { + padding: 0 16px; } + .wp-block-template-part__placeholder-preview-container .wp-block-template-part__placeholder-panel-group-title { + color: #007cba; + color: var(--wp-admin-theme-color); + text-transform: uppercase; + font-size: 11px; + font-weight: 500; } + +.wp-block-template-part__name-panel { + background-color: #fff; + border-radius: 2px; + box-shadow: 0 0 0 1px #1e1e1e; + outline: 1px solid transparent; + padding: 6px 12px; } + .wp-block-template-part__name-panel .components-base-control__field { + align-items: center; + display: flex; + margin-bottom: 0; } + .wp-block-template-part__name-panel .components-base-control__label { + margin-bottom: 0; + margin-left: 8px; } + +.is-navigate-mode .is-selected .wp-block-template-part__name-panel { + box-shadow: 0 0 0 1px #007cba; + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } + .is-dark-theme .is-navigate-mode .is-selected .wp-block-template-part__name-panel { + box-shadow: 0 0 0 1px #007cba; + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } + +.wp-block-text-columns .block-editor-rich-text__editable:focus { + outline: 1px solid #ddd; } + +pre.wp-block-verse { + color: #1e1e1e; white-space: nowrap; font-family: inherit; font-size: inherit; padding: 1em; overflow: auto; } -.block-editor-block-list__block[data-align="center"] { +.wp-block[data-align="center"] > .wp-block-video { text-align: center; } +.editor-video-poster-control .components-base-control__label { + display: block; } + .editor-video-poster-control .components-button { margin-left: 8px; } -.editor-video-poster-control .components-button + .components-button { - margin-top: 1em; } +.wp-block[data-type="core/widget-area"] { + max-width: 700px; } + +.wp-block-widget-area > .components-panel__body > .block-editor-inner-blocks { + padding-top: 24px; } + +/** + * Import styles from internal editor components used by the blocks. + */ +.block-editor-block-list__layout .reusable-block-edit-panel { + align-items: center; + display: flex; + flex-wrap: wrap; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + padding: 6px 12px; + border-radius: 2px; + background-color: #fff; + box-shadow: 0 0 0 1px #1e1e1e; + outline: 1px solid transparent; } + .block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__info { + margin-left: auto; } + .block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__label { + margin-left: 8px; + white-space: nowrap; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; } + .block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title { + flex: 1 1 100%; } + .block-editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button { + flex-shrink: 0; } + @media (min-width: 960px) { + .block-editor-block-list__layout .reusable-block-edit-panel { + flex-wrap: nowrap; } + .block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title { + margin: 0; } + .block-editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button { + margin: 0 8px 0 0; } } + +.reusable-block-edit-panel__title[type="text"] { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + padding: 6px 8px; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 2px; + border: 1px solid #757575; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } + @media (prefers-reduced-motion: reduce) { + .reusable-block-edit-panel__title[type="text"] { + transition-duration: 0s; } } + @media (min-width: 600px) { + .reusable-block-edit-panel__title[type="text"] { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } } + .reusable-block-edit-panel__title[type="text"]:focus { + border-color: #007cba; + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); + outline: 2px solid transparent; } + .reusable-block-edit-panel__title[type="text"]::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); } + .reusable-block-edit-panel__title[type="text"]::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); } + .reusable-block-edit-panel__title[type="text"]:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); } + .is-dark-theme .reusable-block-edit-panel__title[type="text"]::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme .reusable-block-edit-panel__title[type="text"]::-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme .reusable-block-edit-panel__title[type="text"]:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.65); } + +.is-navigate-mode .is-selected .reusable-block-edit-panel { + box-shadow: 0 0 0 1px #007cba; + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } + .is-dark-theme .is-navigate-mode .is-selected .reusable-block-edit-panel { + box-shadow: 0 0 0 1px #007cba; + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } + +/** + * Editor Normalization Styles + * + * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper. + * This allows us to create normalization styles that are easily overridden by editor styles. + */ +.block-editor-block-list__block { + margin-top: 28px; + margin-bottom: 28px; } + +#end-resizable-editor-section { + display: none; }