This style guide is full of dummy content created using the editor in WordPress 5.0, code-named Gutenberg. The purpose of this page is to show you what all the default HTML elements and default WordPress blocks will look like using this theme.
H1 Cover Image
Just in case you want to add an H1 heading to the page it’ll look like the heading above. It has long been bad SEO practice to have multiple H1’s on a page, usually, an H1 is only used for the page title.
Cover Images are a new feature with these you can add text and change the overlay
color
H2 Quote and Pullquotes
H2 headings get used a lot for major sections of your pages. Below this paragraph, you will find the new Quote Block which outputs an HTML blockquote element.
I have always said that everyone is in sales. Maybe you don’t hold the title of salesperson, but if the business you are in requires you to deal with people, you, my friend, are in sales.
Zig Ziglar
Read more at: https://www.brainyquote.com/quotes/zig_ziglar_617802
Or blockquote element styled as a pull quote
This is a big beuatiful pull quote
ANONYMOUS
H3 Multi Column Layout Block
H3 headings get used a lot too. Keep in mind it’s considered best practice to nest each section within the next major heading. So, H1 (page title) then H2 (major section) then H3 (minor section). You can of course nest all the way down through H4, H5 and H6 but it’s pretty rare to go that deep.
H4 Unordered List
- Unordered List Item 1
- List Item 1.1
- List Item 1.1.1
- List Item 1.1
- List Item 2
- List Item 3
H4 Ordered List
- Ordered List Item 1
- List Item 1.1
- List Item 1.1.1
- List Item 1.1
- List Item 2
- List Item 3
H5 Image Gallery
Paragraphs and Aligned Images
Here are a few paragraphs in succession so you can see the spacing between paragraphs and how default WordPress image inserts look aligned right and left.
Here is a medium sized image aligned right. So you can see what size it is and you can see how it behaves differently on mobile. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quid minus probandum quam esse aliquem beatum nec satis beatum? Suo genere perveniant ad extremum; Quid me istud rogas? Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Quamquam tu hanc copiosiorem etiam soles dicere. Nemo igitur esse beatus potest. Duo Reges: constructio interrete. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Duo Reges: constructio interrete. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Ita est quoddam commune officium sapientis et insipientis, ex quo efficitur versari in iis, quae media dicamus.
Here is another medium image aligned left. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam. Indicant pueri, in quibus ut in speculis natura cernitur. Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia. Utram tandem linguam nescio? Verba tu fingas et ea dicas, quae non sentias? At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Primum in nostrane potestate est, quid meminerimus?
Sample Tables Striped and Lined
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Easy to Edit Button Elements
Easy Video Embeds from YouTube and more
Easy Embeds from All Over
There are far too many embeds available for us to demonstrate them all. Suffice to say most major services from Twitter to Instagram, Facebook, Slideshare
Fieldsets and Form Elements
These are not Gutenberg blocks but are standard HTML form elements. Most plugins will inherit these stypes.
Fieldsets and Form Elements
Styling for <pre> elements. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
/**
* This is a test docblock
*
* @package SomePackage
* @since 1.0.1
*/
There are even more blocks you can add with plugins like Atomic Blocks and others. It’s amazing!
