diff -r be944660c56a -r 3d72ae0968f4 wp/wp-includes/blocks/site-logo/editor.css --- a/wp/wp-includes/blocks/site-logo/editor.css Wed Sep 21 18:19:35 2022 +0200 +++ b/wp/wp-includes/blocks/site-logo/editor.css Tue Sep 27 16:37:53 2022 +0200 @@ -41,6 +41,12 @@ * These variables do not appear to be used anywhere else. */ /** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** * Breakpoint mixins */ /** @@ -68,24 +74,16 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block[data-align=center] > .wp-block-site-logo { +.wp-block[data-align=center] > .wp-block-site-logo, +.wp-block-site-logo.aligncenter > div { + display: table; margin-left: auto; margin-right: auto; - text-align: center; } .wp-block-site-logo a { pointer-events: none; } -.wp-block-site-logo:not(.is-default-size) { - display: table; -} -.wp-block-site-logo.is-default-size { - width: 120px; -} -.wp-block-site-logo.is-default-size img { - width: 100%; -} .wp-block-site-logo .custom-logo-link { cursor: inherit; } @@ -97,26 +95,35 @@ } .wp-block-site-logo img { display: block; + height: auto; max-width: 100%; } -.wp-block-site-logo .components-placeholder { - justify-content: flex-start; - min-height: auto; + +.wp-block-site-logo.wp-block-site-logo .components-placeholder, +.wp-block-site-logo.wp-block-site-logo .components-resizable-box__container { + border-radius: inherit; +} +.wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder { height: 120px; - padding: 12px; + width: 120px; } -.wp-block-site-logo .components-placeholder .components-placeholder__label { - margin-top: 12px; - white-space: nowrap; +.wp-block-site-logo.wp-block-site-logo .components-placeholder { + display: flex; + justify-content: center; + align-items: center; + box-shadow: none; + padding: 0; + min-height: 48px; + min-width: 48px; + height: 100%; + width: 100%; + color: currentColor; + background: transparent; } -.wp-block-site-logo .components-placeholder .components-placeholder__label .block-editor-block-icon, -.wp-block-site-logo .components-placeholder .components-placeholder__label > svg { - margin-right: 4px; -} -.wp-block-site-logo .components-placeholder .components-form-file-upload { +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload { display: none; } -.wp-block-site-logo .components-placeholder .components-placeholder__preview { +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__preview { position: absolute; top: 4px; right: 4px; @@ -127,6 +134,65 @@ align-items: center; justify-content: center; } -.wp-block-site-logo .components-placeholder .components-drop-zone__content-text { +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text { display: none; +} +.wp-block-site-logo.wp-block-site-logo .components-placeholder::before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 1px dashed currentColor; + opacity: 0.4; + pointer-events: none; + border-radius: inherit; +} +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__fieldset { + width: auto; +} +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button { + color: inherit; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + visibility: hidden; + background: transparent; + transition: all 0.1s linear; +} +@media (prefers-reduced-motion: reduce) { + .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button { + transition-duration: 0s; + transition-delay: 0s; + } +} +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg { + color: #fff; +} +.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__illustration { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + stroke: currentColor; + stroke-dasharray: 3; + opacity: 0.4; +} +.wp-block-site-logo.wp-block-site-logo.is-selected .components-button.components-button { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + border-style: solid; + color: #fff; + opacity: 1; + visibility: visible; } \ No newline at end of file