Since the release of WordPress 5.0, the new block editor, AKA Gutenberg, has been included in WordPress core. Many people have been excited about this new editor, myself included. However, there are still a few areas that need improvement.
One of the areas that need improvement is the way blocks are displayed on the frontend of a website. When you add a block, it is added to the content area of your post or page. However, if you preview or view the post or page on the frontend of your site, the blocks are not displayed in an attractive way.
This is where CSS comes in. CSS can be used to style the blocks so they look better on the frontend of your website. In this article, I will show you how to style the blocks in WordPress using CSS.
The first thing you need to do is install and activate the Gutenberg Blocks and CSS plugin
Once you have installed and activated the plugin, you need to visit the settings page to configure the plugin. On the settings page, you will see a list of all the available blocks. You can select which blocks you want to style and then click on the “Save Changes” button.
Next, you need to add some CSS code to style the blocks
You can add CSS code in the Customizer under Appearance » Customize » Additional CSS. Simply add your CSS code in the textarea and click on the “Publish” button to save your changes.
Here is an example of CSS code that you can use to style theparagraph block
.wp-block-paragraph {
border: 1px solid #cccccc;
padding: 10px;
}This CSS code will add a border and padding to the paragraph block. You can use this same method to style other blocks as well.
In conclusion
WordPress 5.0 and Gutenberg are still new but they show a lot of promise. The ability to style blocks with CSS is a great way to make your posts and pages look better on the frontend of your website.
Where Is Function PHP WooCommerce?
PHP WooCommerce is located in “/wp-content/plugins/woocommerce/includes/wc-core-functions.php”.
