Tag Archives: Gutenberg

Gutenberg 3.90 Video Embed Test

I am making this test after reading: Topic: Big white space above youtube video since last update | WordPress.org. Below will be a YouTube video block.

This is the next paragraph after the video. With no caption looks like I need to add some bottom padding/margin on the front-end.

On further examination, the reason I don’t see the issue is due to the plugins I use and my Twenty Twelve theme which hasn’t been Gutenbergized yet.  Many of the following CSS classes simply aren’t defined on the front-end:

<figure class="wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-has-aspect-ratio wp-embed-aspect-16-9">
   <div class="wp-block-embed__wrapper">
      <iframe src="https://www.youtube.com/embed/UQyEcspdYfY?feature=oembed" allow="autoplay; encrypted-media" allowfullscreen="" width="625" height="352" frameborder="0">
      </iframe>
   </div>
</figure>

Currently, there is a WordPress/Gutenberg GitHub Issue concerning this.

Gutenberg 3.70 Centered Image Test

Update: Gutenberg 3.80 has corrected the centered image issue.

The following should be a centered Image Block

Card I got from my sister for Halloween 2017.


As you can see, it’s not centered.  Looks like the following style from Gutenberg is causing the image to move left:

.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
   display: table;
   margin: 0;
}

It’s overriding the <figure>’s CSS of:

.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

This is a known issue: Alignment: images cannot be centered on front-end [3.7] · Issue #9503 · WordPress/gutenberg

To work around it for now, you can put the following CSS into your theme’s style.css ( ideally a child theme ) or go the Dashboard -> Appearance -> Customize -> Additional CSS and add it there.

/* Gutenberg Tweaks */
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
   margin: auto;
}

Whenever they update Gutenberg to correct the issue, the above can be removed as it will be redundant.