Getting the Content Container

The goal is to get the editor to reflect the widths used for the different Content Container settings. Since the classes that define those settings in the front end are not output in the editor (since it’s outside the scope of the post HTML), I’m using editor styles to add the max-width to the editor-styles-wrapper class. That seems to do the trick, but I can only set one width for every setting unless I can tell the difference between the different Content Container settings in the editor.

Yes, the default GP styles do. But I added some custom CSS to tweak the container settings. I’m just looking for a way to get those tweaks into the editor to better match the front end. Does that help explain it better?

For example, tweaking the “Contained” width:

.contained-content .entry-content {
	max-width: var(--contained-width);
}

Trying to translate something like that to the editor so it only takes effect with the “Contained” setting.

The editor does not have either class in your CSS.

Correct. I’m trying to do something equivalent in the editor. I can conditionally add CSS to the editor that will do what I’m looking for, but I’d need to know which content container setting is in use by the post/page.

Do you want to adjust the editor-styles-wrapper if the page’s content container being set to contained?

Yes, that is something I’d like to do.

By the way, do you know that you can set specific contained width via a layout element?

Yes. Though one limitation of that is, it requires the width to be in pixels. We use rem for most things these days. I’m also trying to set things up so that most of the time deviating from the default layout can be done more on a page-by-page basis instead of using the Elements way due to translations. Setting up an Element layout to be used across all the translated versions of a particular page is a rather annoying process. It’s much easier to specify it at the page level in the block editor because that automatically carries over to any translations of that page.

Thanks for your help.

That almost worked. I added [selected="selected"], otherwise it was doing it for every page regardless of selected layout.

.block-editor-page:has(option[value="contained"][selected="selected"]) .editor-styles-wrapper {...

That’s a nice solution because I can keep the code in the editor CSS file I’m making. Thanks!

That being said, is there a way to make it work when a layout Element is used as well (as of right now it doesn’t because the layout Element overrides the editor option). If we are making an entire post type have a certain container setting, we’d probably use a layout Element (making it post-type-wide doesn’t have the same translation issue of specific pages). Do you have any insight into how GeneratePress finds the layout that applies to a post?

Thanks for your help.

Unfortunately, I don’t see a src directory included with the plugin package. I’m assuming dist/block-elements.js is the compiled version of it (which I did stumble upon). But since it’s minified, it’s really hard to read. Although even if I could, I don’t think I’m familiar enough with React to understand how to use what I find. A PHP solution would be more in my realm of knowledge.

So maybe there just isn’t a feasible way to do what I’m looking for, which isn’t the end of the world since it just affects the editor. Thanks for your help, though.

Thanks!