https://github.com/kjellr/wcus-block-styles

A handful of artful block styles, created for WCUS 2021.
https://github.com/kjellr/wcus-block-styles

css gutenberg wordpress wordpress-plugin

Last synced: 8 months ago
JSON representation

A handful of artful block styles, created for WCUS 2021.

• Host: GitHub
• URL: https://github.com/kjellr/wcus-block-styles
• Owner: kjellr
• License: gpl-3.0
• Created: 2021-08-30T18:55:47.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-01T23:49:44.000Z (over 4 years ago)
• Last Synced: 2025-05-07T12:47:09.368Z (about 1 year ago)
• Topics: css, gutenberg, wordpress, wordpress-plugin
• Language: CSS
• Homepage:
• Size: 114 KB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# WCUS Block Styles

![](https://cldup.com/bS4FW19diq.png)

## Overview

This repo houses a demo plugin to show off a handful of artful block styles. These were showcased as part of a presentation called "Creative Use of Block Styles" at [WordCamp US 2021](http://us.wordcamp.org/2021/).

## Block Styles

### 1. Rotate (Image Block)

Endlessly rotates an image. 

![](https://cldup.com/6h9Cqj_Y0j.gif)

### 2. Jazz Cover (Image Block)

Applies an image mask and filter to any image block, mimicking a style from Blue Note jazz record covers. Animates on hover. 

![](https://cldup.com/qseV9ZbrpL.gif)

### 3. Photocopy (Image Block)

Applies a photocopy-like effect to any image. 

![](https://cldup.com/KIcTCCrfdW.gif)

## 4. Warped (Heading Block)

Applies a stretched, wavy effect to text, reminiscent of the warping that occurs if you move your paper around while photocopying. 

![](https://cldup.com/DelMMyadnv.gif)

### 5. Photocopy Collage (Gallery Block)

Arranges gallery items vertically, and masks each one as if it's on a torn piece of paper. Please note, this one is written for [the refactored Gallery block](https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/) that arrived in Gutenberg 11.4 and will be included in WordPress 5.9.

![](https://cldup.com/fa9Qx8vGjr.gif)

### 6. Shifted Baseline (Heading Block)

Applies a random(ish) pattern of vertical baseline ajustments to each individual letter in a heading block. The letters resolve back to their default positions on hover. 

![](https://cldup.com/Z9A9WFyQYd.gif)

### 7. Shifted Baseline (Intense) (Heading Block)

Applies a random(ish) pattern of vertical and horizontal baseline ajustments to each individual letter in a heading block. The letters resolve back to their default positions on hover. 

![](https://cldup.com/3NzLIh5GvD.gif)

## Bugs?

Yes, there are bugs! All of the styles here are just proof-of-concepts. With that in mind, please do feel free to file a bug report (or to provide a fix!). In additon, if you know of a better way to accomplish one of the block styles here, I'd absolutely love to hear about it!

## More Resources

- [Block Styles Boilerplate](https://github.com/Automattic/gutenberg-block-styles)

- [Block Styles Documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/)

## Questions? 

Ping `@kjellr` on twitter or WordPress.org slack. You can also find me at [kjellr.com](https://kjellr.com).