Lightning is Gutenberg Ready! Here are the Blocks...

Posted in Business, It's, Sub-Cat 1, Sub-Cat 2, Time on December 31, 2018
Tags: ,

Gutenberg Block Editor

This is a paragraph block. It is meant to hold normal text, and can even have a drop cap, which is cool only if your paragraph is long enough, otherwise it breaks. I can't say I'm a huge fan of this block editor, but what can you do... WordPress is to bloat like BuSo Lightning is to speed.

lambo
This is an image of an Aventador and a caption.

Images can be floated or centered, and in this case we have it centered. There is a full width option as well, which is nice.

Here's Our H2 Header

Looks like not too much changes. Our CSS still overrides everything it should, thank the high heavens. We better check out the rest of the blocks, though.

Above is a "Gallery." It worked out nicely and each image can have a tiny caption. So far we've used...

  • Title
  • Paragraph
  • Image
  • Header
  • Gallery

The lists look okay. I changed them for in the content to have a black dots instead of circles. Developers will know how to change it around the site if they want.

Many spaketh, saying that Gutenberg would suck. Thus far I'm feeling okay about it, as long as it means I don't have to write a bunch of new CSS

~ Ryuzaki, BuilderSociety.com

That's a quotation block. I'll have to add some CSS for that, but so far we're at a good 1 out of 8 pace. There's Audio and File blocks that I'm not even going to test since WordPress included some basic CSS for all of the blocks.

This an H3 Header

Here's an example of code being written. I'm making it long to ensure I get to see how it wraps around. Predictably it breaks the page so I'll have to fix that.
This is preformatted text. It's similar to code. I'm making it long again to ensure I get to see how it wraps around. Predictably this also breaks the page so I'll have to fix that.

"This is a pull quote. WordPress has decided that it should be big and pretty. I'm okay with this."

~ Ryuzaki, BuilderSociety.com

Below is a table. I don't recommend using them because unless you're willing to interact with the HTML of each one with inline CSS, then you'll never get them properly responsive and looking great at the same time. I've done the best I can for a generalized version for small tables.

Column 1Column 2Column 3
Row 1the rainisfalling
Row 2as I typethis sillyhaiku
Row 3all'swell in theworld

What other kind of blocks do we have in here... There's a whole ton of layout elements to play with.

I left the styling alone but added the CSS classes for the developers. You can yank the styling the theme already has in place for buttons and paste it in there to override it or create something entirely new.

You can do all kinds of crazy stuff with these new columns. Seems cool for all of you guys using visual editors in the past. Should make for some fun layouts.

Here's a second column. I'm going to expand it to three (can't figure it out!) and see how it performs responsively. I doubt I'll have to do much with it.

Here's a third column. I've styled all the way up to the full six columns, so don't be afraid to use them. They'll flow beautifully.

Here's a third column. I've styled all the way up to the full six columns, so don't be afraid to use them. They'll flow beautifully.

Here's a third column. I've styled all the way up to the full six columns, so don't be afraid to use them. They'll flow beautifully.

Here's a third column. I've styled all the way up to the full six columns, so don't be afraid to use them. They'll flow beautifully.

The worst part about some of these more involved blocks is going to be figuring out how to use them in this editor. All in all it's not been too bad though.

It's this guy again.

You can even drop widgets into posts now, like below with the most recent posts here.

Can't say I see a lot of uses for it, but you can do the same with shortcodes which is nice, not that you couldn't before.

And Now We Test the H4 Header

Here comes a Twitter embed to see how embeds look. This was a tweet about me crying about Gutenberg coming almost a year and a half ago...

That worked out well and I'm assuming YouTube and the rest look just fine. I'm not even going to test them. The WP-Embed has all of that laid out just fine.

This is a Hero Image

And That's a Wrap!

Well here we are. Gutenberg came, they changed the name to the Block Editor, and we're off to the races. I'll stick with the classic editor as long as I can after using this, but at the same time I'm more than willing to style these things for everyone else. Happy site building!

Leave a Reply

Your email address will not be published. Required fields are marked *