Add simple controls for top/bottom margins, and border-radius

[KevinBatdorf]

This is really more of a theme or WP core thing, I think, but while WP is catching up I can add a few common styling tools tot he editor.

[adriancs2]

Here's an alternative solution:

I am able to edit the top/bottom margin and border-radius by inserting additional CSS with the help of a plugin call Simple Custom CSS and JS

insert the following CSS to the frontend:

.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px; /* Top Margin */
    margin-bottom: 25px; /* Bottom Margin */
}

.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
    /* Border Radius of the code block */
    border-radius: 10px !important;
}

[KevinBatdorf]

Yeah that will work for some people, but asking users to install a plugin and add CSS isn't really a good overall solution. Thanks for sharing though.

Is there a reason you used the plugin rather than just add CSS to your theme?

[adriancs2]

at the customize theme section [menu] > [appearance] > [customized]
The "Additional CSS" section allows adding custom css. The added CSS will remain as long as the same theme is using. Once the site change to a new theme, the added CSS will be reset. Though the CSS can be copied before theme changed.

Some theme doesn't have the section for "Additional CSS", for example:

• AploBlocks (https://wordpress.com/theme/aploblocks)
• Gutenify Biz (https://wordpress.com/theme/gutenify-biz)

I once tried edit code at "theme file editor", [menu] > [appearance] > [theme file editor]
once the theme files updated, the modification of code will be reset.

the plugin allows css for code block works outside the theme. it has less dependant and interference by the theme.