{"id":15681593,"url":"https://github.com/kjellr/wcus-block-styles","last_synced_at":"2025-10-12T10:02:45.929Z","repository":{"id":118118941,"uuid":"401454043","full_name":"kjellr/wcus-block-styles","owner":"kjellr","description":"A handful of artful block styles, created for WCUS 2021.","archived":false,"fork":false,"pushed_at":"2021-10-01T23:49:44.000Z","size":117,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T12:47:09.368Z","etag":null,"topics":["css","gutenberg","wordpress","wordpress-plugin"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kjellr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-30T18:55:47.000Z","updated_at":"2022-11-21T01:26:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"e0d527ef-08df-4a08-ad85-188f28505bed","html_url":"https://github.com/kjellr/wcus-block-styles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kjellr/wcus-block-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjellr%2Fwcus-block-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjellr%2Fwcus-block-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjellr%2Fwcus-block-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjellr%2Fwcus-block-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kjellr","download_url":"https://codeload.github.com/kjellr/wcus-block-styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjellr%2Fwcus-block-styles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011040,"owners_count":26084863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","gutenberg","wordpress","wordpress-plugin"],"created_at":"2024-10-03T16:57:20.216Z","updated_at":"2025-10-12T10:02:45.895Z","avatar_url":"https://github.com/kjellr.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WCUS Block Styles\n\n![](https://cldup.com/bS4FW19diq.png)\n\n## Overview\n\nThis 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/).\n\n## Block Styles\n\n### 1. Rotate (Image Block)\n\nEndlessly rotates an image. \n\n![](https://cldup.com/6h9Cqj_Y0j.gif)\n\n### 2. Jazz Cover (Image Block)\n\nApplies an image mask and filter to any image block, mimicking a style from Blue Note jazz record covers. Animates on hover. \n\n![](https://cldup.com/qseV9ZbrpL.gif)\n\n### 3. Photocopy (Image Block)\n\nApplies a photocopy-like effect to any image. \n\n![](https://cldup.com/KIcTCCrfdW.gif)\n\n## 4. Warped (Heading Block)\n\nApplies a stretched, wavy effect to text, reminiscent of the warping that occurs if you move your paper around while photocopying. \n\n![](https://cldup.com/DelMMyadnv.gif)\n\n### 5. Photocopy Collage (Gallery Block)\n\nArranges 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.\n\n![](https://cldup.com/fa9Qx8vGjr.gif)\n\n### 6. Shifted Baseline (Heading Block)\n\nApplies 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. \n\n![](https://cldup.com/Z9A9WFyQYd.gif)\n\n### 7. Shifted Baseline (Intense) (Heading Block)\n\nApplies 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. \n\n![](https://cldup.com/3NzLIh5GvD.gif)\n\n## Bugs?\n\nYes, 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!\n\n## More Resources\n\n- [Block Styles Boilerplate](https://github.com/Automattic/gutenberg-block-styles)\n- [Block Styles Documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/)\n\n## Questions? \n\nPing `@kjellr` on twitter or WordPress.org slack. You can also find me at [kjellr.com](https://kjellr.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkjellr%2Fwcus-block-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkjellr%2Fwcus-block-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkjellr%2Fwcus-block-styles/lists"}