Adds BS container classes and max-widths to editor styles

[bacoords]

Description

This PR imports the grid/container classes into the block editor for development teams that are using things like .container in their custom blocks or ACF blocks.

This also maps the default container widths to the blocks using the same where(.wp-block) selector that core uses. So instead of all of the blocks having a different content width on the back and front ends, the block editor looks a lot closer to the frontend of the site.

Motivation and Context

Closes #2083

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Refactoring (a code change that neither fixes a bug nor adds a feature)
• Styling (changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc))
• Development (changes that affect the build system or external dependencies)
• Documentation (changes that affect existing inline documentation)

Checklist:

• I pulled my branch from develop.
• I am submitting my pull request to develop.
• I have resolved any conflicts merging this pull request would create.
• I have checked that there aren't other open Pull Requests for the same update/change.
• My code follows the code style of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• (Optional) My change requires a change to the documentation.
• (Optional) I have updated the documentation accordingly.
• (Optional) My change requires a change to the translations.
• (Optional) I have updated the translations accordingly.
• composer phpcs has passed locally.
• composer php-lint has passed locally.
• composer phpmd has passed locally.
• composer phpstan has passed locally.
• I have read the CONTRIBUTING document.

Related Issues or Roadmap requests

Further comments

[IanDelMar]

html :where(.wp-block) { won't work in older WP versions that still support IE. It's also not supported by all browsers that Understrap claims to support for Bootstrap 4:

understrap/.browserslistrc

Lines 12 to 28 in 546b350

	last 2 major version and not dead
	>= 0.01%
	# Explicit inclusions
	# See https://getbootstrap.com/docs/4.6/getting-started/browsers-devices/
	>= 1%
	last 1 major version
	not dead
	Chrome >= 45
	Firefox ESR
	Firefox >= 38
	Edge >= 12
	Explorer >= 10
	iOS >= 9
	Safari >= 9
	Android >= 4.4
	Opera >= 30

Source: https://caniuse.com/mdn-css_selectors_where

[bacoords]

Interesting. IE11 support was dropped in WP in 5.8. Currently we recommend 5.0 as the minimum version for this theme. According to stats about 82% of WP sites are at 5.8 or above.

It's also worth noting that Bootstrap 5 does not support IE, so technically theme does support it but only if the user doesn't switch to BS5.

So the options would be

• intentionally declare a higher supported version (5.8)
• rewrite the CSS (in the BS4 version) to be IE friendly but potentially different than how the block editor does it. This might require more testing since :where intentionally has a lower specificity and is easier to override (for example when the block editor inspector control is showing)
• remove this from the BS4 version and only include it in BS5

[IanDelMar]

I'd say let's add it as is. It will have no effect for those using browsers that do not support it and have a positive effect for everyone else which I assume is the majority of people. And open an issue for addressing that problem for browsers that do not support :where. This way, we do not hinder the release of v1.2.3 if it takes longer to find the best solution.

Also, I was wrong it's not Bootstrap that determines support but Bootstrap or WP depending on which of the two supports the more recent browser version. On the backend you have to use a non IE browser if you are working with WP 5.8+ even if you are running the theme with Bootstrap 4.