{"id":168,"date":"2018-12-31T03:38:57","date_gmt":"2018-12-31T03:38:57","guid":{"rendered":"https:\/\/www.buildersociety.com\/busolightning\/?p=168"},"modified":"2019-01-23T22:25:41","modified_gmt":"2019-01-23T22:25:41","slug":"lightning-is-gutenberg-ready-here-are-the-blocks","status":"publish","type":"post","link":"https:\/\/www.buildersociety.com\/busolightning\/lightning-is-gutenberg-ready-here-are-the-blocks\/","title":{"rendered":"Lightning is Gutenberg Ready! Here are the Blocks..."},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"425\" height=\"280\" src=\"https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2016\/04\/68189738c7f5e5ba81535c4499cdf414_large-425x280.jpeg\" alt=\"lambo\" class=\"wp-image-136\"\/><figcaption>This is an image of an Aventador and a caption.<\/figcaption><\/figure><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Here's Our H2 Header<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2015\/02\/kitten-featured.jpg\" alt=\"\" data-id=\"73\" data-link=\"https:\/\/www.buildersociety.com\/busolightning\/dat-kitten\/kitten-featured\/\" class=\"wp-image-73\"\/><figcaption>Here's a cat.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"167\" src=\"https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2015\/02\/06-train-cat-shake-hands.jpg\" alt=\"\" data-id=\"148\" data-link=\"https:\/\/www.buildersociety.com\/busolightning\/so-attractive\/06-train-cat-shake-hands\/\" class=\"wp-image-148\"\/><figcaption>And another cat.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2015\/02\/superhero-featured.jpg\" alt=\"\" data-id=\"72\" data-link=\"https:\/\/www.buildersociety.com\/busolightning\/so-attractive\/superhero-featured\/\" class=\"wp-image-72\"\/><figcaption>And a cool cat.<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p>Above is a \"Gallery.\" It worked out nicely and each image can have a tiny caption. So far we've used...<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Title<\/li><li>Paragraph<\/li><li>Image<\/li><li>Header<\/li><li>Gallery<\/li><\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>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<\/p><cite>~ Ryuzaki, <a href=\"https:\/\/www.buildersociety.com\">BuilderSociety.com<\/a><\/cite><\/blockquote>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">This an H3 Header<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>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.<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">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.<\/pre>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>\"This is a pull quote. WordPress has decided that it should be big and pretty. I'm okay with this.\"<\/p><cite>~ Ryuzaki, <a href=\"https:\/\/www.buildersociety.com\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"BuilderSociety.com (opens in a new tab)\">BuilderSociety.com<\/a><\/cite><\/blockquote><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td><\/td><td>Column 1<\/td><td>Column 2<\/td><td>Column 3<\/td><\/tr><tr><td>Row 1<\/td><td>the rain<\/td><td>is<\/td><td>falling<\/td><\/tr><tr><td>Row 2<\/td><td>as I type<\/td><td>this silly<\/td><td>haiku<\/td><\/tr><tr><td>Row 3<\/td><td>all's<\/td><td>well in the<\/td><td>world<\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>What other kind of blocks do we have in here... There's a whole ton of layout elements to play with.<\/p>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">This is a button<\/a><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-columns has-6-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2015\/02\/superhero-featured.jpg\" alt=\"\" class=\"wp-image-72\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-large-font-size\">It's this guy again. <\/p>\n<\/div><\/div>\n\n\n\n<p>You can even drop widgets into posts now, like below with the most recent posts here.<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.buildersociety.com\/busolightning\/lightning-is-gutenberg-ready-here-are-the-blocks\/\">Lightning is Gutenberg Ready! Here are the Blocks...<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.buildersociety.com\/busolightning\/so-attractive\/\">Very attractive WordPress developer spent weeks working on a theme. When you find out why, it won't blow your mind.<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.buildersociety.com\/busolightning\/dat-kitten\/\">You\u2019ll more than likely believe what happened when this kitten played with a ball of yarn.<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.buildersociety.com\/busolightning\/purple-drank\/\">What happens when you mix peach drink powder with water? You won't be surprised.<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.buildersociety.com\/busolightning\/bye-bye\/\">Man\u2019s wife castrates him due to slow-loading WordPress theme. Here\u2019s her side of the story\u2026<\/a><\/li>\n<\/ul>\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">And Now We Test the H4 Header<\/h4>\n\n\n\n<p>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...<\/p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">WordPress 5.0 - The Incoming &#39;Gutenberg&#39; Disaster - <a href=\"https:\/\/t.co\/jWZZEIAlV2\">https:\/\/t.co\/jWZZEIAlV2<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/SEO?src=hash&amp;ref_src=twsrc%5Etfw\">#SEO<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Wordpress?src=hash&amp;ref_src=twsrc%5Etfw\">#Wordpress<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/InternetMarketing?src=hash&amp;ref_src=twsrc%5Etfw\">#InternetMarketing<\/a> <a href=\"https:\/\/t.co\/AEhgggbcSJ\">pic.twitter.com\/AEhgggbcSJ<\/a><\/p>&mdash; Builder Society (@BuilderSociety) <a href=\"https:\/\/twitter.com\/BuilderSociety\/status\/915677456769720320?ref_src=twsrc%5Etfw\">October 4, 2017<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-cover has-background-dim is-layout-flow wp-block-cover-is-layout-flow\" style=\"background-image:url(https:\/\/www.buildersociety.com\/busolightning\/wp-content\/uploads\/2015\/02\/lightning-featured.jpg)\"><p class=\"wp-block-cover-text\">This is a Hero Image<\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">And That's a Wrap!<\/h2>\n\n\n\n<p>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!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Images can be floated or centered, and in this case we have it centered. There is a <a class=\"read-more\" href=\"https:\/\/www.buildersociety.com\/busolightning\/lightning-is-gutenberg-ready-here-are-the-blocks\/\">Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":205,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1,23,24,22],"tags":[26,25],"class_list":["post-168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-its","category-sub-cat-1","category-sub-cat-2","category-time","tag-block-editor","tag-gutenberg"],"_links":{"self":[{"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/posts\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":42,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/posts\/168\/revisions\/227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/media\/205"}],"wp:attachment":[{"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.buildersociety.com\/busolightning\/wp-json\/wp\/v2\/tags?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}