All Theme Variations: Add a 1/3 + 2/3 custom class for the Columns Blocks

[allancole]

Add a 1/3 + 2/3, custom column class for use with the Columns Block in Theme Variations.

This will allow the Contact Form to display properly next to the Business info.

Currently looks like this:

After fix it should look like this with a Custom Class. (Notice how the contact form starts more to the left):

Suggested Fix

Add a set of custom classes to allow custom column proportioning. The custom class should only be applied when the Columns has the .has-2-columns class.

• .columns-proportion-one-third {} (1/3 + 2/3)
• .columns-proportion-two-thirds {} (2/3 + 1/3)

This is solution may be replaced by built-in solution later on: https://github.com/Automattic/samus-private/issues/181#issuecomment-481007519

[allancole]

I’m thinking the best way to implement this is via the Block Styles API: https://themeshaper.com/2019/02/15/customizing-gutenberg-blocks-with-block-styles/

Ideally, the code would exist in Twenty Nineteen, but since we can’t push this change immediately to the /core version, we have to apply the fix into each the child theme individually.

[allancole]

The custom class should only be applied when the Columns has the .has-2-columns class.

It turns out that if we use the Block Styles API to achieve this, it may be confusing for users. If someone had a 2/3 block style active, it’d only actually impact the two column variation. There’d be no way for them to know that the 2/3 setting would go away when they switch to 3-columns or 4-columns.

It may make sense to wait for this Columns Block enhancement to get merged in:
WordPress/gutenberg#15499

What do you think, @iamtakashi ?

[iamtakashi]

Yes, ideally, we want to wait for the enhancement :), but I suspect it takes time to land in WP.com. The idea I have is far from perfect but much simpler. With the custom CSS class contact-section that we've added to the column block in the template, we'll target the specific column block and change the column widths to be 4:6 in the CSS.

Yes, it's not ideal, but this only meant to be an interim solution until the enhancement becomes available to us. The custom class will stay in the section, so when a user adds the section it will be 4:6 as long as the child themes carry the style with the CSS class.

[allancole]

Gotcha. Yeah, I think you’re right that the ideal solution may take a while to get into core. I also don’t think we should use the Block Styles API for this as I think it’ll cause more confusion for customers than its worth.

Instead we should do it more-or-less manually and add a custom 2/3rds utility class to all the theme variations. Thinking toward the future, the ideal fix PR seems like it will add inline CSS to the block markup which will override our special class so there shouldn’t be a conflict with our class when it’s released.

I’ll work up a PR :-)

[iamtakashi]

Uneven column width option arrived sooner than expected! Closing.