How to add custom block editor css in WordPress
So you have changed the style of your WordPress child theme in style.css
and see the changes on your WordPress website. But the style of the block editor remains the same when you are creating or updating your posts or pages.
If the Gutenberg editor style is consistent with your published website, you have a better idea of what the post/page will look like. How can I customize the style of the Gutenberg block editor in my theme editor?
Create css
file in WordPress theme
First, we’ll need to create the css
file where you will use to apply the style to the Gutenberg block editor.
To create the style file, make sure you are in your custom theme folder. You should be in a folder whose path ends with themes/twentytwenty-custom
.
In your custom theme folder, create a folder to contain the css file. The convention is to have a nested folder whose path is assets/css
. This is the convention of the default WordPress theme twenty-twenty
.
Next, we will need to create a css
file for the style of the Gutenberg block editor. The naming convention is editor-style-block.css
where block is for the Gutenberg block editor. Here we’ll append custom
to the filename, so we have editor-style-block-custom.css
.
After you add the style that you want to apply to the WordPress Gutenberg block editor, save the file. For example, the default twentytwenty WordPress theme uses a serif
font, and you may want to use a sans-serif
font for the content of your editor. Then add the following css style to the editor-style-block-custom.css
file:
1 2 3 |
.editor-styles-wrapper p, .editor-styles-wrapper ol, .editor-styles-wrapper ul, .editor-styles-wrapper dl, .editor-styles-wrapper dt { font-family: inherit; } |
Enqueue block editor CSS file in WordPress
Now, go to the Theme Editor page and open the functions.php
file of your custom theme. Then add the following code.
1 2 3 4 5 |
add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'twentytwenty-custom-block-editor-styles',\ get_theme_file_uri( "/assets/css/editor-style-block-custom.css" ),\ false, wp_get_theme()->get( 'Version' )); } ); |
Here we used the WordPress hook enqueue_block_editor_assets
to enqueue the editor-style-block-custom.css
file to block editor assets. We give the file a handle twentytwenty-custom-block-editor-styles
which we will search in the source of any edit page.
We also set the version of the css file to be the same as the theme version, so in case you set the cache policy of your server, Nginx or Apache, to be max
, the new version will be added as query string. See the Nginx http headers module documentation for more detail.
Verify editor style on an editor page
After you update the functions.php
file, you should see the editor-style-block-custom.css
added to the editor page source and the style of the editor should be changed correspondently.
To double check, edit any post or page on your WordPress website. If you are already on the editor webpage, refresh the page to make sure the change show up.
To see the source of the edit web page, press “Ctrl” and “U” or right click the page and click “View page source”. Now you should see an HTML page with syntax hightlight.
Now search for twentytwenty-custom-block-editor-styles-css
which is the handle we give earlier. You should see something like the following with the search term as id.
1 |
<link rel='stylesheet' id='twentytwenty-custom-block-editor-styles-css' href='https://lgtm.cf/wp-content/themes/twentytwenty-custom/assets/css/editor-style-block-custom.css?ver=1.0.4' media='all' /> |
To triple check, search for block-editor-styles-css
. You should see the parent editor style css as well.
Click on the file (e.g., https://lgtm.cf/wp-content/themes/twentytwenty-custom/assets/css/editor-style-block-custom.css?ver=1.0.4
) to double check the content. If the css file doesn’t have the change you made, fresh the page. If you have to refresh every time after you make the change, increase the version in the style.css
file of your WordPress theme to invaidate the cache.
wp_enqueue_style
function: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Napsat komentář