Author Card Block Exploration

During WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. 2019 the team at the design table explored a number of ideas for creating an author card blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. This has been explored previously, and may make sense to pick up again if there is interest. This is a followup to capture our thoughts and the directions we explored.

Design concepts

Frontend

Template A

The first template explored a more center aligned concept.

Template B

While the second template was more streamlined, and fit with a design that is seen more often.

Backend

This explores a flow where you choose an existing author profile, add it to the block, and then are able to turn certain features on or off. It’s a simpler flow, and doesn’t allow for custom content, but it may be worth considering as a starting point.

Process

We began by discussing how this block would get its data. We considered pulling from user profiles, as well as an option to add a custom block. We then looked at ways to display the block on the frontend with different styles.

Inspiration

Some examples of author cards on the web:

Proposed block components

  • Author image
  • Author name
  • Description
  • Link to website
  • Social sharing links or social media links
  • Recommended blog posts to read

With all of these components making up the author card block, we thought about ways to break it into smaller blocks. Here’s the first sketch where we considered what these components could be:

Location

This block belongs at the end of a blog post, and is usually set to the author profile writing the post. How useful is it in other contexts? If it’s only for dropping at the end of every post, it may not be a great candidate for existing as a block.

Choosing a design direction

We discussed a lot of directions that could be pursued and started with:

  1. Choose from an existing author profile to populate the block, and/or add a custom author and populate the block yourself.
  2. Offer multiple templates to change the look of the block on the frontend

We used markers and paper to begin with:

And then jumped into Figma to get those ideas into one place:

Next steps

There are still a lot of questions that need exploring, such as:

  • The overall value of the block. Where it goes, how you’d get it to stick to the bottom of blog posts, what other uses it offers.
  • Data source – Should we allow adding custom content, or only pull from author profiles?
  • Template and styling options – How much design tweaking makes sense for store owners, and which options should we offer out of the gate.
  • Additional features – Does adding recommended posts make sense? What about social icons?