Kitchen Sink

A page to test popular Gutenberg blocks against front-end styles.

This is an H1

Lorem ipsum dolor sit amet nisi quis lacinia. Dui ultricies vivamus nulla proin lacus eros nec. Euismod posuere id posuere molestie euismod sodales nullam dictumst integer sapien. Cursus rhoncus justo dictumst et vulputate sodales phasellus hendrerit sed consequat purus. Congue euismod mollis dolore phasellus duis massa molestie eros.

This is an H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Haec et tu ita posuisti, et verba vestra sunt. Atque his de rebus et splendida est eorum et illustris oratio. Eam stabilem appellas. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Est enim effectrix multarum et magnarum voluptatum. Duo Reges: constructio interrete.

This is an H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Si qua in iis corrigere voluit, deteriora fecit. Videsne quam sit magna dissensio?

This is an H4

Sed tu istuc dixti bene Latine, parum plane. Obsecro, inquit, Torquate, haec dicit Epicurus? Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Sed virtutem ipsam inchoavit, nihil amplius. Terram, mihi crede, ea lanx et maria deprimet. Isto modo ne improbos quidem, si essent boni viri.

This is an H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Optime, inquam. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Illa tamen simplicia, vestra versuta. Duo Reges: constructio interrete. Quod cum dixissent, ille contra.

This is an H6

Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Hoc enim constituto in philosophia constituta sunt omnia. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Dic in quovis conventu te omnia facere, ne doleas. Ita multo sanguine profuso in laetitia et in victoria est mortuus.

Various Text Styles

Bold Text

Italicized Text

~~Strike-through!~~

Inline code

Some text with a hyperlink

Un-ordered List

List item 1
List item 2
List item 3

Ordered List

List item 1
List item 2
List item 3

Blockquote:

Tis better to give than receive
– Someone

Left align text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec magna quam. Nam nec libero facilisis, viverra mauris et, porta lacus. Cras ultricies tortor ut nunc ullamcorper ultricies. Ut nec nunc molestie, faucibus velit et, eleifend arcu. Donec egestas leo ut risus tincidunt laoreet. Curabitur dolor neque, laoreet vitae arcu at, tincidunt sagittis orci. Quisque consequat vehicula aliquet. Pellentesque sed placerat nisl. Pellentesque eu elit vel turpis mollis eleifend sed quis nisl. In cursus tellus sed nulla malesuada posuere eget id felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut feugiat mi id lectus elementum porttitor.

Center aligned text

Right aligned text

Huge Image / Full Width Alignment

Columns

Below are some common column layouts:

50%

Lorem ipsum dolor sit amet hendrerit non quis consectetur in luctus.

50%

Lorem ipsum dolor sit amet ornare integer lacinia condimentum orci ornare.

33%

Lorem ipsum dolor sit amet orci dapibus enim.

66%

Lorem ipsum dolor sit amet curabitur blandit lectus adipiscing.

33%

Lorem ipsum dolor sit amet ultricies erat ullamcorper semper blandit faucibus.

33%

Lorem ipsum dolor sit amet ultricies erat ullamcorper semper blandit faucibus.

33%

Lorem ipsum dolor sit amet ultricies erat ullamcorper semper blandit faucibus.

YouTube oEmbed

Twitter oEmbed

September 30th vs October 1st pic.twitter.com/VOqH63LDvD
— Muppet History 💕 (@HistoryMuppet) September 30, 2022

WordPress Post oEmbed

WordPress 6.1 Field Guide

Classic Block with Paragraph Text and Image

The heading above is an H2, and the image is right aligned in the classic editor block.

some weeds with a sunset in the background

Lorem ipsum dolor sit amet bibendum labore justo. Pulvinar blandit vitae at est integer facilisi leo libero diam. Non laoreet elementum pharetra ullamcorper facilisi non sapien incididunt eget quisque aliquam ultricies dapibus. A condimentum porta eleifend semper vulputate tincidunt tempus nisi vestibulum imperdiet arcu. Porta tincidunt condimentum pharetra fermentum velit duis cras.

Quid est igitur, inquit, quod requiras? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Maximus dolor, inquit, brevis est. Quid iudicant sensus? Omnes enim iucundum motum, quo sensus hilaretur. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Quis est tam dissimile homini. Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore.

Code Block

<?php

/**
 * Get related posts.
 *
 * @param array   $args   WP_Query arguments.
 * @return object         The related posts object.
 * @author Greg Rickaby
 */
function grd_client_get_related_posts( $args = array() ) {

    // Set transient key.
    $transient_key = 'grd_client_related_posts_' . get_the_ID();

    // Attempt to fetch from cache.
    $related_posts = get_transient( $transient_key );

    // If a transient isn't available, run WP_Query...
    if ( false === ( $related_posts ) ) {

        // The default related term type.
        $term_type = 'tag';

        // Attempt to get the category.
        $term_ids = wp_get_object_terms( get_the_ID(), 'post_tag', array( 'fields' => 'ids' ) );

        // Fallback to category if no tag is present.
        if ( empty( $term_ids ) ) {
            $term_type = 'category';
            $term_ids = wp_get_object_terms( get_the_ID(), 'category', array( 'fields' => 'ids' ) );
        }

        // Setup default WP_Query args.
        $defaults = array(
            "{$term_type}__in"       => $term_ids,
            'ignore_sticky_posts'    => 1,
            'no_found_rows'          => true,
            'orderby'                => 'date',
            'order'                  => 'DESC',
            'posts_per_page'         => 3,
            'post__not_in'           => array( get_the_ID() ),
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        );

        // Parse arguments.
        $args = wp_parse_args( $args, $defaults );

        // Run the query!
        $related_posts = new WP_Query( $args );

        // Finally, story the data for 24 hours.
        set_transient( $transient_key, $related_posts, 24 * HOUR_IN_SECONDS );
    }

    return $related_posts;
}

Paragraphs with Image Alignments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum nisi imperdiet dolor ultricies sollicitudin. Quisque vel sapien est. Nulla rutrum gravida rhoncus. Nulla ornare in nulla in accumsan. Etiam aliquet commodo urna non placerat. Pellentesque nibh lacus, aliquet ut tristique eget, pretium sed nisl. Donec mauris turpis, malesuada vel rutrum eget, consectetur nec libero. Curabitur bibendum vehicula mi eget tincidunt. Nullam tincidunt ultrices nisl nec vehicula. Aliquam a euismod metus.

Nulla tristique nec lectus eget rhoncus. Aliquam quis purus in magna egestas egestas in vel purus. Phasellus vel viverra libero. Nam faucibus nulla in convallis faucibus. Duis vitae venenatis leo, at congue lacus. Aliquam erat volutpat. Ut sagittis quis ligula ultricies adipiscing. Aenean molestie nisl vitae quam cursus, quis iaculis risus ornare.

Maecenas ornare eros sit amet mattis accumsan. Vivamus augue lacus, lacinia eu condimentum a, consectetur et massa. Donec at dui nec nunc lobortis feugiat. Mauris pulvinar, metus ultrices aliquet eleifend, justo augue molestie sapien, id condimentum nisi nulla vel erat. Fusce ut feugiat lorem, at cursus erat. Aliquam non nisl porttitor, malesuada erat at, fringilla sem. Curabitur fringilla sit amet nisi eget malesuada.

Donec rutrum adipiscing gravida. Aliquam sollicitudin fringilla eros eu dignissim. Nunc quis augue quis sapien aliquet pulvinar id ac elit. Donec convallis dolor eget eros cursus lacinia. Nam tincidunt, sapien eget pulvinar bibendum, augue nunc cursus mauris, in feugiat est nunc vehicula ipsum. Ut tristique aliquam diam nec mollis. Mauris in enim magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in facilisis velit, at tincidunt metus. In turpis libero, convallis et adipiscing commodo, scelerisque aliquam arcu. Sed pretium metus sapien.

Donec urna nunc, porttitor vitae lobortis vel, semper in magna. Etiam nisl tellus, placerat a imperdiet egestas, auctor eget justo. Maecenas feugiat, tortor vitae molestie facilisis, lectus nisi volutpat eros, in posuere justo dolor id orci. Morbi vitae nunc quis eros varius vulputate. Phasellus ut mi sit amet libero porttitor venenatis. Sed dignissim orci quis molestie mattis. Vestibulum vulputate aliquet dolor, sit amet lobortis tortor ultrices ac. Sed ac dui ut justo gravida sagittis at eget nulla. Sed laoreet scelerisque sagittis. Pellentesque nec elit ut ligula vestibulum fringilla eu in nulla. Quisque suscipit purus sit amet libero porta, eleifend facilisis enim faucibus.

Various Image Sizes

Thumbnail (150×150)

Medium with Caption (300×300)

Randomly generated image from LoremPixel.com

Large Image (640×480)

Extra Large Image / Wide Width (1024×768)

The End. 👋🏻