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.

This is a paragraph block. When you press "enter", a new paragraph block is added.

This is a text column block with two columns. (Minimum 2, maximum 4). You can add a CSS class to the block. The columns are all equal in width. Perhaps there will eventually be a way to adjust that, and perhaps not. They are separate blocks of text, not a way to wrap one continuous text block into multiple columns.

I find it interesting that text columns are included under "layout" rather than under "text." Mind you, there isn't actually a "text" group for blocks, but to me headings, paragraphs, and lists are all text blocks, ditto quotes, verse, and pretty much everything I include in this post before we get to images and videos.

H1 Heading

Frankly, I'm not in favor of allowing h1 headings within posts or pages, but at the moment it's possible in both TinyMCE and Gutenberg.

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

It's not a bug, it's a feature.

Every developer everywhere.

That's the default blockquote.

 And solitude was beautiful, when I was sure that I was strong.

James Fenton

That's the blockquote style 2. I don't know whether the theme will display it any differently, though.

This is what's known as cover text. You can choose background and text colors, adjust the font size, and apply a drop cap. Nice feature.

Unordered List

  • list item 1
  • list item 2
  • list item 3

Ordered List

  1. list item 1
  2. list item 2
  3. list item 3

This is a pull quote

With attribution
When first I came to Louisville
     some pleasure there to find,
A damsel there from Lexington
     was pleasing to my mind.
Her rosy cheeks, her ruby lips
     like arrows pierced my breast.
And the name she bore was Flora,
     the Lily of the West.

That's a verse block, above. It's supposed to preserve spacing. (Adding line numbering would be kind of cool, too, though that's more useful for scholars than for artists.) So far on the front of the site it looks rather like preformatted text. Theme developers are going to have to do some work to make it prettier.

This is actual preformatted text. 
In the editor, it uses a monospaced font, which the verse block doesn't.
When you hit "enter", you get a line break instead of a paragraph, which is what's supposed to happen. (Text wraps within the editor but not on the front of the site, which is also what's supposed to happen.)
/* This is a code block, for displaying code snippets.
* Unlike fancy code highlight plugins, it doesn't provide
* a choice of languages. Very similar to <pre> in 2017.
*/

// Change size of ALL event images
add_filter('tribe_event_featured_image_size', 'ebwp_event_featured_image_size');
function ebwp_event_featured_image_size($size) {
	$size = 'large'; // Change to your desired image size
	return $size;
}

There's an argument to be made that a code block and a custom HTML block are not text blocks. I don't have a mental category that encompasses them both, though. Perhaps there shouldn't be one.

Register

That's a custom HTML block for creating a button-style link, above, with the HTML pasted in from a code editor. When I tried to enter the same exact code by typing it in, I got an error.

That's supposed to be a button block, but inserting it doesn't work properly in Chrome. Works fine in Firefox. Buttons are also considered a "layout" block, yet really they are a text style, not a layout. 


That's a separator. You can add a CSS class to it. It adds an hr tag. I would consider that a legitimate "layout" block. And I'd also consider columns that could include more than text a layout block.

Images

Image block. I like the way adding/editing a caption works, but I don't like the current (0.90) problem with not resizing the image block as a whole, or the caption, to match the image.

Right now (0.90) you can't choose the image size when you insert an image, the way you can with the TinyMCE Add Media dialog. You can resize the image within its block, though. I am not sure whether this is an oversight or presages the introduction of on-the-fly image sizing instead of the current thumbnail generation process.

Maximum columns for the gallery is 3. Block settings include number of columns, link to, and additional CSS class.

This is a "cover" image with a fixed, dim background.

Options for cover images include dim background and fixed background (parallax). The editor shows white text over the image, but the front of the site uses the theme's accent color.

Videos

Turns out the "video" block is only for videos stored in your media library…which in most cases you're not going to want to do. 

Took me a while to find a video that would be small enough to upload. Interesting that the caption text for the local video is different from that of the embeds…at least in the editor.
This is a WordPress.tv embed. I like the video caption option.
This is a YouTube embed.
This is a Vimeo embed of a WordPress tutorial from 2010

Audio

As with a video block, an audio block is only for files in your media library. You can upload, but not insert from a URL. (This recording is the WP-Tonic post-mortem on WordCamp Sacramento 2015.) While the upload dialog includes title, caption, description, artist, and album, the player is not showing any of that. And the block options only include adding a CSS class.

This is a SoundCloud embed. Works just fine and includes a caption.

It appears there is not a way to embed an mp3 file from another site. I thought it might work if I used the generic "embed" block, but it didn't. And right now the other audio options are pretty limited. SoundCloud, Spotify, Speaker (what's that?), and an audio file stored on your own site, which is not a good place to store audio files, at least not if they are long and you have a lot of them. Will we need to create specific blocks for Libsyn and Blubrry, or other media hosting companies? What happens to podcast player plugins? I guess they'll have to create blocks for adding the podcast files.

Slides

This is a SlideShare embed
This is a SpeakerDeck embed. WordPress has had oEmbed support for SpeakerDeck for a while, but there isn't a specific SpeakerDeck embed block in Gutenberg yet.

Social

It appears you can add a caption to an embedded tweet. Who knew?
We Called it Gutenberg for a Reason
I wasn't sure whether a "WordPress" embed was only for WordPress.com, or for a post on any WP site. Turns out to be the latter.

View of Nice from the Colline du Château

A post shared by Kathleena Gorga (@kgconsciousbeautycom) on

This is a caption for an Instagram embed. Interesting that Twitter and WP embeds show full-width but Instagram embeds do not. Oh. That's only in the editor: on the front of the site, it shows full-width.

New Date: 8/27/2017! East Bay WordPress Meetup Contributor Day

Sunday, Aug 27, 2017, 11:00 AM

Tech Liminal 3.0
344 Thomas L. Berkley Way Oakland, CA

16 WordPress junkies Went

Participants in the 2015 East Bay WordPress Contributor Day. Credit: Anca Mosoiu.You don’t have to be on the core team to contribute to WordPress. There are all kinds of ways to help out: answering questions in the support forum, writing and editing documentation, making translations, helping with accessibility, and more.Join us for a special ext…

Check out this Meetup →

This is a Meetup.com embed.
223: Understanding Behavior Flow in Google Analytics

Analyzing and improving website performance: how to find out what's really slowing you down. We also talk about Knowledge Graph, Google Data Studio, Google Tag Manager.

Posted by Jonathan Denwood on Friday, August 25, 2017
Took me forever to figure out how to embed anything from Facebook, probably because I don't use FB. Gutenberg doesn't show previews for FB embeds, or at least not for this one (a FB live video).

Shortcode

This is a shortcode block containing the shortcode for a form. Shortcode blocks are a relatively recent addition to Gutenberg. It's possible to add a CSS class to a shortcode through Gutenberg. Right now the shortcode block is classed under "Widgets," which is rather confusing.

[formidable id=3]

Widgets

These are special Gutenberg widgets, not your regular widgets. At time of writing the options are "Latest Posts" and "Categories." Mind you, they do work just the same as their equivalents in the Widget management screen, so perhaps the idea is to add all WP widgets here, and to allow plugin developers to include widget blocks here.

Block settings for latest posts widget are a toggle to show post date and an incrementor for number of posts to show, plus a CSS class. No option to show featured images, author byline, categories, or tags. This works the same way as the default latest posts widget in the widget admin.

The category widget works just like the default category widget in WordPress: display post count, show as dropdown, show hierarchy–with the addition of adding a CSS class.

One Reply to “Post with ALL THE BLOCKS”

  1. Hi there Post with ALL THE BLOCKS – East Bay WP Gutenberg Editor Testing

    Money Robot Submitter is the most powerful SEO automation tool.
    Designed to publishing your content and backlinks to thousands of websites.
    Read More: http://bit.ly/Money_Robot_SEO

Leave a Reply

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