Tag: Blocks
Gutenberg: Pullquote
Styles
Default
Has anyone ever said, ‘I wish I could go to more meetings today’?
Matt Mullenweg
Solid Color
Love is great, but not as a password.
Matt Mullenweg
Color Settings
Main Color
This Pullquote has a custom Main Color.
Danny
Text Color
This Pullquote has a custom Text Color.
Danny
Alignment
This Pullquote is aligned to the left.
Danny
This Pullquote is aligned to the right.
Danny
Width
This Pullquote has a wide width.
Danny
This Pullquote has a full width.
Danny
Weight & Style
This Pullquote is bold.
This citation is bold
This Pullquote is italicized.
This citation is italicized
This citation is a link
Gutenberg: Media & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit.
Settings
Stack On Mobile
This Media & Text block will stack on mobile.
Crop image to fill entire column
This Media & Text image will display a cropped image that will fill the entire column.
Focal Point Picker
This Media & Text image will display the image with a custom focal point selected.
Horizontal Pos. 100% | Vertical Pos. 0%
Background Color
This Media & Text block has a custom background color.
Width
This Media & Text block has a wide width.
This Media & Text block has a full width.
Media Aligment
This Media & Text block has the media aligned to the left.
This Media & Text block has the media aligned to the right.
Vertical Alignment
This Media & Text block has the contents vertically aligned to the top.
This Media & Text block has the contents vertically aligned to the middle.
This Media & Text block has the contents vertically aligned to the bottom.
Custom Color
Primary Background Colour
This Media & Text block has the primary background color.
Secondary Background Colour
This Media & Text block has the secondary background color.
Media & Text Contents
Heading
This is a h1 heading
This is a h2 heading
This is a h3 heading
This is a h4 heading
This is a h5 heading
This is a h6 heading
This heading has a custom Text Color
This heading is aligned to the left
This heading is aligned to the center
This heading is aligned to the right
This heading is bold
This heading is italicized
This heading is a link
This heading has an inline code
This heading has an inline image
This heading has a strikethrough text
This heading has an underlined text
Paragraph
This is a small paragraph.
This is a normal paragraph.
This is a large paragraph.
This is a huge paragraph.
This paragraph has a custom Background Color.
This paragraph has a custom Text Color.
This paragraph is aligned to the left.
This paragraph is aligned to the center.
This paragraph is aligned to the right.
This paragraph has a Drop Cap.
This paragraph is bold.
This paragraph is italicized.
This paragraph has an inline code.
This paragraph has an inline image.
This paragraph is justified.
This paragraph has a strikethrough text.
This paragraph has an underlined text.
Gutenberg: Cover
Image
This is a Cover block using an image file.
Video
This is a Cover block using a video file.
GIF
This is a Cover block using a GIF file.
Cover Settings
Fixed Background
This Cover block has a fixed background.
Focal Point Picker
This Cover block has a custom focal point.
Horizontal Pos. 100% | Vertical Pos. 0%
Overlay
Overlay Color
This Cover block has a custom overlay color.
Background Opacity
This Cover block has the background opacity set to 90.
Alignment
This Cover block is aligned to the left.
This Cover block is aligned to the right.
This Cover block is aligned to the center.
Width
This Cover block has a full width.
This Cover block has a wide width.
Cover Contents
Heading
h1 aligned to the left
h1 aligned to the center
h1 aligned to the right
h2 aligned to the left
h2 aligned to the center
h2 aligned to the right
h3 aligned to the left
h3 aligned to the center
h3 aligned to the right
h4 aligned to the left
h4 aligned to the center
h4 aligned to the right
h5 aligned to the left
h5 aligned to the center
h5 aligned to the right
h6 aligned to the left
h6 aligned to the center
h6 aligned to the right
This heading has a custom Text Color
This heading is bold
This heading is italicized
This heading is a link
This heading has an inline code
This heading has an inline image
This heading has a strikethrough text
This heading has an underlined text
Paragraph
This is a small paragraph.
This is a normal paragraph.
This is a large paragraph.
This is a huge paragraph.
This paragraph has a custom Background Color.
This paragraph has a custom Text Color.
This paragraph is aligned to the left.
This paragraph is aligned to the center.
This paragraph is aligned to the right.
This paragraph has a Drop Cap.
This paragraph is bold.
This paragraph is italicized.
This paragraph has an inline code.
This paragraph has an inline image.
This paragraph is justified.
This paragraph has a strikethrough text.
This paragraph has an underlined text.
Gutenberg: Quote
Styles
Default
This is a Quote block. It’s aligned to the side at least in the default styles. Pretty darn amazing.
This is a citation
Large
Use the force, Luke.
Obi-Wan Kenobi
Text Alignment
This quote is aligned to the left.
Danny
This large quote is aligned to the center.
Jeffy
This quote is aligned to the right.
Takashi
Weight & Style
This large quote is bold.
This citation is bold
This quote is italicized.
This citation is italicized
This citation is a link
Gutenberg: Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit. Proin condimentum risus sed venenatis mollis. Donec auctor euismod sodales. Donec sodales congue metus, sit amet tempor odio maximus in. Ut vestibulum nisl a maximus scelerisque. Donec aliquam eleifend metus, eget iaculis ante vestibulum id. Nulla facilisi. Nullam interdum sagittis accumsan. Phasellus egestas elementum enim nec condimentum. Sed mattis purus odio. Curabitur vehicula rutrum porttitor. Phasellus tempus dui id turpis fermentum, auctor dictum mauris mollis.
Font size
This is a small paragraph.
This is a normal paragraph.
This is a large paragraph.
This is a huge paragraph.
Drop Cap
A Drop Cap is a large letter that drops below the first line of a paragraph.
Color Settings
This paragraph has a custom Background Color.
This paragraph has a custom Text Color.
Text Alignment
This paragraph is aligned to the left.
This paragraph is aligned to the center.
This paragraph is aligned to the right.
Weight & Style
This paragraph is bold.
This paragraph is italicized.
This paragraph has an inline code.
This paragraph has an inline image.
This paragraph is justified.
This paragraph has a strikethrough text.
This paragraph has an underlined text.
Gutenberg: Heading
Levels
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Aligment
This h2 is aligned to the left
This h4 is aligned to the center
This h6 is aligned to the right
Weight & Style
Bold h3
Italic h4
Linked h5
Gutenberg: Columns
Columns
2 columns
This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst
3 columns
This is a typical 3-column layout with images on top and some text below.
You’ll find this layout on web sites all over the internet.
Gutenberg makes this kind of layout easy to build. The future is now!
4 columns
This is the first column, and it’s amazing.
This is the second column, and it’s also amazing.
The third column, as they say, is like a charm.
This is the fourth column, and it’s possibly the best.
5 columns
5 columns of text in the post, 5 columns of text. Take one down, move it around, 4 columns of text in the post.
4 columns of text in the post, 4 columns of text. Take one down, move it around, 3 columns of text in the post.
3 columns of text in the post, 3 columns of text. Take one down, move it around, 2 columns of text in the post.
2 columns of text in the post, 2 columns of text. Take one down, move it around, 1 columns of text in the post.
1 column of text in the post, 1 column of text. Take one down, move it around, no columns of text in the post.
6 columns
One column.
Two columns.
Three columns.
Four columns.
Five columns.
Six columns.
One column.
Two columns.
Three columns.
Four columns.
Five columns.
Six columns.
Width
Wide
This is a wide width 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst
Full
This is a full width 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst
Percentage width
This column is 25% wide.
This column is 75% wide.
This column is 75% wide.
This column is 25% wide.
This column is 25% wide.
This column is 50% wide.
This column is 25% wide.
This column is 50% wide.
This column is 25% wide.
This column is 25% wide.
This column is 25% wide.
This column is 25% wide.
This column is 50% wide.
This column is 20% wide.
This column is 20% wide.
This column is 10% wide.
This column is 50% wide.
This column is 10% wide.
This column is 20% wide.
This column is 40% wide.
This column is 20% wide.
This column is 10% wide.
This column is 10% wide.
This column is 10% wide.
This column is 10% wide.
This column is 10% wide.
This column is 10% wide.
This column is 50% wide.
Vertical Alignment
Top
This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.
Middle
This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.
Bottom
This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.
Gutenberg: Embed
Imgur
YouTube
Soundcloud
Spotify
Flickr
Vimeo
Animoto
Cloudup
CollegeHumor
Crowdsignal
Dailymotion
Hulu
Issuu
Kickstarter
Meetup
Mixcloud
ReverbNation
Screencast
Scribd
Slideshare
SmugMug
