Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Try/enable global styles #21346

Closed
wants to merge 4 commits into from
Closed

Try/enable global styles #21346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51523b0
Try enabling global styles
oandregal Apr 2, 2020
d379d67
Remove experiment enabled check
oandregal Apr 2, 2020
9fcb2a9
Remove theme support check
oandregal Apr 2, 2020
2f18e06
Fix leaks in sidebars
oandregal Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 21 additions & 104 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,6 @@
* @package gutenberg
*/

/**
* Whether the current theme has support for Global Styles.
*
* @return boolean
*/
function gutenberg_experimental_global_styles_has_theme_support() {
return is_readable( locate_template( 'experimental-theme.json' ) );
}

/**
* Given a Global Styles tree, it creates a flattened tree
* whose keys are the CSS custom properties
Expand Down Expand Up @@ -90,11 +81,11 @@ function gutenberg_experimental_global_styles_get_user() {
*
* @param array $post_status_filter Filter CPT by post status.
* By default, only fetches published posts.
* @param bool $should_create_draft Whether a new draft should be created
* if no CPT was found. False by default.
* @param bool $should_create_cpt Whether a new draft should be created
* if no CPT was found. False by default.
* @return array Custom Post Type for the user's Global Styles.
*/
function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) {
function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_cpt = false ) {
$user_cpt = array();
$post_type_filter = 'wp_global_styles';
$post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'TextDomain' ) );
Expand All @@ -111,11 +102,11 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter

if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) {
$user_cpt = $recent_posts[0];
} elseif ( $should_create_draft ) {
} elseif ( $should_create_cpt ) {
$cpt_post_id = wp_insert_post(
array(
'post_content' => '{}',
'post_status' => 'draft',
'post_status' => 'publish',
'post_type' => $post_type_filter,
'post_name' => $post_name_filter,
),
Expand Down Expand Up @@ -148,7 +139,7 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() {
*/
function gutenberg_experimental_global_styles_get_core() {
return gutenberg_experimental_global_styles_get_from_file(
dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'
dirname( __FILE__ ) . '/global-styles/experimental-default-global-styles.json'
);
}

Expand All @@ -164,15 +155,21 @@ function gutenberg_experimental_global_styles_get_theme() {
}

/**
* Takes a Global Styles tree and returns a CSS rule
* Takes core, theme, and user preferences,
* builds a single global styles tree and returns a CSS rule
* that contains the corresponding CSS custom properties.
*
* @param array $global_styles Global Styles tree.
* @return string CSS rule.
*/
function gutenberg_experimental_global_styles_resolver( $global_styles ) {
function gutenberg_experimental_global_styles_resolver() {
$css_rule = '';

$global_styles = array_replace_recursive(
gutenberg_experimental_global_styles_get_core(),
gutenberg_experimental_global_styles_get_theme(),
gutenberg_experimental_global_styles_get_user()
);

$token = '--';
$prefix = '--wp' . $token;
$css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix, $token );
Expand All @@ -189,32 +186,12 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) {
return $css_rule;
}

/**
* Fetches the Global Styles for each level (core, theme, user)
* and enqueues the resulting CSS custom properties for the editor.
*/
function gutenberg_experimental_global_styles_enqueue_assets_editor() {
if ( gutenberg_experimental_global_styles_is_site_editor() ) {
gutenberg_experimental_global_styles_enqueue_assets();
}
}

/**
* Fetches the Global Styles for each level (core, theme, user)
* and enqueues the resulting CSS custom properties.
*/
function gutenberg_experimental_global_styles_enqueue_assets() {
if ( ! gutenberg_experimental_global_styles_has_theme_support() ) {
return;
}

$global_styles = array_merge(
gutenberg_experimental_global_styles_get_core(),
gutenberg_experimental_global_styles_get_theme(),
gutenberg_experimental_global_styles_get_user()
);

$inline_style = gutenberg_experimental_global_styles_resolver( $global_styles );
$inline_style = gutenberg_experimental_global_styles_resolver();
if ( empty( $inline_style ) ) {
return;
}
Expand All @@ -224,51 +201,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
wp_enqueue_style( 'global-styles' );
}

/**
* Adds class wp-gs to the frontend body class.
*
* @param array $classes Existing body classes.
* @return array The filtered array of body classes.
*/
function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) {
if ( ! gutenberg_experimental_global_styles_has_theme_support() ) {
return $classes;
}

return array_merge( $classes, array( 'wp-gs' ) );
}

/**
* Adds class wp-gs to the block-editor body class.
*
* @param string $classes Existing body classes separated by space.
* @return string The filtered string of body classes.
*/
function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) {
if (
! gutenberg_experimental_global_styles_has_theme_support() ||
! gutenberg_experimental_global_styles_is_site_editor()
) {
return $classes;
}

return $classes . ' wp-gs';
}

/**
* Whether the loaded page is the site editor.
*
* @return boolean Whether the loaded page is the site editor.
*/
function gutenberg_experimental_global_styles_is_site_editor() {
if ( ! function_exists( 'get_current_screen' ) ) {
return false;
}

$screen = get_current_screen();
return ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id );
}

/**
* Makes the base Global Styles (core, theme)
* and the ID of the CPT that stores the user's Global Styles
Expand All @@ -278,13 +210,6 @@ function gutenberg_experimental_global_styles_is_site_editor() {
* @return array New block editor settings
*/
function gutenberg_experimental_global_styles_settings( $settings ) {
if (
! gutenberg_experimental_global_styles_has_theme_support() ||
! gutenberg_experimental_global_styles_is_site_editor()
) {
return $settings;
}

$settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id();

$global_styles = array_merge(
Expand All @@ -301,10 +226,6 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
* Registers a Custom Post Type to store the user's Global Styles.
*/
function gutenberg_experimental_global_styles_register_cpt() {
if ( ! gutenberg_experimental_global_styles_has_theme_support() ) {
return;
}

$args = array(
'label' => __( 'Global Styles', 'gutenberg' ),
'description' => 'CPT to store user design tokens',
Expand All @@ -330,12 +251,8 @@ function gutenberg_experimental_global_styles_register_cpt() {
register_post_type( 'wp_global_styles', $args );
}

if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) {
add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' );
add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' );
add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' );
add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' );
// enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead.
add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets_editor' );
}
add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' );
add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' );
// enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead.
add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
4 changes: 3 additions & 1 deletion experimental-default-global-styles.json → ...s/experimental-default-global-styles.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{
"color": {
"primary": "#52accc",
"background": "white",
"text": "black"
},
"typography": {
"line-height": 1.5
}
}
4 changes: 0 additions & 4 deletions packages/block-library/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ $blocks-button__height: 56px;
}
}

.wp-gs .wp-block-button__link:not(.has-background) {
background-color: var(--wp--color--primary);
}

.is-style-squared .wp-block-button__link {
border-radius: 0;
}
Expand Down
12 changes: 12 additions & 0 deletions packages/interface/src/components/complementary-area/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,24 @@

p {
margin-top: 0;
line-height: 1.5;
color: $dark-gray-500;
background-color: inherit;
}

h2 {
line-height: $default-line-height;
}

h3 {
line-height: 1.5;
}

h2,
h3 {
font-size: $default-font-size;
color: $dark-gray-500;
background-color: inherit;
margin-bottom: 1.5em;
}

Expand Down