Tag Archives: CSS

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.

Blog Upgraded to WordPress v3.5 and Twenty Twelve Theme

I’ve upgraded my blog from WordPress v3.4.2 to v3.5 and changed over to the new default Twenty Twelve theme within the last day or so. The process went as follows:

  • Backed up the existing file structure and database on both my local development copy (I have Apache, MySQL, and PHP installed on my PC) and the one you’re viewing now.
  • Updated a couple of my plug-ins that had new versions out.
  • Updated the Twenty Ten and Twenty Eleven themes that had newer versions (I suspect to work better with the newer version of WordPress).
  • Ran the automatic upgrade to go from WordPress 3.4.2 to 3.5 which took around 10 seconds to complete.
  • Did my usual modification of the /wp-includes/vars.php file to force $is_apache to true so I don’t have to rely on the software to detect something which I know is true:
    // Server detection

    /**
     * Whether the server software is Apache or something else
     * @global bool $is_apache
     */

    // $is_apache = (strpos($_SERVER['SERVER_SOFTWARE'], 'Apache') !== false || strpos($_SERVER['SERVER_SOFTWARE'], 'LiteSpeed') !== false);
    $is_apache = true;

As far upgrading the WordPress core itself, that’s really all there was to it. The rest centered around working with the new Twenty Twelve theme and tweaking it to my liking. The following outlines some of the major points during my initial testing and theme tweaking:

  • The first thing I did was create a Twenty Twelve child theme and placed in an appropriate style.css (you have to) and copied over the functions.php file from my Twenty Eleven child theme. I also copied over the Twenty Twelve’s header.php and footer.php files as I knew I would be modifying them.
  • Activated my new child theme and looked at the main page. This first thing I noticed right off was that each post had a duplicate image. There were two Happy Thanksgiving images, two Veterans Day images and so on. Went poking around on the WordPress.org forums and found the reason. I needed to modify the theme’s content.php file and comment out (or remove) a line that contained the_post_thumbnail(); as follows (I modified the copy that I placed into my child theme):
17
18
19
20
21
22
23
24
         <?php
         // this was causing the featured image to show in the post:
         /* if ( ! post_password_required() && ! is_attachment() ) :
            the_post_thumbnail();
         endif;
         */
?>
         <?php if ( is_single() ) : ?>
         <h1 class="entry-title"><?php the_title(); ?></h1>

That corrected the duplicate image problem. Since I had included the post’s featured image within the post’s content, this was causing it to display again.

During this image testing, I discovered that my Gallery3 Picker plug-in had stopped working. It was not showing a Gallery3 tab in the add Media window. As it has been 2 years since any updates were made to it and the fact that I really didn’t need it. I just got rid of that plug-in.

At this point things seemed to be OK and I began to modify the child theme’s header.php and footer.php files and tweak the theme’s options (background, header, menus, widgets, etc) and CSS to suit my needs. It was during this that I noticed a lot of words at the end of a line of text were being broken up with hyphens. I’m thinking to myself, “What’s up with that!?”. I right-clicked where the text was and inspected the element to see what CSS was associated with it (using Firefox 17.0.1 in Windows 7 Pro 64bit) and this is what I saw related to word-wrapping:

.site-content article {
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

Well, I was having none of this so I added the following to my child theme’s style.css file to over-ride it:

.site-content article {
   word-wrap: break-word;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
}

That stopped the hyphenations from occurring while still breaking up really long words that are too big for the width of the post’s content. For more information about this hyphenation business: Mozilla Development Network: hyphens.

That’s been the major stuff worth noting. The other CSS tweaks for font colors and such are just personal taste and everyone’s going to have their own opinion on what looks the best. 🙂 If I discover some other bizarre thing related to the upgrade or new theme I’ll make a post then.