Block Editor: Add the Site Logo block's server implementation.

Props aristath, timothyblynjacobs, ocean90.
Fixes #53247.

Built from https://develop.svn.wordpress.org/trunk@51091


git-svn-id: http://core.svn.wordpress.org/trunk@50700 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
youknowriad 2021-06-08 08:27:58 +00:00
parent 446dd1768a
commit 55f3de101b
12 changed files with 639 additions and 1 deletions

View File

@ -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';

View File

@ -0,0 +1,164 @@
<?php
/**
* Server-side rendering of the `core/site-logo` block.
*
* @package WordPress
*/
/**
* Renders the `core/site-logo` block on the server.
*
* @param array $attributes The block attributes.
*
* @return string The render.
*/
function render_block_core_site_logo( $attributes ) {
$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
if ( empty( $attributes['width'] ) ) {
return $image;
}
$height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] );
return array( $image[0], (int) $attributes['width'], (int) $height );
};
add_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter );
$custom_logo = get_custom_logo();
remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter );
if ( empty( $custom_logo ) ) {
return ''; // Return early if no custom logo is set, avoiding extraneous wrapper div.
}
if ( ! $attributes['isLink'] ) {
// Remove the link.
$custom_logo = preg_replace( '#<a.*?>(.*?)</a>#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( '<div %s>%s</div>', $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 );

View File

@ -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"
}

View File

@ -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;
}

View File

@ -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}

View File

@ -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;
}

View File

@ -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}

View File

@ -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;
}

View File

@ -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}

View File

@ -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;
}

View File

@ -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}

View File

@ -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.