Atomic Blocks, August 2018 Version

I tested Atomic Blocks on this site before. New blocks have been added since, and I presume the earlier blocks have been updated, so I’m making a new post about them. (Also, last time I tested them was with the Twenty Seventeen theme. I’m now using the Atomic Blocks theme.)

Atomic Blocks Post Grid, Grid View

Welcome to the Gutenberg Editor

Of Mountains & Printing Presses The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with…

Continue Reading

Atomic Blocks Post Grid, List View

Welcome to the Gutenberg Editor

Of Mountains & Printing Presses The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with…

Continue Reading

Atomic Blocks Button

This is a button created with Atomic Blocks. It takes you to the Atomic Blocks website. You can modify shape, size, and text and background color.

Atomic Blocks Testimonial

I’m writing this testimonial because I think the Atomic Blocks plugin and theme are awesome! Except I really think testimonials should be a post type and not a block. I really do.

avatar

Sallie Goetsch

East Bay WordPress Meetup Organizer

Atomic Blocks Profile Box

Profiles also seem to be popular as custom blocks, but they seem like another thing that really ought to be a post type, at least if you have more than a few.

avatar

Sallie Goetsch

WP Fangirl

Sallie Goetsch (rhymes with ‘sketch’) started working with WordPress in 2005. We’ve come a long way, baby.

Atomic Blocks Notice

Notice! You can’t dismiss me.

I think I like the basic style better than the alert from CoBlocks. Would I use a notice block? Not often, except for things like “Hey, this post is old!” notices, and those are inserted programmatically.

Your choices are for dismissable and non-dismissable notices. I made this one non-dismissable, even though that’s terrible practice.

Atomic Blocks Drop Cap

I’m not at all sure why we need a custom drop cap box when drop caps are an option in the default paragraph blocks. It’s interesting to see how it handles the contraction. You can switch styles for your drop cap: just the letter, a dark square background, or a border.

Atomic Blocks Spacer

This is the sort of thing people seem to want, especially if they’re not handy with CSS: blocks to add horizontal or vertical space. This spacer block lets you determine height and whether there’s a divider. It’s like a customizable horizontal rule tag.


Atomic Blocks Accordion

Click Me to Open

Interestingly, the Atomic Blocks accordion has fewer style options than the CoBlocks accordion. Your choices are font size and whether the block is open by default.

Atomic Blocks Call to Action

This is pretty customizable: background color or image, title size, text size, text color, button color/size. Pretty much all you need in most CTAs.

Call to Action

Take some action, dang it!

Atomic Blocks Sharing Block

I like this better than the CoBlocks version, though I still think sharing buttons are not something you should have to manually insert. Of course, if we’re talking about building templates made from blocks, this would be a block you’d include in a template.

Atomic Blocks Container

Container blocks are an important concept if you want to be able to put blocks next to each other. The core team is working on doing this with column wrappers, but I’m not sure it’s working. (I’ll do a core blocks test after lunch.)

Container Heading

This is a full-width paragraph inside a container. You won’t know it’s full-width until I add some more words, though.

This is a paragraph inside a column. The old text column block seems to have gone away. So we now have a column container inside an Atomic Blocks container. We’re going to reach Inception pretty soon.

The columns block basically lets you create a single row with the number of columns you want, whereas the container block lets you include multiple rows for one block and move it around.

Ever expanding fibonacci spiral made from a daisy.

Here’s a nice little GIF to illustrate the recursion happening here.

Cover Image Inside Container

These are the CoBlocks blocks

CoBlocks is one of the custom block plugins I’ve installed on this site. The problem with installing a lot of custom block plugins is that it gets difficult to figure out which blocks come from where when adding a block–not to mention the fact that there are more blocks to hunt through, an issue I’ve also noticed with page-builders.

CoBlocks Author Block

avatar

This is a CoBlocks author block

Sallie Goetsch

Sallie Goetsch (rhymes with ‘sketch’) has been organizer of the East Bay WordPress Meetup since 2009.

Follow

CoBlocks Dynamic Separator


You get your choice of heights and between line and dot styles, with different colors for the lines.

CoBlocks Accordion Block

Accordion Title

Accordion Text. Note that it appears you have to add a new block for each accordion item, but it’s a fairly slick experience to create.

CoBlocks Alert Block

Warning!

This is a CoBlocks alert block. You can set float/width and background and heading colors. And a border. But not, apparently, text sizes or icons, which I’ve seen in some alert blocks. Also, the block title isn’t an actual heading.

CoBlocks Click-to-tweet Block

It’s astonishing how many people confuse “Without knowing code” and “Without knowing anything.”

CoBlocks Gif Block

Grumpy Cat licking her chops

I’m not really a GIF person, but I am a Grumpy Cat fan. (The block lets you insert Gifs from Giphy.)

CoBlocks Gist Block

I’ve already tested the separate Gist block from Pantheon. CoBlocks also has a Gist block, and it works just fine.

CoBlocks Highlight Block

Assuming I wanted to highlight something, I could use a highlight block. You can adjust the text color and highlight color.

CoBlocks Pricing Table

Plan A

$
99
  • 1 site

Plan B

$
199
  • 5 sites

I’m trying to remember where I last used a pricing table, and it’s possible that I actually haven’t. However, they seem to be popular thing with people who are selling packages, either software or services. There are some quirks with this one: only two columns, and some CSS issues with the .alignwide class.

CoBlocks Social Block

I’m not sure whether social sharing links should really be a block. They seem like something that it’s better to add in site-wide instead of inserting in each post. Also, it would appear you can set one size for all icons, but not per-icon colors.

Conclusion

The CoBlocks blocks appear to play well with the Atomic Blocks theme and not to mess up the default WP blocks.

GitHub Gist

This is a block from Pantheon. It’s designed to show the content of a GitHub Gist. Fortunately, I have one to use as a test case.

It looks pretty weird in the editor because it displays the Gist content in a proportional font. On the front end, however, the Gist looks just fine.

Tiles

There’s a block from Sword Layouts called “Tiles.” It creates, or is supposed to create, a series of alternating image and text blocks—what I call a “checkerboard” layout. I’m not sure whether it’s meant to be used within a post or within a page, or it doesn’t matter, though it seems a bit strange to put in a post. Since a post is what I’m writing, though, here goes.

This is a photo of a re-creation of Gutenberg’s printing press, the first of its kind. Interestingly, as I type, the image changes size and shape. I think there may be a flexboxy thing happening here.

To put the image on the other side of the text, switch on the “Invert Layout” block setting. (That’s the only setting.) Images and text do not alternate automatically: you have to choose whether to do so. Also, each image/text row is a separate block.

All right, let’s publish this puppy and see what happens. It works–but it’s definitely not meant for use in such a narrow content column!

Tabbed Block Created with Advanced Content Blocks

You’d think maybe there would be (or that there soon will be) more than one kind of block available in a plugin called “Advanced Content Blocks,” but so far it’s only the one. But tabbed content is pretty popular, so I installed it to see how it works.

  • Tab 1
  • Tab 2
  • Tab 3

Tab content, which is WYSIWYG

More tab content. You can move tabs left or right once you create them.

Perhaps because the tab content is WYSIWYG, there are no settings for the block, though you can add a CSS class.

Atomic Blocks

There’s an Atomic Blocks theme as well as the plugin, but I wanted to test the plugin on its own.

Atomic Blocks Testimonial

Gutenberg changed everything. WordPress has always been about websites, but it’s not just about websites. It’s about freedom, about possibility, and about carving out your own livelihood, whether it’s by making a living through your site or by working in the WordPress ecosystem itself.

avatar

Matt Mullenweg

Co-Founder of WordPress

Atomic Blocks Profile Box

avatar

Sallie Goetsch

East Bay WordPress Meetup Organizer

Sallie has been online since 1985, built her first website in 1994, and discovered WordPress in 2005. She’s been the organizer of the East Bay WordPress Meetup in Oakland since 2009.

Atomic Blocks Notice Block

Atomic Blocks Notice

Notice! This is a notice box. You can select the color of the notice, title, and text, and choose font size.

Atomic Blocks Drop Cap

Do we need an atomic blocks drop cap? There’s a drop cap setting in WP’s default paragraph block, and when I try to insert the Atomic Blocks version, I get an error.

Atomic Blocks Accordion

Accordion Title: Click to Expand

If you were using this for a FAQ section, you’d put the question above and the answer here.

Atomic Blocks Spacer

This block adds a vertical spacer, with or without a dividing line. You can set the height of the spacer and the color, weight, and type of dividing line. It’s basically a slicker version of an <hr> tag.


Atomic Blocks Button

You can set the button size, button background and text colors, and shape (square, square with rounded corners, and “circular,” which doesn’t actually make a circle, but rather a capsule-shaped button.

And that’s it for the Atomic Blocks. Let’s see what this looks like on the front end.

Blocks from the Advanced Gutenberg Blocks Plugin

Warning

Some of these blocks appear unfinished (the Ad Banner and Ad + Text blocks don’t let you configure the ad), and some work in the editor but not on the front end (Posts, Google Maps).

Ad Banner Block

There doesn’t seem to be a way to actually edit the content of the ad. Not finished? Plugin conflict?

Alert Block

Advice

This is an alert block. You can add several kinds of these: Advice, Avoid, Warning, and Information.

Plugin Info

If you want to display info about a plugin in the WordPress Repo (say, one that you authored), this block will let you.

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks bring awesome blocks for the new WordPress editor, for a real WYSIWYG experience

By 

Ad with Text (or Text with Ad) Block

If you wanted to insert a square ad floated next to your content, you could use this Text+Ad block.

It keeps adding paragraphs until you run out of space…or maybe indefinitely.

It doesn’t seem that you can do the usual <enter> creates new block thing with this particular block.

Website Preview

Embeds a nice-looking preview of a web page, same as you’d see if you shared it on Facebook.

East Bay WordPress Meetup - Monthly gathering of WordPress junkies in the East San Francisco Bay

East Bay WordPress Meetup – Monthly gathering of WordPress junkies in the East San Francisco Bay

Monthly gathering of WordPress junkies in the East San Francisco Bay

https://eastbaywp.com

Post Block

This block shows you another post on your own site. Except when it doesn’t. (It looks fine in the editor.)

This is what the post block above should be showing.

Google Maps Block

Like anything else that uses Google Maps, it requires a Google Maps API Key. You need to enter that in the plugin settings.

And this is what the Google Maps block should be showing.

AGB Testimonial Block

Gutenberg changed everything. WordPress has always been about websites, but it’s not just about websites. It’s about freedom, about possibility, and about carving out your own livelihood, whether it’s by making a living through your site or by working in the WordPress ecosystem itself.

Ultimate Gutenberg Blocks

I’ve added the Ultimate Gutenberg Blocks plugin from Stackable, which creates several new block types. (I’ve also added some other custom block plugins, but will test them in other posts.) Here are the different block types and the styles that the plugin provides.

Ultimate Blocks Blockquote


It’s okay to acknowledge that life can get complicated, but we mustn’t forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.

Ultimate Blocks Testimonial

Ben Adams

Founder

Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.

Ultimate Blocks Team Member

Sallie Goetsch

Meetup Organizer

Sallie has been organizer of the East Bay WordPress Meetup since 2009.

Ultimate Blocks Number Blocks

01

Registration

Basically, this block has an editable number instead of a photo or icon, with a title and a text area. I don’t think it auto-increments or anything. Nope (I tried adding a second one and it still said “01.”

 Ultimate Blocks Image Box

What’s an image box? It’s an image that shows a title and subtitle on hover.

Espresso

For when you need extra pick-me-up

Ultimate Blocks Count-Up

Happy Customers

12,345

and counting

Give it the final number, and it will run through the count. Though when I go back to edit the post, the number field isn’t there. Ooops.

Ultimate Blocks Video Pop-up

People do like to have videos pop up and play in lightboxes. It’s not a feature I use very often myself, though.

If you use a video from YouTube or Vimeo, just enter its ID, not its URL.

Ultimate GB Blocks Pull Quote

You can set the text color and border color with this block, but really, it’s a styled blockquote, not a pullquote–the thing that makes a pullquote pull is that it sits at least partly outside the content area, to the left or right.

Ultimate GB Blocks Expand/Show More

This is “less text,” similar to an accordion title.

Show more

Ultimate Blocks Notification

Everyone and his brother has created a notification block, each a little different. This one has settings for type (success, error, warning, information) and for dismissability, as well as for background and text color.

Success! You did everything right.

Ultimate Blocks Call to Action Block

This block includes a headline, text, and a button with a link field. I tried to edit the button text, and couldn’t. The button isn’t showing up at all on the front end.

Get More Blocks Like This

Get Stackable: Ultimate Gutenberg Blocks today.  Apart from adding new blocks, it gives Gutenberg users more options and settings to tinker with, expanding Gutenberg’s functionality.

Ultimate Blocks Spacer Block

This is a vertical spacer. The only setting is for height. I added one because otherwise there was no distinction between the real CTA block and the screenshot showing what it should look like. Now there’s extra space on account of this heading and paragraph.

This is what the CTA block is supposed to look like.

Testing Gutenberg Theme Support

I just added theme support for Gutenberg's wide image feature, and I'm writing this post to see whether it works, and also just to see how easy it is to simply sit and write something in Gutenberg at its current version. (What is its current version? 1.81)

Read More

Post with ALL THE BLOCKS

I'm going to insert one of every block type. I know they don't all display properly on the front of the site. The first thing I'll insert is a more tag, since it's going to be long.

Read More