Remove block editor responsive embed styling #1683
Conversation
There's a wrapper for some embed-type blocks, like YouTube, Vimeo, and SoundCloud. It wraps the block in a div.wp-block-embed__wrapper And there's a style rule that gives this a padding-top. In AMP, this adds a large gap at the top of the block. So add a style rule that overrides this.
Steps To ReproduceThanks to @amedina for pointing this out.
https://native-ampconfdemo.pantheonsite.io/2018/11/30/embed-test/ |
…r as an <amp-frame> For example, Spotify and WordPress TV. The <amp-iframe> usually has a layout of relative.
Before
After
|
It should have been 'position of relative', not 'layout of relative'
assets/css/amp-default.css
Outdated
| * Override responsive embed styling from the block editor. | ||
| * @link https://github.com/WordPress/gutenberg/blob/9a16ac09ddff4b0bf12430d1426c4cfefa75b56d/packages/block-library/src/embed/style.scss#L52 | ||
| */ | ||
| body.wp-embed-responsive .wp-block-embed[class*="wp-embed-aspect-"] .wp-block-embed__wrapper::before { |
There was a problem hiding this comment.
The [class*="wp-embed-aspect-"] definitely isn't ideal. But it looks like it's needed to be more specific than the style rule it overrides, like:
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
padding-top: 56.25%;
}
|
Request For Review Hi @westonruter and @amedina, |
kienstra
changed the title
As Weston mentioned, we can simply strip the wp-embed-aspect- class.
Like wp-embed-aspect-21-9 As Weston mentioned, this approach will be better than overriding styling from this.
It doesn't simply remove the class from a rule, it removes the entire rule that has the class.
|
Location Of Change Hi @westonruter, Another benefit of your idea is it'll remove some unnecessary styling, freeing a little more space in
|
kienstra
changed the title
| * Remove any rule with a responsive styling class for blocks, which isn't needed in AMP. | ||
| * @link https://github.com/WordPress/gutenberg/blob/9a16ac09ddff4b0bf12430d1426c4cfefa75b56d/packages/block-library/src/embed/style.scss#L26 | ||
| */ | ||
| if ( preg_match( '/wp-embed-aspect-\S/', $selector ) ) { |
There was a problem hiding this comment.
This works, but I was thinking that the underlying class name could be removed from the block HTML element itself. The CSS would then be stripped as a matter of course by the tree shaker.
|
Here's how embed-type blocks look with this PR applied:
|
…n style sanitizer
|
Approved Hi @westonruter, It looks like I can't approve this because I opened the PR. With this PR, the |
| '<figure class="wp-block-embed"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>', | ||
| '<figure class="wp-block-embed"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>', | ||
| '<figure class="wp-block-embed wp-embed-aspect-16-9 wp-has-aspect-ratio"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>', | ||
| '<figure class="wp-block-embed wp-has-aspect-ratio"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>', |
There was a problem hiding this comment.
Nice, it's good to have a test for this.
div.wp-block-embed__wrapper, and there's a style rule that gives this a padding-top.