Seems like it works fine to me with the 2017 theme, however embeds in general do require the theme to correctly set their content-width data, so that the embed system in WordPress knows how wide the video needs to be.
Basically, for embeds, WordPress asks YouTube to give it the proper iframe code with the right width that WordPress sends it. For the most part, YouTube can return most widths, and will do so. But the theme has to tell WordPress what the proper width is.
Try it with some default themes, see if it works there.
Note that the embed system being used in Gutenberg isn’t much changed from the existing embed system. If you paste a Youtube link into the normal editor on a line by itself, you should get the same results.
Thread Starter
gruts
(@gruts)
I tried it with the 2017 theme (again). The video displays full-width, so, as I said above, it’s impossible to tell whether it’s centering or left-aligning (because both look the same at 100% width).
Thread Starter
gruts
(@gruts)
… The theme with which I’m experiencing the problem defines its content width as follows:
function rix_content_width() {
$GLOBALS['content_width'] = apply_filters( 'rix_content_width', 640 );
}
add_action( 'after_setup_theme', 'rix_content_width', 0 );
…Is this not good enough?
That would set the width to 640 pixels, so if that’s the correct width for the theme, then that would be fine.
Thread Starter
gruts
(@gruts)
I’m totally confused, now. What if the theme has different ‘correct widths’ depending on what device you’re using? i.e. If it’s responsive?
Then the theme would need to set a different width when the width was different, or do something with CSS to adjust properly.
Thread Starter
gruts
(@gruts)
Seems to me Gutenberg is going to break a hell of a lot of themes.
Is there a list anywhere of all the things theme authors need to check to make sure their themes are Gutenberg-compliant?
Thread Starter
gruts
(@gruts)
…Incidentally, in terms of the options you suggest for fixing this:
1) the theme would need to set a different width when the width was different
My understanding is a WordPress function cannot detect the max/min width of the viewing device (unlike with CSS’s @media calls), so how could I possibly know what width to set it to?
2) …or do something with CSS to adjust properly.
But the HTML jiggerpokery that’s automagically returned when you insert a YouTube video contains *hard-coded* widths and heights, so I don’t see how CSS can fix this.
But the HTML jiggerpokery that’s automagically returned when you insert a YouTube video contains *hard-coded* widths and heights, so I don’t see how CSS can fix this.
While the iframe that YouTube returns does have a hardcoded width, CSS can takes precedence over those sizes. Setting the width and max-width of the iframe itself will resize it on the page.
Thread Starter
gruts
(@gruts)
…OK, thanks very much. I finally seem to have managed to fix this issue with the theme I’m using. It was a lot of work.
Is there any published advice for authors of existing themes on the changes they might need to make to ensure Gutenberg’s new features don’t break things? For example, I’ve just discovered the new columns block feature is overflowing the edges of my amended theme. More work!
I do take exception to how complicated Gutenberg is already making things. It has some very nice features, but they won’t be of interest to many existing users who just want to bang out text with a few images. Indeed, it will slow them down considerably.
Gutenberg should remain an optional plugin. (But, obviously it won’t, because someone seems hell-bent on railroading it through.)
https://wordpress.org/gutenberg/handbook/extensibility/theme-support/ is a good starting point for theme developers wanting to take full advantage of the new editors features.
