Gutenberg with Weaver Xtreme Demo

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.

Image Centered. It has been resized in the editor with the resize dost.

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.

With no alignment, it takes up most of the width.

Centered: Full width on page, smaller width in editor.

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

You Tube Embed – should behave like others. This one is normal.

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.

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.

This is an example of a two column column block, in 4 alignments. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. FULL alignment.

A Pull Quote
NORMAL, CENTERED

Another Pull Quote
WIDE ALIGN

A Third Pull Quote
FULL Align

A Button, WIDE.

A Button, FULL.

Widgets

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.

Weaver Xtreme Theme

One Theme to Design Them All