Today, I tried to add an image to one of my posts. The image is aligned left and the blockquote to the right of it should indent accordingly. You can see how it appears by scrolling down to the quote opposite the first image here (please note, this post is on my staging site and you’ll need to be using a Mac/PC with quite a wide window) .

Scroll down to compare that with the quote opposite the second image. Here, the quote appears as it should do – shifted over to the right together with the quotation mark. By contrast, while the quote opposite the first image has shifted over to the right, the quotation mark hasn’t.

Existing layouts all appear to be fine, this happens only with items I add or change. I’m guessing that this is caused by some change in the block editor.

I’m configuring quotes to the right of images by an additional CSS class: blockquote–right. It is defined like this:

/* Correct blockquote being too close to image */
.blockquote--right,
.ul--right{
	position: relative;
  	left: 40px;
}

Here is the rest of my blockquote CSS:

/* Quotation mark before block quotes */
blockquote::before {
	content: "\201C";
  	color: #6b6b6b;
	display: block;
 	font-family: "oswald" !important;
	font-size: 70px;
	height: 0;
	left: -40px;
	position: relative;
	top: -20px;
}

/* Adjust block quotes */
blockquote {
  	color: #6b6b6b;  
  	display: block;
  	margin: 0px 15px 0 0 !important;
	padding: 0px 40px;
}

/* Option to wrap blockquotes around images */
.blockquote--flow {
    overflow: initial;
}

Please could someone help me to understand what is causing the problem I’ve described and how to resolve it.

And any way to put headings in a block quote?

How can I fix this problem? Bonus points if anyone can explain to me why Gutenberg treats individual paragraphs as the base unit instead of larger units.

In other words, I see Gutenberg styles in the editor but on the front end, only the Neve style works. The default WP style is much better imo than the double grey lines. Plus, I want to be able to see the correct styles applied while I’m writing.

Can you please show me how to disable the Neve theme styling for Blockquotes and Pullquuotes so that I can use the default from Gutenberg?

I have tried this snippet, but it did not work for me.

function disable_neve_block_styles() {
wp_dequeue_style( ‘wp-block-quote is-style-default’ );
}
add_action( ‘wp_enqueue_scripts’, ‘disable_neve_block_styles’ );

Suggestion: Ditch the Neve styling of Blockquotes alltogether and just rely on the Gutenberg fallback.

This one is in a post from two years ago on this forum for customizing a heading, and it lists three fonts, not just one:

body h1{
font-family: Raleway, Helvetica, Arial, sans-serif!important;
font-size: 32px!important;
color: red!important;
}

This is a CSS for altering blockquotes but it, also, has three fonts in it:
blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
}

I don’t understand why there are three fonts for heading 1.

Maybe for the quote, one is for the style of the quote at the top, one is for the body and one is for the citation line….but I’m confused.

Also, how do I change the default style for links? (using text-decoration:none, rather then underline). Tried to add it in my style.css, but it doesn’t take effect?

As you will notice, the quotes near the bottom of the page are much smaller than the regular text, which I increased the size of in the editor to 22. How can I make these quotes the same size? Can I make them a different font as well?

When drafting a post in the editor, the blockquotes appear as shown on all the gutenberg media, however when I click ‘preview’ for the post, the blockquotes revert to my theme’s blockquote style.

I prefer the aesthetic of Gutenberg’s blockquote, and would like my blockquotes to appear as they do in the editor.

How can I achieve that? Is my theme overriding Gutenberg’s style? Or is there a way to inherit the Gutenberg blockquote style using some CSS code (note: I’m not looking to use CSS code to create a blockquote element that looks similar, I want to inherit the exact one pictured in their editor).

Thanks!
Oshan

The issue is that when the page renders multiple blockquotes, after the first blockquote it jumps immediately to the second quote, cutting out the first quote and all the text between the first and the second.

Can you help fix this problem?