Twenty Seventeen: Blockquotes aligned right are not behaving as expected

[laurelfulford]

When you align a blockquote to the right and have assigned sidebar widgets, Twenty Seventeen should be placing the blockquote fully in the right sidebar.

This currently isn’t working until you resize the browser window. There’s some JavaScript in the theme used to make sure the sidebar isn’t too long before moving over the blockquote - right not it looks like it's only firing on resize, but not on page load.

Here’s how a single post currently looks with an aligned right blockquote and a sidebar widget:

When the browser is resized, the blockquote is moved to its correct location:

[laurelfulford]

Add fix so also fires JavaScript event that determines if blockquote can be moved on page load.

[desrosj]

I'm having some issues testing this. Before applying the patch, I can't get blockquotes to move to the sidebar at all (even when resizing my browser window). The patch in my testing does not fix the alignment in either situation (on load or when resizing).

[laurelfulford]

Thanks for testing this, @desrosj!

It looks like the issue is that this ticket only covers the behaviour of the blockquote in the classic block or classic editor.

The quote block should ideally be styled/act the same though -- that's a good catch! I've created a new issue for that here: https://core.trac.wordpress.org/ticket/46049

Does the patch work when using the classic block?

[desrosj]

I tried creating a new post using the Classic Editor plugin and with the block editor using a classic block. Both produced the same results I detailed above.

[laurelfulford]

Thanks @desrosj!

In testing this again, I was flubbing the actual steps to recreate these styles -- it looks like they do work on the quote blocks, too.

For the classic editor/block, you have to add the blockquote, then edit the HTML to add class="alignright".

For the quote block, rather than aligning the text right (which I was doing too!), you have to add the class alignright to the "Additional CSS Class" field under the Advanced panel.

Let me know if this still doesn't work -- it's definitely not helping that I've confused the steps to recreate, too!

[desrosj]

@laurelfulford Gotcha! Ok, I am able to reproduce this now.

Your fix works as expected!

I did notice a separate issue that I will open a new ticket for. When using the Customizer, if a new widget is introduced into the sidebar, it is not rechecked for "emptiness".

[laurelfulford]

In 44679:

Twenty Seventeen: Update blockquote alignment on load.

The theme uses JavaScript to check if a right-aligned blockquote is below the sidebar content before pushing it outside of the content area. This was originally only firing on browser resize.

Fixes #40103.

[laurelfulford]

Thanks for the testing, @desrosj!