Derek Hanson

Miniature Twenty Fourteen Block Art

The Museum of Block Art is a gallery of art built with the WordPress block editor, pushing the boundaries of core Gutenberg. Inspired by the call for new submissions celebrating 20 years of WordPress, I wanted to create something related to themes.

The “curators are challenging artists to submit WP20 blocks inspired by the 20th anniversary logos and/or the color palette and images from the default themes through the years,” so my thought was to create a miniature version of default theme screenshots using only blocks.

I decided to recreate the Twenty Fourteen Theme, and this is the result.

View On Desktop

If you are on a larger screen, you can see all of the blocks in the desired layout. Once you view the group of blocks on mobile, everything (properly) collapses to respond to the screen size. If you know of a way to “lock” in these blocks to be responsive and stay together, leave a note in the comments. I may be not be able to execute any suggestions, but I’ll give it a shot.

Twenty Fourteen

Menu

In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design.

categories

First Child Category
One Grandchild Category
Parent
Second Child Category
Uncategorized

Meta

Login
Entries Feed
Comments Feed
WordPress.org

The ubiquitous tiny boat image seen everywhere

back view of a person standing on a vast green grass field

a woman standing in a field by a mountain

timelapse photography of wooden bridge near body of water

cloudy skies at dusk with a pier out to the water

woman carrying brown leather bag

Pictures

Featured Images Really Shine in this theme

rough cliff covered with trees in front of ocean

A post that appears in a sidebar

scenic view of agricultural field against sky during sunset

Another amazing post

Proudly powered by WordPress

View on Mobile

Since the blocks don’t look the way they are supposed to on mobile devices, I’ve added an image version here. If you see an image instead of blocks, that’s because you saw this on your phone, and I’m using Block Visibility to conditionally display each version.

Copy the code and do your own remix

<!-- wp:group {"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}}},"backgroundColor":"contrast","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"8px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:8px">Twenty Fourteen</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"8px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:8px">Menu</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"left":"10px","right":"0px"}}},"backgroundColor":"contrast"} -->
<div class="wp-block-column has-contrast-background-color has-background" style="padding-right:0px;padding-left:10px;flex-basis:25%"><!-- wp:spacer {"height":"7px"} -->
<div style="height:7px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"6px"},"spacing":{"padding":{"right":"var:preset|spacing|40"},"margin":{"top":"0"}}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="margin-top:0;padding-right:var(--wp--preset--spacing--40);font-size:6px">In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design.<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontSize":"6px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:6px;text-transform:uppercase">categories</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"7px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:7px">First Child Category<br>One Grandchild Category<br>Parent<br>Second Child Category<br>Uncategorized<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontSize":"6px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:6px;text-transform:uppercase">Meta</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"7px"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:7px">Login<br>Entries Feed<br>Comments Feed<br>WordPress.org<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"75%","layout":{"type":"default"}} -->
<div class="wp-block-column" style="flex-basis:75%"><!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/image.png","id":297,"dimRatio":0,"customOverlayColor":"#99a4ae","minHeight":100,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:100px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#99a4ae"></span><img class="wp-block-cover__image-background wp-image-297" alt="" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/image.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0"}}},"backgroundColor":"contrast","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="margin-top:0"><!-- wp:paragraph {"style":{"typography":{"fontSize":"10px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1"},"spacing":{"padding":{"top":"10px","right":"5px","bottom":"10px","left":"5px"}}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;font-size:10px;font-style:normal;font-weight:200;line-height:1;text-transform:uppercase">The ubiquitous tiny boat image seen everywhere</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-4652275.jpeg","id":298,"dimRatio":0,"overlayColor":"cyan-bluish-gray","focalPoint":{"x":0.56,"y":0.83},"minHeight":100,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:100px"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-298" alt="back view of a person standing on a vast green grass field" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-4652275.jpeg" style="object-position:56% 83%" data-object-fit="cover" data-object-position="56% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0"}}},"backgroundColor":"contrast","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="margin-top:0"><!-- wp:paragraph {"style":{"typography":{"fontSize":"10px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1"},"spacing":{"padding":{"top":"10px","right":"5px","bottom":"10px","left":"5px"}}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;font-size:10px;font-style:normal;font-weight:200;line-height:1;text-transform:uppercase">a woman standing in a field by a mountain</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-378442.jpeg","id":300,"dimRatio":0,"customOverlayColor":"#c1cfda","minHeight":100,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:100px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#c1cfda"></span><img class="wp-block-cover__image-background wp-image-300" alt="timelapse photography of wooden bridge near body of water" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-378442.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0"}}},"backgroundColor":"contrast","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="margin-top:0"><!-- wp:paragraph {"style":{"typography":{"fontSize":"10px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1"},"spacing":{"padding":{"top":"10px","right":"5px","bottom":"10px","left":"5px"}}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;font-size:10px;font-style:normal;font-weight:200;line-height:1;text-transform:uppercase">cloudy skies at dusk with a pier out to the water</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-547557.jpeg","id":307,"focalPoint":{"x":0.89,"y":0.57},"minHeight":286,"minHeightUnit":"px","customGradient":"linear-gradient(0deg,rgb(254,253,253) 33%,rgba(169,183,194,0) 33%)","contentPosition":"bottom center"} -->
<div class="wp-block-cover has-custom-content-position is-position-bottom-center" style="min-height:286px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(0deg,rgb(254,253,253) 33%,rgba(169,183,194,0) 33%)"></span><img class="wp-block-cover__image-background wp-image-307" alt="woman carrying brown leather bag" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-547557.jpeg" style="object-position:89% 57%" data-object-fit="cover" data-object-position="89% 57%"/><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"126px"} -->
<div style="height:126px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"5px","right":"5px","bottom":"5px","left":"5px"},"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"base","textColor":"contrast","layout":{"type":"constrained","contentSize":"60%"}} -->
<div class="wp-block-group has-contrast-color has-base-background-color has-text-color has-background" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"9px","textTransform":"uppercase"},"spacing":{"margin":{"top":"13px"}}}} -->
<p style="margin-top:13px;font-size:9px;text-transform:uppercase"><strong>Pictures</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1.1"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:200;line-height:1.1;text-transform:uppercase">Featured Images Really Shine in this theme</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"right":"13px"}}}} -->
<div class="wp-block-column" style="padding-right:13px;flex-basis:33.33%"><!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-4365242.jpeg","id":314,"dimRatio":0,"overlayColor":"tertiary","minHeight":89,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:89px"><span aria-hidden="true" class="wp-block-cover__background has-tertiary-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-314" alt="rough cliff covered with trees in front of ocean" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-4365242.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"10px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1"},"spacing":{"padding":{"top":"6px","right":"5px","bottom":"10px","left":"5px"},"margin":{"top":"0"}}}} -->
<p style="margin-top:0;padding-top:6px;padding-right:5px;padding-bottom:10px;padding-left:5px;font-size:10px;font-style:normal;font-weight:200;line-height:1;text-transform:uppercase">A post that appears in a sidebar</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"url":"https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-325944.jpeg","id":316,"dimRatio":0,"overlayColor":"tertiary","minHeight":89,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:89px"><span aria-hidden="true" class="wp-block-cover__background has-tertiary-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-316" alt="scenic view of agricultural field against sky during sunset" src="https://myderektest.wpcomstaging.com/wp-content/uploads/2023/03/pexels-photo-325944.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"10px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"200","lineHeight":"1"},"spacing":{"padding":{"top":"6px","right":"5px","bottom":"10px","left":"5px"},"margin":{"top":"0"}}}} -->
<p style="margin-top:0;padding-top:6px;padding-right:5px;padding-bottom:10px;padding-left:5px;font-size:10px;font-style:normal;font-weight:200;line-height:1;text-transform:uppercase">Another amazing post</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0"},"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}}},"backgroundColor":"contrast","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="margin-top:0;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"6px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:6px">Proudly powered by WordPress</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Twenty-Fourteen-Block-Art-ImageDownload

Posted

in

,

Tags:

, , ,

Comments

  1. Mini – MOBA

    […] by Derek Hanson using the following materials: Group, Paragraph, Columns, Spacer, and Cover […]

    Reply
  2. Mini Twenty Fourteen is Live in the Museum of Block Art – Derek Hanson

    […] wanted to learn more about block building in Gutenberg and tested myself with recreating a classic WordPress theme, Twenty Fourteen. I decided to submit my work to the Museum of Block Art, and it was […]

    Reply

Start the conversation or keep it going

Subscribe for Updates

It's not much, but it's something. I post a few things, but not very often so you won't feel spammed. Let me know if I should post more.

More of the same

Discover more from Derek Hanson

Subscribe now to keep reading and get access to the full archive.

Continue reading