UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Test gutenberg blocks
Редакція
Редакція

Опубліковано

Test gutenberg blocks

#ux

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.


Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Preformatted Block

The Road Not Taken, by Robert Frost

Two roads diverged in a yellow wood,

And sorry I could not travel both

And be one traveler, long I stood

And looked down one as far as I could

To where it bent in the undergrowth;

Then took the other, as just as fair,

And having perhaps the better claim,

Because it was grassy and wanted wear;

Though as for that the passing there

Had worn them really about the same,

And both that morning equally lay

In leaves no step had trodden black.

Oh, I kept the first for another day!

Yet knowing how way leads on to way,

I doubted if I should ever come back.

I shall be telling this with a sigh

Somewhere ages and ages hence:

Two roads diverged in a wood, and I—

I took the one less traveled by,

And that has made all the difference.

...and heres a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;


Ordered List

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Condimentum euismod aenean.
    2. Purus commodo ridiculus.
    3. Nibh commodo vestibulum.
  3. Cras justo odio, dapibus ac facilisis in.

Unordered List

  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Nibh commodo vestibulum.
    • Aenean eu leo quam.
    • Pellentesque ornare sem lacinia.
  • Cras justo odio, dapibus ac facilisis in.

Verse

This is an example of the core Gutenberg verse block.

A block for haiku?

Why not?

Blocks for all the things!

Twitter

Here are examples of the three separator styles of the core Gutenberg separator block.

https://twitter.com/jsngr/status/1284511080715362304

Table

Here is an example of the core Gutenberg table block.

Employee

Salary

Position

Jane Doe

$100k

CEO

John Doe

$100k

CTO

Jane Bloggs

$100k

Engineering

Fred Bloggs

$100k

Marketing


Latest Posts, List View

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Latest Posts, Grid View

And now for the Grid View. The Latest Posts block also displays at wide and full width alignments, so be sure to check those styles as well.


Blockquote

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio.

Rich Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Alternate Blockquote

The alternate block quote style can be tarageted using the .wp-block-quote.is-large. CSS selector. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Rich Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Pull Quotes

Here is an example of the core pull quote block, set to display centered. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.

Rich Tabor, ThemeBeans.com

Wide aligned

Here is an example of the core pull quote block, set to display with the wide-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed ibendum nulla sed consectetur.

Rich Tabor, Founder at ThemeBeans.com

Full width

And finally, here is an example of the core pull quote block, set to display with the full-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Rich Tabor, Founder at ThemeBeans.com


Image Block

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.

And an image with a caption

Wide aligned

Full Width

Here is an example of an image block caption

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Left aligned: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

This one is captioned

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus.


Video Block

Lets check out the positioning and styling of the video core block. We will check the wide and full alignments too.

Uploaded video

Youtube video

https://www.youtube.com/watch?v=cK54XcvN-Og

Wide aligned vimeo

https://vimeo.com/259230327

Videos can have captions too!

Full Width

https://vimeo.com/243191812

Cover Image Block

Check out the positioning and styling of the cover image core block. We will check the wide and full alignments, as well as left/right.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Left aligned: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Right aligned: scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:


Gallery Blocks

Let us check out the positioning and styling of the gallery blocks.

Two Column Gallery

Below we have a Gallery Block inserted with two columns and two images.

Three Column

Below we have a Gallery Block inserted with three columns and three images.

Four Column

Below we have a Gallery Block inserted with four columns and four images.

Five Column

Below we have a Gallery Block inserted with five columns and five images.

Four Column, Five Images

Let us switch things up a bit. Now we have a Gallery Block inserted with four columns and five images.

Three Column, Five Images

Now we have a Gallery Block inserted with three columns and five images.

Below you will find a Gallery Block inserted with two columns and five images.

Two Column, Five Images

Three Column, Four Images

Below you will find a Gallery Block inserted with three columns and four images.

Wide aligned Gallery Blocks

Let us check out the positioning and styling of the gallery blocks..

Two Column Gallery

Below we have a Gallery Block inserted with two columns and two images. It is set to display with the new Wide alignment (if the theme supports it).

Three Column

Below we have a Gallery Block inserted with three columns and three images. It is also set to display with the new Wide alignment.

Four Column

Below we have a Gallery Block inserted with four columns and four images. It is also set to display with the new Wide alignment.

Five Column

Below we have a Gallery Block inserted with five columns and five images. It is also set to display with the new Wide alignment.

Four Column, Five Images

Let us switch things up a bit. Now we have a Gallery Block inserted with four columns and five images, also displayed with the new Wide alignment option.

Three Column, Five Images

Now we have a Gallery Block inserted with three columns and five images displayed with the new Wide alignment option.

Two Column, Five Images

Below you will find a Gallery Block inserted with two columns and five images also displayed with the new Wide alignment option.

Three Column, Four Images

Below you will find a Gallery Block inserted with three columns and four images, also displayed with the new Wide alignment option.

Full Width Gallery Block

Below you will find a Gallery Block inserted with three columns and four images, also displayed with the new Wide alignment option.


Перевод статьи matthewstrom

Топ коментарі (0)