Creating custom WordPress blocks with CSS and JavaScript for the Center for Artistic Activism Website

Project Overview

Summary

I designed and programmed custom styles and components for a WordPress child theme for the Center for Artistic Activism (C4AA).

Team & Timeline

3 months freelance commitment working in a remote team of 3 designers/developers

Responsabilities

Tools

  • CSS
  • JavaScript
  • WordPress
  • GitHub

Outcome

A new website with custom WordPress blocks that met C4AA’s branding guidelines

Problem and Context

C4AA is a New York-based arts non-profit that uses arts to bring social change. In 2019 their brand had outgrown their current websites, leading them to redesign their website.

What I did

Design

My role involved refining the design visual during programming. C44A had branding guidelines, but not all my assignments came with detailed specifications. For example, I received a rough mock-up on how to design the posts’ meta-data. To improve the idea, I chose to change the background color of the meta-data from red to black to give a more distinct separation between the hero image.

Post meta-data mock up and final result

Front-End Development

My most significant contribution was creating custom, randomized polygon-shaped headings and buttons to match C4AA’s print materials.

To begin, I established the fundamental polygon and rotation styles on the buttons. More specifically, I:

  • Gave all headings the polygon form using the CSS clip-path property
  • Used CSS Custom Properties to set the values that would later be randomized, such as the clip-path corners, and the rotation
  • Using custom properties to pull in the established brand colors GitHub ticket showing a photo of C4AA print materials CSS code for clip-path headings

To randomize the polygon shape and the rotation, I created the functions addBlockClipPath() and addPlugInButtonClipPaths().

These functions receive a set of HTML elements and apply a randomized rotation value and randomized clip-path end-points. JavaScript code for clip-path effect

C4AA clip-path effects applied to the website's headings and primary buttons C4AA clip-path effects applied to the website's headings, secondary buttons, and pull quotes

The main drawback with my original functions was that they selected headings at an element level instead of selectively at a class level.

GitHub comment describing the issue with using global selectors instead of class selectors

Next, I used the Gutenberg API to create custom blocks for content editors to add the polygon effect at a class level.

By researching the Gutenberg API, I learned how to create custom blocks for buttons and headings. JavaScript for creating custom WordPress blocks

With the custom blocks available, polygon clip-path styles could be applied more selectively.

Content editors could select when they would apply the polygon style, and the clip-path functions worked at a class level. Custom WordPress blocks for clip-path buttons and headings GitHub pull request showing how instead of selecting all headings, the clip-path function selects only elemenets with a specific class

If I could go back, I would have made the custom block more identifiable on the visual editor’s toolbox.

When an editor creates a new block, the thumbnail options for headings and buttons look the same, and the label indicates which one applies the clip-path effect. Custom block thumbnails look the same as the standard WordPress blocks

On the upside, once someone uses the clip-path style, the visual editor shows a visible difference, as the image below suggests.

This difference allows the content editor to see where they have applied the polygon style on a draft without going into preview mode.

Custom headings and buttons in the WordPress editor have different colors and shapes than standard headings and buttons

Learnings

This project introduced me to a remote development workflow and collaboration. I also learned to use semantic commits to provide concise and meaningful context around my pull requests.

Outcome

Because C4AA loved the headings and buttons, they requested me to apply similar styles to other elements in the site. The modularity of my code simplified this task. My commitment to C4AA ended before the site launch. However, their new site launched in November 2019 with the rotated polygon styles.