Skip to content

Instantly share code, notes, and snippets.

@benpearson

benpearson/html-for-core-blocks.md

Last active July 19, 2022 23:45
Show Gist options
  • Save benpearson/b5f98a244dc9bc85631ea35207154aa1 to your computer and use it in GitHub Desktop.
Save benpearson/b5f98a244dc9bc85631ea35207154aa1 to your computer and use it in GitHub Desktop.
Download ZIP
HTML for core blocks
Raw
html-for-core-blocks.md

HTML for Core blocks

Contents

Using this HTML

These instruction only relate to "Core Blocks" (not "Custom Blocks")

  • Do not add new classes, wrappers or extra elements of any type to the block's HTML that are not seen here.
  • The HTML structure should be used as seen here, directly inside the wrapper for the entire content area.

Use this method

<div class="content-area-wrapper">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Do not use this method

<div class="content-area-wrapper">
    <section class="an-extra-wrapper"><!-- Do not add extra HTML elements -->
        <h1>Heading 1</h1>
        <p class="an-extra-class">Lorem ipsum dolor sit amet.</p><!-- Do not add extra classes -->
    </section>
</div>

HTML examples

Basic Blocks

Heading blocks

  • Use class has-text-align-center for centering.
<h1>Heading 1</h1>

<h2 class="has-text-align-center">Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

Paragraph block

  • Use class has-text-align-center for centering.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit arcu vel orci the interdum, able to malesuada tempor ex efficitu</p>

<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit arcu vel orci the interdum, able to malesuada tempor ex efficitur. </p>

Unordered List block

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing el</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing el</li>
        </ul>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Ordered List block

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing el
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ol>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing el</li>
</ol>

Table block

<figure class="wp-block-table">
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </tbody>
    </table>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit</figcaption>
</figure>

Below is a table block with a custom style of "Stripes". See the extra class added to the <figure> element. This allows for some variation in table styling. The custom class should use the is-style- prefix. Only a single class should be added to the HTML and only to the <figure> element.

<figure class="wp-block-table is-style-stripes">
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </tbody>
    </table>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit</figcaption>
</figure>

Separator block

  • Also known as a Divider block
<hr class="wp-block-separator">

Image block

<figure class="wp-block-image">
    <img src="example.jpg" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

YouTube Embed block

<figure
    class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
        <iframe loading="lazy" title="Placeholder Video" width="500" height="281"
            src="https://www.youtube.com/embed/ScMzIvxBSi4?feature=oembed" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen=""></iframe>
    </div>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

Vimeo Embed block

<figure
    class="wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
        <iframe loading="lazy" title="Video Placeholder"
            src="https://player.vimeo.com/video/87110435?h=f253e737bd&amp;dnt=1&amp;app_id=122963" width="500"
            height="281" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

Post Featured Image block

<figure class="wp-block-post-featured-image">
    <img src="example.jpg" class="wp-post-image" alt="" >
</figure>

Pullquote block

<figure class="wp-block-pullquote">
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit arcu vel orci the interdum, able to malesuada tempor ex efficitur.</p>
        <cite>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cite>
    </blockquote>
</figure>

Nested Blocks

Gallery block

  • This example is two images side by side
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
    <figure class="wp-block-image size-large">
        <img loading="lazy" width="1000" height="1000" src="//via.placeholder.com/1000x1000" alt="">
        <figcaption>Caption for first image</figcaption>
    </figure>
    <figure class="wp-block-image size-large">
        <img loading="lazy" width="1000" height="1000" src="//via.placeholder.com/1000x1000" alt="">
        <figcaption>Caption for second image</figcaption>
    </figure>
</figure>

Buttons block

  • is-content-justification-center is the class used to center the buttons
  • is-style-outline is the class used for "outline" style button
<div class="wp-block-buttons is-content-justification-center">
    <div class="wp-block-button">
        <a class="wp-block-button__link">Lorem ipsum dolor sit amet</a>
    </div>
    <div class="wp-block-button is-style-outline">
        <a class="wp-block-button__link">Lorem ipsum dolor sit amet</a>
    </div>
</div>

Columns block

  • This example contains a Paragraph block in each Column
<div class="wp-block-columns">
    <div class="wp-block-column">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="wp-block-column">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

Group block

  • This example contains a Heading block and a Paragraph block
<div class="wp-block-group">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit arcu vel orci the interdum, able to malesuada tempor ex efficitur. </p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment