• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Derrick

Just another 9seeds Theme site

(602) 555-9500

  • Log In
  • My Account
  • Home
  • About
  • Store
  • Courses
    • LearnDash Courses
      • How to Play Piano for Beginners
      • Free LearnDash Course Example
    • LifterLMS Courses
      • Algorithms – Introduction
      • Free Lifter LMS Course Example
  • Page Templates
    • Available Icons
    • Sample Page
    • Content/Sidebar
    • Sidebar/Content
    • Full Width
    • Genesis Columns
    • Sitemap
  • Colors
    • Blue (Default)
    • Green
    • Grey
    • Orange
    • Purple
    • Red
  • Blog
  • Contact

Gutenberg Editor Style Guide

Share
Tweet
Pin
0 Shares

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.
Read more at: https://www.brainyquote.com/quotes/zig_ziglar_617802

Zig Ziglar

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 2
  • List Item 3

H4 Ordered List

  1. Ordered List Item 1
    1. List Item 1.1
      1. List Item 1.1.1
  2. List Item 2
  3. List Item 3
H5 Image Gallery
  • Sweet-Potato
  • Harvest-Crisps
  • Onion-Crisps
  • Cranberry-Bar
  • Brazil-Nuts

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. 

Backpack-to-the-Future-Bag-in-Pumpkin

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.

Girl-Meets-Voyage-Weekend-Bag

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 dolorLorem ipsum dolorLorem ipsum dolor
Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolor

Easy to Edit Button Elements

Customizable
Buttons built-in

Customizable
Buttons built-in

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 and many more. 

Sponsoring WordCamp Riverside and WordCamp Dallas-Fort Worth 2018 https://t.co/BD7BUb2ZO5 via @9seeds

— 9seeds (@9seeds) October 31, 2018

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

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.



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!

sidebar

Course Sidebar

Icon

View
Available
Courses

Icon

Explore
Our Training
Lessons

Icon

Request
a Personal
Demonstration

Course Syllabus

  • Courses
  • Lessons
  • Memberships

Footer

Available Templates

  • Available Icons
  • Content/Sidebar
  • Sidebar/Content
  • Full Width
  • Genesis Columns
  • Sitemap

Available Colors

  • Blue (default)
  • Green
  • Grey
  • Orange
  • Purple
  • Red

MISC Links

  • Store
  • Customer Registration
  • Account
  • Purchases

Recent Posts

Online shopping

09.15.14

Living Without Credit Cards

Couple With Bills

09.04.14

Over Your Head With Debt? Our Course Can Help

Accounting

08.18.14

Ten Tips for Learning to Control Your Finances

RSSYoutubeTwitterLinkedinFacebookGoogle +

123.456.7890 | email@companydomain.com

  • Home
  • Blog
  • Contact
  • Sitemap

Website by 9seeds

Copyright © 2014 The Derrick Learning Company