diff --git a/wp-includes/blocks/index.php b/wp-includes/blocks/index.php index 2d8fddab98..92f9d8683c 100644 --- a/wp-includes/blocks/index.php +++ b/wp-includes/blocks/index.php @@ -32,6 +32,7 @@ require ABSPATH . WPINC . '/blocks/rss.php'; require ABSPATH . WPINC . '/blocks/search.php'; require ABSPATH . WPINC . '/blocks/shortcode.php'; require ABSPATH . WPINC . '/blocks/site-tagline.php'; +require ABSPATH . WPINC . '/blocks/site-logo.php'; require ABSPATH . WPINC . '/blocks/site-title.php'; require ABSPATH . WPINC . '/blocks/social-link.php'; require ABSPATH . WPINC . '/blocks/tag-cloud.php'; diff --git a/wp-includes/blocks/site-logo.php b/wp-includes/blocks/site-logo.php new file mode 100644 index 0000000000..44d63505cc --- /dev/null +++ b/wp-includes/blocks/site-logo.php @@ -0,0 +1,164 @@ +(.*?)#i', '\1', $custom_logo ); + } + + if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) { + // Add the link target after the rel="home". + // Add an aria-label for informing that the page opens in a new tab. + $aria_label = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"'; + $custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . $attributes['linkTarget'] . '"' . $aria_label, $custom_logo ); + } + + $classnames = array(); + if ( ! empty( $attributes['className'] ) ) { + $classnames[] = $attributes['className']; + } + + if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), true ) ) { + $classnames[] = "align{$attributes['align']}"; + } + + if ( empty( $attributes['width'] ) ) { + $classnames[] = 'is-default-size'; + } + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classnames ) ) ); + $html = sprintf( '
%s
', $wrapper_attributes, $custom_logo ); + return $html; +} + +/** + * Register a core site setting for a site logo + */ +function register_block_core_site_logo_setting() { + register_setting( + 'general', + 'site_logo', + array( + 'show_in_rest' => array( + 'name' => 'site_logo', + ), + 'type' => 'integer', + 'description' => __( 'Site logo.' ), + ) + ); +} + +add_action( 'rest_api_init', 'register_block_core_site_logo_setting', 10 ); + +/** + * Registers the `core/site-logo` block on the server. + */ +function register_block_core_site_logo() { + register_block_type_from_metadata( + __DIR__ . '/site-logo', + array( + 'render_callback' => 'render_block_core_site_logo', + ) + ); +} + +add_action( 'init', 'register_block_core_site_logo' ); + +/** + * Overrides the custom logo with a site logo, if the option is set. + * + * @param string $custom_logo The custom logo set by a theme. + * + * @return string The site logo if set. + */ +function _override_custom_logo_theme_mod( $custom_logo ) { + $site_logo = get_option( 'site_logo' ); + return false === $site_logo ? $custom_logo : $site_logo; +} + +add_filter( 'theme_mod_custom_logo', '_override_custom_logo_theme_mod' ); + +/** + * Updates the site_logo option when the custom_logo theme-mod gets updated. + * + * This function is hooked on "update_option_theme_mods_$theme" and not + * "pre_set_theme_mod_custom_logo" because by hooking in `update_option` + * the function accounts for remove_theme_mod() as well. + * + * @param mixed $old_value The old option value. + * @param mixed $value The new option value. + */ +function _sync_custom_logo_to_site_logo( $old_value, $value ) { + // Delete the option when the custom logo does not exist or was removed. + // This step ensures the option stays in sync. + if ( empty( $value['custom_logo'] ) ) { + delete_option( 'site_logo' ); + } else { + remove_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo' ); + update_option( 'site_logo', $value['custom_logo'] ); + add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 ); + } +} + +/** + * Hooks `_sync_custom_logo_to_site_logo` in `update_option_theme_mods_$theme`. + * + * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer. + */ +function _sync_custom_logo_to_site_logo_on_setup_theme() { + $theme = get_option( 'stylesheet' ); + add_action( "update_option_theme_mods_$theme", '_sync_custom_logo_to_site_logo', 10, 2 ); +} +add_action( 'setup_theme', '_sync_custom_logo_to_site_logo_on_setup_theme', 11 ); + +/** + * Updates the custom_logo theme-mod when the site_logo option gets updated. + * + * @param mixed $old_value The old option value. + * @param mixed $value The new option value. + * + * @return void + */ +function _sync_site_logo_to_custom_logo( $old_value, $value ) { + // Delete the option when the custom logo does not exist or was removed. + // This step ensures the option stays in sync. + if ( empty( $value ) ) { + remove_theme_mod( 'custom_logo' ); + } else { + remove_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' ); + set_theme_mod( 'custom_logo', $value ); + add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' ); + } +} + +add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 ); diff --git a/wp-includes/blocks/site-logo/block.json b/wp-includes/blocks/site-logo/block.json new file mode 100644 index 0000000000..c40cfcdd2b --- /dev/null +++ b/wp-includes/blocks/site-logo/block.json @@ -0,0 +1,39 @@ +{ + "apiVersion": 2, + "name": "core/site-logo", + "title": "Site Logo", + "category": "layout", + "description": "Useful for displaying a graphic mark, design, or symbol to represent the site. Once a site logo is set, it can be reused in different places and templates. It should not be confused with the site icon, which is the small image used in the dashboard, browser tabs, public search results, etc, to help recognize a site.", + "textdomain": "default", + "attributes": { + "align": { + "type": "string" + }, + "width": { + "type": "number" + }, + "isLink": { + "type": "boolean", + "default": true + }, + "linkTarget": { + "type": "string", + "default": "_self" + } + }, + "supports": { + "html": false, + "align": true, + "alignWide": false + }, + "styles": [ + { + "name": "default", + "label": "Default", + "isDefault": true + }, + { "name": "rounded", "label": "Rounded" } + ], + "editorStyle": "wp-block-site-logo-editor", + "style": "wp-block-site-logo" +} diff --git a/wp-includes/blocks/site-logo/editor-rtl.css b/wp-includes/blocks/site-logo/editor-rtl.css new file mode 100644 index 0000000000..8441ce33f5 --- /dev/null +++ b/wp-includes/blocks/site-logo/editor-rtl.css @@ -0,0 +1,129 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * 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 & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left 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. + */ +.wp-block[data-align=center] > .wp-block-site-logo { + margin-right: auto; + margin-left: 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; +} +.wp-block-site-logo .custom-logo-link:focus { + box-shadow: none; +} +.wp-block-site-logo .custom-logo-link.is-transient img { + opacity: 0.3; +} +.wp-block-site-logo img { + display: block; + max-width: 100%; +} +.wp-block-site-logo .components-placeholder { + min-height: auto; + height: 120px; + padding: 8px; +} +.wp-block-site-logo .components-placeholder .components-placeholder__label { + white-space: nowrap; +} +.wp-block-site-logo .components-placeholder .components-placeholder__label .block-editor-block-icon { + margin-left: 4px; +} +.wp-block-site-logo .components-placeholder .components-form-file-upload { + display: none; +} +.wp-block-site-logo .components-placeholder .components-placeholder__preview { + position: absolute; + top: 4px; + left: 4px; + bottom: 4px; + right: 4px; + background: rgba(255, 255, 255, 0.8); + display: flex; + align-items: center; + justify-content: center; +} +.wp-block-site-logo .components-placeholder .components-drop-zone__content-text { + display: none; +} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/editor-rtl.min.css b/wp-includes/blocks/site-logo/editor-rtl.min.css new file mode 100644 index 0000000000..029006a4a1 --- /dev/null +++ b/wp-includes/blocks/site-logo/editor-rtl.min.css @@ -0,0 +1 @@ +.wp-block[data-align=center]>.wp-block-site-logo{margin-right:auto;margin-left: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}.wp-block-site-logo .custom-logo-link:focus{box-shadow:none}.wp-block-site-logo .custom-logo-link.is-transient img{opacity:.3}.wp-block-site-logo img{display:block;max-width:100%}.wp-block-site-logo .components-placeholder{min-height:auto;height:120px;padding:8px}.wp-block-site-logo .components-placeholder .components-placeholder__label{white-space:nowrap}.wp-block-site-logo .components-placeholder .components-placeholder__label .block-editor-block-icon{margin-left:4px}.wp-block-site-logo .components-placeholder .components-form-file-upload{display:none}.wp-block-site-logo .components-placeholder .components-placeholder__preview{position:absolute;top:4px;left:4px;bottom:4px;right:4px;background:hsla(0,0%,100%,.8);display:flex;align-items:center;justify-content:center}.wp-block-site-logo .components-placeholder .components-drop-zone__content-text{display:none} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/editor.css b/wp-includes/blocks/site-logo/editor.css new file mode 100644 index 0000000000..709d0c9a21 --- /dev/null +++ b/wp-includes/blocks/site-logo/editor.css @@ -0,0 +1,129 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * 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 & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left 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. + */ +.wp-block[data-align=center] > .wp-block-site-logo { + 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; +} +.wp-block-site-logo .custom-logo-link:focus { + box-shadow: none; +} +.wp-block-site-logo .custom-logo-link.is-transient img { + opacity: 0.3; +} +.wp-block-site-logo img { + display: block; + max-width: 100%; +} +.wp-block-site-logo .components-placeholder { + min-height: auto; + height: 120px; + padding: 8px; +} +.wp-block-site-logo .components-placeholder .components-placeholder__label { + white-space: nowrap; +} +.wp-block-site-logo .components-placeholder .components-placeholder__label .block-editor-block-icon { + margin-right: 4px; +} +.wp-block-site-logo .components-placeholder .components-form-file-upload { + display: none; +} +.wp-block-site-logo .components-placeholder .components-placeholder__preview { + position: absolute; + top: 4px; + right: 4px; + bottom: 4px; + left: 4px; + background: rgba(255, 255, 255, 0.8); + display: flex; + align-items: center; + justify-content: center; +} +.wp-block-site-logo .components-placeholder .components-drop-zone__content-text { + display: none; +} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/editor.min.css b/wp-includes/blocks/site-logo/editor.min.css new file mode 100644 index 0000000000..a08db2a169 --- /dev/null +++ b/wp-includes/blocks/site-logo/editor.min.css @@ -0,0 +1 @@ +.wp-block[data-align=center]>.wp-block-site-logo{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}.wp-block-site-logo .custom-logo-link:focus{box-shadow:none}.wp-block-site-logo .custom-logo-link.is-transient img{opacity:.3}.wp-block-site-logo img{display:block;max-width:100%}.wp-block-site-logo .components-placeholder{min-height:auto;height:120px;padding:8px}.wp-block-site-logo .components-placeholder .components-placeholder__label{white-space:nowrap}.wp-block-site-logo .components-placeholder .components-placeholder__label .block-editor-block-icon{margin-right:4px}.wp-block-site-logo .components-placeholder .components-form-file-upload{display:none}.wp-block-site-logo .components-placeholder .components-placeholder__preview{position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:hsla(0,0%,100%,.8);display:flex;align-items:center;justify-content:center}.wp-block-site-logo .components-placeholder .components-drop-zone__content-text{display:none} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/style-rtl.css b/wp-includes/blocks/site-logo/style-rtl.css new file mode 100644 index 0000000000..a9f9fdd63c --- /dev/null +++ b/wp-includes/blocks/site-logo/style-rtl.css @@ -0,0 +1,86 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * 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 & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left 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. + */ +.wp-block-site-logo { + line-height: 0; +} +.wp-block-site-logo a { + display: inline-block; +} +.wp-block-site-logo.is-default-size img { + width: 120px; + height: auto; +} +.wp-block-site-logo .aligncenter { + display: table; +} +.wp-block-site-logo.is-style-rounded img { + border-radius: 9999px; +} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/style-rtl.min.css b/wp-includes/blocks/site-logo/style-rtl.min.css new file mode 100644 index 0000000000..79b08e68b0 --- /dev/null +++ b/wp-includes/blocks/site-logo/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-site-logo{line-height:0}.wp-block-site-logo a{display:inline-block}.wp-block-site-logo.is-default-size img{width:120px;height:auto}.wp-block-site-logo .aligncenter{display:table}.wp-block-site-logo.is-style-rounded img{border-radius:9999px} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/style.css b/wp-includes/blocks/site-logo/style.css new file mode 100644 index 0000000000..a9f9fdd63c --- /dev/null +++ b/wp-includes/blocks/site-logo/style.css @@ -0,0 +1,86 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * 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 & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left 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. + */ +.wp-block-site-logo { + line-height: 0; +} +.wp-block-site-logo a { + display: inline-block; +} +.wp-block-site-logo.is-default-size img { + width: 120px; + height: auto; +} +.wp-block-site-logo .aligncenter { + display: table; +} +.wp-block-site-logo.is-style-rounded img { + border-radius: 9999px; +} \ No newline at end of file diff --git a/wp-includes/blocks/site-logo/style.min.css b/wp-includes/blocks/site-logo/style.min.css new file mode 100644 index 0000000000..79b08e68b0 --- /dev/null +++ b/wp-includes/blocks/site-logo/style.min.css @@ -0,0 +1 @@ +.wp-block-site-logo{line-height:0}.wp-block-site-logo a{display:inline-block}.wp-block-site-logo.is-default-size img{width:120px;height:auto}.wp-block-site-logo .aligncenter{display:table}.wp-block-site-logo.is-style-rounded img{border-radius:9999px} \ No newline at end of file diff --git a/wp-includes/version.php b/wp-includes/version.php index 9b5170df1f..28164074aa 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.8-alpha-51090'; +$wp_version = '5.8-alpha-51091'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.