code-syntax-block icon indicating copy to clipboard operation
code-syntax-block copied to clipboard

Add proper afterblock spacing

Open LinuxMeow opened this issue 3 years ago • 2 comments

Non-consistent separation

I had the issue with the plugin in a sense of incorrect separation between the blocks.

Issue description

While adding the code block in the post, it would properly be placed in the document after the previous paragraph for example. While adding the next paragraph below the code block would cause the paragraph to be literally glued to the code block without any visual separation in a form of a bigger line-height between elements.

Solution

While there is a possible solution in a form of adding an empty block just below the code block, I feel like it is not the best practice.

Environment

Wordpress version: 5.9 Code syntax block version: 2.2.0 Theme: Neve / Video Blog (Starter theme) / (Version 3.1.4)

LinuxMeow avatar Jan 31 '22 11:01 LinuxMeow

Random user here-- could you simply add some bottom margin to the code block?

Here I am modifying the default code-syntax-block/assets/prism-a11y-dark.css:

/* Code blocks */
pre.wp-block-code {
	background: #2b2b2b;
	padding: 1em;
	margin: 0.5em auto;
	overflow: auto;
	border-radius: 0.3em;
        margin-bottom: 30px;
}

amosborne avatar Feb 05 '22 18:02 amosborne

I believe the recent versions of WP include a blockGap concept, I need to read up and figure out how to use that as the default.

mkaz avatar Jun 12 '22 03:06 mkaz