Parallax Pro: pull-left/pull-right not working with Gutenberg

[Hyperbambus]

Hey everybody,

I am currently considering to make the switch to the Gutenberg editor. The Studiopress website, after all, states that Genesis and the themes are compatible with it.

Yet I cannot figure out how to get the Parallax Pro theme's "pull-left" and "pull-right" image classes to work. In the old editor, they are used to make images stick out from the text as visible on this site in the demo.

Adding either one of the classes to an image in the Gutenberg editor has no effect at all, regardless of whether the image is part of a text block or a block in its own right.

Does anyone know whether there's a solution for this problem?

[Victor Font]

The alignleft and alignright classes work fine for me in Gutenberg.

See this tutorial. It may help you: https://gogutenberg.com/blocks/image/

As for the pull-left and pull-right classes, you can add them as additional classes in the block's additional content classes area. You'll have to make a small change to style.css however.

Additional classes in Gutenberg are added to the figure markup that surrounds the image, not the image itself. Therefore, in style.css change the pull-left and pull-right classes to look like this:

.full-width-content img.pull-left,
.full-width-content figure.pull-left img {
	float: left;
	margin: 0 40px 40px -200px;
}

.full-width-content img.pull-left,
.full-width-content figure.pull-right img {
	float: right;
	margin: 0 -200px 40px 40px;
}

For each of the CSS classes above, the original class (pre-Gutenberg) is the top line. The second line is class for Gutenberg. You'll want to have both for backwards compatibility.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Hyperbambus]

Thank you, Victor! Adding these lines solved the problem.

Do you happen to also have at hand the code necessary for Gutenberg's align:wide option to work with Genesis?

[Victor Font]

For alignwide and alignfull, try this added to style.css:

.entry-content .alignfull,
.entry-content .alignwide {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts