Category Archives: WordPress

Gutenberg 3.90 Video Embed Test


Posted on
Leave a reply

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


Posted on
(Last updated: September 12, 2018)
Leave a reply

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.

New Font Poll


Posted on
(Last updated: August 7, 2018)
Leave a reply

I am trying to decide if I want to change the font I use. I was prompted to do so after trying out the new WordPress Gutenberg editor which happened use the font. I am also testing out this WP-Polls | WordPress.org plugin. Just more curious than anything. I also wonder how this will come across on my main website. Hmmm.

  • This paragraph is in the original font which was font-family: Helvetica, Arial, sans-serif;. The quick brown fox jumped over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
  • This paragraph is in the new font which is font-family: 'Noto Serif', Helvetica, Arial, sans-serif;. The quick brown fox jumped over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

I used the google webfonts helper to download all the necessary font files and CSS to host the fonts locally and not depend on a third party site.

Oh, I’ll make another post about my experiences with this new editor. 🤔

Which Font Is Better?

View Results

Loading ... Loading ...

Blog Updated to WordPress v4.9.8


Posted on
2 Replies

I just updated my blog to WordPress v4.9.8. “This maintenance release fixes 46 bugs, enhancements and blessed tasks, including updating the Twenty Seventeen bundled theme..” As always, I backed up my files and database first. I have automatic updates disabled so I can do this beforehand. So far, the update seems to have gone smoothly. 😃