A Demo of Gutenberg Blocks
Weaver Xtreme Version 4 now has complete integrated support for the new Gutenberg Editor, even before Gutenberg has been added to the official WordPress 5 upcoming release (some time in 2018?). While Gutenberg is not yet 100% complete, it does have many features fully functional, and will not damage any of your current pages or posts. A Weaver Xtreme 4.0 Alpha Release is upcoming soon!
Examples of Gutenberg blocks in all widths: Normal, Wide, Full
- You can download the Gutenberg plugin now here.
- A link to the latest Alpha version of Weaver Xtreme 4 will be provided here soon!
Gutenberg supports six different alignments for most blocks: None, Left, Center, Right, Wide, and Full. This demo page has examples of all the different alignments. Most demo either none, wide, and full, but some include the other alignments as well. WARNING: This page has lots of big images, so it may load a bit slowly.
This example page also demonstrates the full integration of the Weaver Xtreme theme with Gutenberg. An accompanying source code display of the raw page HTML is (or will be soon) included on this site for possible inclusion as a test on other themes.
Images
These first three images demo using different sized original images for Fixed Background (Parallax) images. Not there is no bottom margin, so they all run together nicely.
Cover Image Test (1600px image)
A narrower original image source (1024px)
Cover image only 640px wide
Normal Images

This text comes immediately following the non-aligned image. Note that the caption is not centered.

Text follows the image to demo what happens with the center image layout.

This is non-aligned text following immediately after the left aligned image. It all wraps nicely, just like you might want.
More text to show it wrap back to the left after the image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui.
Note that this non-aligned paragraph will flow and wrap back to the left. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio.

This content was added AFTER the align right image that now shows to the right of this paragraph. We will fill in the space.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.
So, we have just seen the first four ways to display an image, and images plus paragraphs. What follows will be a wide image that should show up to the content margins – it will have no alignment. After that, Wide and Full big images.


Ideally, the centered image would show full width in the editor, but I haven’t figured out how to do that yet. It may be hard-wired. Now, let’s see the wide and full images.


Gallery
Galleries can show up to 3 columns, and will try to match sizes a bit. If you have three images in a two column gallery, like in this example, the last image shows full width of the gallery block. Here are centered, wide, and full galleries with the same 3 images in each.
Normal – Centered
Wide
Full
Multple Column Blocks in a Block
At the time this demo was created, the multi-column block was still experimental, and it does seem to have isues.


These aren’t working yet with wide and full. Following is manually class added to alignfull, but there is a bunch of padding on the images, so the align full leaves lots of space, and doesn’t to to the edges like the gallery. The columns block is alignfull, but the images in it are centered.


Video
Theme Auxiliary Classes
ADD A BORDER WITH .block-border: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
MAKE IT ROUNDED BY ADDING .block-rounded: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
ADD A TRANSPARENT GRAY BG with block-bg-transparent-gray: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
Textual Elements
Normal paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
Wide paragraph. In the editor, when the width has been increasded by the theme, wide elements are styled narrower than regular elements. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
Full paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
This is an example of a two column column block, in 4 alignments. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. No alignment.
Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna.
This is an example of a two column column block, in 4 alignments. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Block Centered.
Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna.
This is an example of a two column column block, in 4 alignments. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. WIDE alignment. This does not show correctly in the editor, but is correct on the front-end.
Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna.
This is an example of a two column column block, in 4 alignments. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. FULL alignment.
Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna.
A Pull Quote
NORMAL, CENTERED
Another Pull Quote
WIDE ALIGN
A Third Pull Quote
FULL Align
Widgets
Recent Posts: Normal, Wide, Full
- Image Columns Block for Gutenberg Demo
- All-in-One Image/Text Block for Gutenberg Demo
- Make Your WordPress Theme Fully Compatible with Gutenberg
- What’s New in Weaver Xtreme 4.0?
- Weaver Xtreme Theme Blog Suspended for Now
- Image Columns Block for Gutenberg Demo
- All-in-One Image/Text Block for Gutenberg Demo
- Make Your WordPress Theme Fully Compatible with Gutenberg
- Image Columns Block for Gutenberg Demo
- All-in-One Image/Text Block for Gutenberg Demo
- Make Your WordPress Theme Fully Compatible with Gutenberg
- What’s New in Weaver Xtreme 4.0?
- Weaver Xtreme Theme Blog Suspended for Now
Categories
This is a subhead – must be italic
Elements without Wide/Full Options
The classic editor, in block form. Nope – no alignment. This is centered.
A Block Quote does not have alignments. You can text-align to center.
This example proves it.
Code does not have alignments.
- This is a NORMAL list – Apparently, there is no alignment for lists Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio.
- Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.