Step-by-Step Guide to Creating a Child Theme.The text color and font size are added with CSS custom properties that are generated from theme.json. You can read more about the naming convention for the block editor in the coding guidelines. The prefix and the block name are followed by the partial, separated by two underscores. The CSS class for the time element is wp-block-latest-comments_comment-date. In the example, the file is placed inside the folders assets/CSS/blocks. Where you place the file depends on how you organize your theme files. Because this is a time HTML element that is nested inside other HTML elements, can not be styled using theme.json.įirst, create a new CSS file with the name of the block: latest-comments.css. This code example changes the size and text color of the date in the latest comments block. You can use this method to add block styles that you can not add via theme.json. The additional style is loaded in the editor and the front, after the block style provided by WordPress and the Gutenberg plugin. With, wp_enqueue_block_style(), the theme only loads the CSS for the selected block when the block is used on the page. wp_enqueue_block_style() requires WordPress version 5.9 or later.Ī key part of creating block themes is performance. In addition to wp_enqueue_style(), you can use wp_enqueue_block_style() to enqueue styles for blocks. So if you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use: wp_enqueue_style( 'slider', get_template_directory_uri(). $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |