Add styles to Gutenberg editor blocks

If you are using the Gutenberg editor and have a basic understanding of code, you will notice that the content edited in the Gutenberg editor is organized block by block by default. The plugin recommended in this article is designed to add styles to these blocks.

Plugin Introduction

Custom CSS For Gutenberg Blocks is a GutenbergEditor EnhancementPlugin that allows you to define styles for any block that appears when writing posts with the Gutenberg editor, such as adjusting appearance, typography, and dimensions.CSS Properties: Typography

• Font Family
• Color
• Font Size
• Font Weight
• Line Height
• Letter Spacing
• Word Spacing
• Font Style
• Text Shadow
• Text Align
• Text Transform
• Text Decoration

CSS Properties: Appearance

• Opacity
• Background Color
• Border
• Border Radius
• Box Shadow

CSS Properties: Dimensions

• Margin
• Padding
• Width
• Height

Animated GIF Example

Plugin Usage

Use the download button at the end of this article to download the plugin, then activate it to use. When using it, simply select the block you want to set the appearance for, and the area to set the style will appear on the right side. Modify it to achieve your desired display effect.

Plugin Download

You can use the button below to download the plugin, or directly search for the plugin title in the admin dashboard to install it.Download Link