![]() ![]() These files follow the new SCSS syntax, which you can learn more about on the Sass website. Just like the new JSX format used to create blocks transpilers into regular JavaScript during the bold step, Sass files transpile into regular CSS. These two files are syntactically awesome style sheets also known as Sass files. Currently, both of these files contain the scaffolded code from the previous tutorial, so we can clear them out. The editor.scss file in the source directory is used to create the editorStyle file. The style.scss file in the source directory is used create the style file. The editorStyle file is enqueued when the block is rendered only in the Block Editor and can be used to add style specific to the editor experience. The style file is enqueued both when the block is rendered in the editor and whenever the block is rendered on the front end. In this case, index.css and style-index.css. The values for these attributes are both files that will be created in the build directory during the build step. If you look at the block.json file attributes, you will see the editorStyle and style attributes defined. To add the styles to your block, you need to know where to define them. And if we inspect this, we can see the HTML from the shortcode. There’s the shortcode and there’s the front-end rendering. We can see this rendered on the front end of the site when the shortcode is rendered. This is done by applying specific styles to the class attributes of both the container div and the header element. If we look at the style sheet that’s enqueued, it adds a background color and some padding to the container div and applies a bold font to the header tag. Then at the top of the shortcode callback function, this style sheet is enqueued for rendering whenever the shortcode is used by calling the wp_enqueue_style function. And the wp_register_style function is used to register the CSS stylesheet located in the plugin’s assets/css directory. At the top of the plugin, a function called wpl_subscribe_shortcode_scripts is registered on the wp_enqueue_scripts action hook. The code to make this happen based on the shortcode might look something like this. ![]() ![]() While functional, the shortcode would usually also have some styling applied by way of the CSS file loaded from the plugin directory. In the original adding block support to an existing plugin tutorial, you started with a PHP shortcode plugin. In this video, we will cover how blocks enqueue CSS files, how to use class attributes in your JSX code, applying CSS to your custom block, and applying additional CSS to the block when it’s rendered in the editor. If you haven’t already watched the adding blocks support to an existing plugin tutorial, I recommend watching that first, as this video will be referring to the code solutions presented in that tutorial. In this tutorial, you will learn how to add styles to a custom WordPress block. Hi there, and welcome to Learn WordPress. What is the name of the scss file that handles the block styling?.Why should you use className and not a class in JSX elements?.What is the name of the block.json field that represents the style sheet applied in the Block Editor?.Add additional style to a block in the Block Editor.Use the className property in JSX to apply class attributes.This tutorial will guide the new block developer on the process of styling the Edit component and the save function of a newly created WordPress block. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |