Building off of my prior post on creating art and in light of launching a call for art submissions inspired by WordPress’ 20th anniversary, I’m sharing the various submissions I’m working on in case it inspires someone else to join in on the fun. Submissions are due by May 1st, 2023 so fire up your site soon and see where you land.
This post will be lighter on details and will likely be edited as I create more pieces in my spare time.
Working Title: The W Emerges
For some reason, my go-to right now is to split a single image into multiple frames and messing with the format thanks to the Gallery block offering so much flexibility with controls for each individual image within the gallery. After splitting apart each colorful logo into various sizing, I started moving things around, exploring what it felt like to add borders, rearrange blocks, and more. Somewhere along the way, the idea of the W shining through called to me and I started dragging & dropping to get it just right. At first, I landed on something like this but with less blocks “connecting” into flows (see the bottom right corner):

It looked cool but too simple and still a bit too chaotic. I thought some duotone might be neat to frame the W better and mass applied a simple black and grey filter:

I opened the block settings once more and examined what else I could do to switch it up only to remember that I could add a background. I added a black background and landed here with a smile on my face:

The options are pretty endless from there with quick changes to duotone and the overall Gallery Block background. For example, here’s a radically different option that I made in less than a minute:

Or this:

I’m into the darker format and keeping the color the variation of the original 20th anniversary logo but it’s neat to see the possibilities.
Here’s the markup for any nerds out there (note: I did this on a test site using the default WordPress theme and latest version of Gutenberg):
<!-- wp:gallery {"columns":5,"imageCrop":false,"linkTo":"none","style":{"spacing":{"blockGap":{"top":"5px","left":"5px"}}},"backgroundColor":"contrast"} -->
<figure class="wp-block-gallery has-nested-images columns-5 has-contrast-background-color has-background"><!-- wp:image {"id":3625,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x1-5.png" alt="" class="wp-image-3625"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3624,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x2-5.png" alt="" class="wp-image-3624"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3626,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x3-2.png" alt="" class="wp-image-3626"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3627,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x4-1.png" alt="" class="wp-image-3627"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3632,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x1-5.png" alt="" class="wp-image-3632"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3629,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x5.png" alt="" class="wp-image-3629"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3642,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image3x2-2.png" alt="" class="wp-image-3642"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3633,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image4x2-1.png" alt="" class="wp-image-3633"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3639,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image5x2.png" alt="" class="wp-image-3639"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3631,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x2-5.png" alt="" class="wp-image-3631"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3628,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x3-2.png" alt="" class="wp-image-3628"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3634,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image3x3-2.png" alt="" class="wp-image-3634"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3638,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image4x3-1.png" alt="" class="wp-image-3638"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3643,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image5x3.png" alt="" class="wp-image-3643"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3637,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x5.png" alt="" class="wp-image-3637"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3630,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x4-1.png" alt="" class="wp-image-3630"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3641,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image3x4-1.png" alt="" class="wp-image-3641"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3645,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image4x4-1.png" alt="" class="wp-image-3645"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3646,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image5x4.png" alt="" class="wp-image-3646"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3636,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image3x1-2.png" alt="" class="wp-image-3636"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3635,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image3x5.png" alt="" class="wp-image-3635"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3644,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image4x5.png" alt="" class="wp-image-3644"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3640,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image4x1-1.png" alt="" class="wp-image-3640"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3647,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image5x1.png" alt="" class="wp-image-3647"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3648,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image5x5.png" alt="" class="wp-image-3648"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->
Working Title: A Colorful 20
Similar to the above, I decided to try to merge a few of the colorful logos into one cohesive whole, partially inspired by the ways you can extend WordPress while keeping the integrity of the platform:

Again, I felt slightly bored by the empty background so truly messed around until I found a color that I liked:
Here’s where I landed fairly quickly with this one:

Here’s the markup once more:
<!-- wp:gallery {"columns":2,"linkTo":"none","style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"color":{"background":"#03017e"}}} -->
<figure class="wp-block-gallery has-nested-images columns-2 is-cropped has-background" style="background-color:#03017e;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:image {"id":3587,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x1.png" alt="" class="wp-image-3587"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3651,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x1-6.png" alt="" class="wp-image-3651"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3650,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image1x2-6.png" alt="" class="wp-image-3650"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3649,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://annetest.mystagingwebsite.com/wp-content/uploads/2023/04/image2x2-6.png" alt="" class="wp-image-3649"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->
Stay tuned for updates to this post. I have a more involved idea for a piece that I just need to get around to!
3 responses to “Creating art for 20 years of WordPress”
I found this fascinating.
Thanks for checking it out!
I love how sometimes taking something that should, on paper, limit creativity (“use the gallery block!”) can end up being the root of something inspiring. Nice work!