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.

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

Dequeue theme.css #7776

Open
samikeijonen opened this Issue Jul 8, 2018 · 17 comments

Comments

Projects
None yet
9 participants
@samikeijonen
Copy link
Contributor

samikeijonen commented Jul 8, 2018

Is your feature request related to a problem? Please describe.
At the moment it's pretty hard to dequeue theme.css from the editor. See comment from issue 5360.

With that comment I think I need to replace the original theme.css with empty one:

add_action( 'enqueue_block_editor_assets', function() {
	// Overwrite Core theme styles with empty styles.
	wp_deregister_style( 'wp-core-blocks-theme' );
	wp_register_style( 'wp-core-blocks-theme', asset( 'styles/theme.css' ), null );
}, 10 );

But I feel this is not the best practise, or there might be better way of doing this?

Describe the solution you'd like
To be honest I haven't looked the decencies that deep so that I could suggest solution. But I'd hope we look into this more.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Jul 19, 2018

@brandonpayton

This comment has been minimized.

Copy link
Member

brandonpayton commented Jul 19, 2018

Thanks for the cc!

Hi @samikeijonen, it turns out that styles can be registered with an empty source, so you can use that instead of an empty file:

add_action( 'enqueue_block_editor_assets', function() {
	// Overwrite Core theme styles with empty styles.
	wp_deregister_style( 'wp-core-blocks-theme' );
	wp_register_style( 'wp-core-blocks-theme', '' );
}, 10 );

This appears to work well today to omit theme.css, and the WordPress style dependency code acknowledges sourceless styles here. Does this address your concern?

When I originally added theme.css, my impression was that we didn't want theme.css to be optional in the editor, so the above solution seemed like the furthest we should go in allowing the file to be omitted. I may be wrong though. What do you think, @mtias?

@brandonpayton brandonpayton self-assigned this Jul 20, 2018

@samikeijonen

This comment has been minimized.

Copy link
Contributor Author

samikeijonen commented Jul 20, 2018

I'm OK with the solution by @brandonpayton. But perhaps add_theme_support() rule could be better.

This is my current setup for the editor and works just fine:

add_action( 'enqueue_block_editor_assets', function() {
	// Main block styles.
	wp_enqueue_style( 'uuups-blocks', asset( 'styles/editor.css' ), null, null );

	// Overwrite Core block styles with empty styles.
	wp_deregister_style( 'wp-block-library' );
	wp_register_style( 'wp-block-library', '' );

	// Overwrite Core theme styles with empty styles.
	wp_deregister_style( 'wp-block-library-theme' );
	wp_register_style( 'wp-block-library-theme', '' );
}, 10 );
@BinaryMoon

This comment has been minimized.

Copy link

BinaryMoon commented Aug 19, 2018

Just a quick note that the handle for deregistering theme.css is now wp-block-library-theme

@samikeijonen

This comment has been minimized.

Copy link
Contributor Author

samikeijonen commented Aug 20, 2018

I updated code snippet.

@aduth

This comment has been minimized.

Copy link
Member

aduth commented Aug 23, 2018

As best I can tell, there are no actionable tasks remaining here? Proactively closing until told otherwise.

@aduth aduth closed this Aug 23, 2018

@BinaryMoon

This comment has been minimized.

Copy link

BinaryMoon commented Aug 23, 2018

I think the request is to make it easier to dequeue theme.css from the editor since the current method is not the standard WordPress way. Normally you would just dequeue the style, but we have to deregister it and then register a non existent file in its place. Not the sort of thing that can be found easily so I think it should either:

  1. Be changed so the styles can be dequeued in the traditional way
  2. Have good documentation that explains the process so that theme developers can easily learn how to do it.
@aduth

This comment has been minimized.

Copy link
Member

aduth commented Aug 23, 2018

Thanks for clarifying the actionable tasks. I'll reopen.

@aduth aduth reopened this Aug 23, 2018

@aduth

This comment has been minimized.

Copy link
Member

aduth commented Aug 23, 2018

Based on how the wp-block-library styles are enqueued, at least for this stylesheet shouldn't it be sufficient to wp_dequeue_style( 'wp-block-library' ); on the enqueue_block_assets action?

/**
* Handles the enqueueing of block scripts and styles that are common to both
* the editor and the front-end.
*
* Note: This function must remain *before*
* `gutenberg_editor_scripts_and_styles` so that editor-specific stylesheets
* are loaded last.
*
* @since 0.4.0
*/
function gutenberg_common_scripts_and_styles() {
if ( ! is_gutenberg_page() && is_admin() ) {
return;
}
// Enqueue basic styles built out of Gutenberg through `npm build`.
wp_enqueue_style( 'wp-block-library' );
/*
* Enqueue block styles built through plugins. This lives in a separate
* action for a couple of reasons: (1) we want to load these assets
* (usually stylesheets) in *both* frontend and editor contexts, and (2)
* one day we may need to be smarter about whether assets are included
* based on whether blocks are actually present on the page.
*/
/**
* Fires after enqueuing block assets for both editor and front-end.
*
* Call `add_action` on any hook before 'wp_enqueue_scripts'.
*
* In the function call you supply, simply use `wp_enqueue_script` and
* `wp_enqueue_style` to add your functionality to the Gutenberg editor.
*
* @since 0.4.0
*/
do_action( 'enqueue_block_assets' );
}
add_action( 'wp_enqueue_scripts', 'gutenberg_common_scripts_and_styles' );
add_action( 'admin_enqueue_scripts', 'gutenberg_common_scripts_and_styles' );

@BinaryMoon

This comment has been minimized.

Copy link

BinaryMoon commented Aug 24, 2018

Looks like that would work for wp-block-library however I would like to dequeue wp-block-library-theme, and that is loaded as a dependency for wp-edit-blocks which is why the funky deregister re-register dance is needed.

wp_register_style(
'wp-edit-blocks',
gutenberg_url( 'build/block-library/edit-blocks.css' ),
array(
'wp-components',
'wp-editor',
// Always include visual styles so the editor never appears broken.
'wp-block-library-theme',
),
filemtime( gutenberg_dir_path() . 'build/block-library/edit-blocks.css' )
);
wp_style_add_data( 'wp-edit-blocks', 'rtl', 'replace' );

@samikeijonen

This comment has been minimized.

Copy link
Contributor Author

samikeijonen commented Aug 25, 2018

Also noting that we are talking how dequeueing styles in the editor using enqueue_block_editor_assets hook. In front-end there is no issues.

@persianturtle

This comment has been minimized.

Copy link

persianturtle commented Sep 9, 2018

I am developing a custom theme with Gutenberg and am having trouble dequeueing/degrestering the styles added by:

wp_register_style( 'wp-block-library', gutenberg_url( 'build/block-library/style.css' ), current_theme_supports( 'wp-block-styles' ) ? array( 'wp-block-library-theme' ) : array(), filemtime( gutenberg_dir_path() . 'build/block-library/style.css' ) ); wp_style_add_data( 'wp-block-library', 'rtl', 'replace' );

in client-assets.php

I've tried all of the code snippets listed in this thread and I'm not able to remove the following:

<link rel='stylesheet' id='wp-block-library-css' href='https://agendia.lndo.site/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1536503482' type='text/css' media='all' />

What am I missing?

@samikeijonen

This comment has been minimized.

Copy link
Contributor Author

samikeijonen commented Sep 9, 2018

@persianturtle

This comment has been minimized.

Copy link

persianturtle commented Sep 10, 2018

@samikeijonen The code from that answer doesn't work for me. I've tried it both with and without:

add_theme_support( 'wp-block-styles' );

Is this part:

wp_enqueue_style( 'uuups-blocks', asset( 'styles/editor.css' ), null, null );

important?

@vguerrerobosch

This comment has been minimized.

Copy link

vguerrerobosch commented Sep 12, 2018

@persianturtle I think you are trying to dequeue gutenberg stylesheet in the front-end but this thread is about removing it from the editor. In the front-end the classic solution will do just fine (at the moment). Something like this should work.

function custom_theme_assets() {
    wp_dequeue_style( 'wp-block-library' );
}

add_action( 'wp_enqueue_scripts', 'custom_theme_assets', 100 );
@vguerrerobosch

This comment has been minimized.

Copy link

vguerrerobosch commented Sep 12, 2018

btw, i think this statement in gutenberg handbook is not how it is actually working in version 3.7.0:
https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#default-block-styles

@mattheu

This comment has been minimized.

Copy link
Contributor

mattheu commented Sep 26, 2018

I have run into this issue also.

I think it would be good to clarify the intent for what site developers are expected to do here.

Consider the following situation:

  • If a developer is NOT using add_theme_support( 'wp-block-styles' ); and instead they are providing all the styles for core gutenberg blocks on the front end.
  • Also they are providing an editor stylesheet to make Gutenberg look more like the front end of their site.

Then what is the expectation? Should they be removing this stylesheet from Gutenberg? Or should they be wrestling with conflicting CSS and trying to overwrite these styles in their theme?

If the expectation is that this should be removed, then it should be made easier to do so. The script wp-block-library-theme should be enqueued independently and NOT be a dependency of the 'wp-edit-blocks' style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment