Zero to hero: building custom Gutenberg blocks with ACF

Nathan Wallance | Session | Georgetown

Using ACF to create a Faculty Profile block

Custom fields used to pull in profiles from custom post types

If you’re already running ACF it opens opportunities to pull content. Change styles and colors dynamically.

Think about a block building strategy to prevent a bloated library.

Pattern Lab design system

I call it Pandora’s Block

Nathan Wallace

When running multiple sites build your block library into a plugin for easy deployment and maintenance.

Think about designing blocks within a usable system.

Uses GitHub updater as a method to push updates form their repos to the website.

  1. Register your block
  2. Create your field group
  3. Think about accessibility features
  4. Connecting fields to your block
  5. Render your block
  6. Apply dynamic styles to your block (inline block css)

Ready for review: workflows in WordPress

Notes from the live stream of WP Campus

Nathan Monk | Elaine Shannon | Session

After a post has been published you have to un-publish the post. It’s a pretty big deal as it takes the page down.

Moving from one single website user to multiple users created a need for “Border Control” and a governance process to manage the flow of contributions and edits.

Slide of the Draft vs Live Problem
Slide of the Draft vs Live Problem.

Slide of a suggested workflow solution for WordPress edits and revisions
A slide of a proposed WordPress editing workflow.

wearesmile.com has an open beta


Policy Library

stmarytx.edu/workflow

The default WP workflow didn’t meet the needs of St Mary University, they needed to restrict to offices.

They sent all posts to “Submit for Review” instead of publishing it live without review.

Users submit edits for review.

SSO conflicted with varied WP Roles be sure to test for conflicts before moving from WP to SSO accounts.

A good workflow tells the author/editor who the approving admin is so they can follow up if necessary.

Deadlines “Review By”

Bulleted listings of pros and cons.

Presenters would like core to focus on user workflows for users, post types, notifications etc.

How do I wrangle this UX thing?

Notes from the WP CAMPUS live stream.

Robin Smail | Session Information | Penn State

The Basics

What is UX?

User experience (UX), encompasses all aspects of the end user’s interaction with a company, services, and its products. Not just the digital aspects.

Using a hotel booking experience as an example.

reservation process, customer service, room size, cleanliness etc.

UX Design: if visual design is about designing how the product looks then user experience design is the entire human experience with.

User interface design (UI), pieces you make a choice to put on the screen. Toggle, pulldown, text field, check box, radio box.

Why do we care?

Short answer: Easier products to use get used so you can move onto your next task.

When focusing on UX enables the design to focus on the user.

Humans have always been emotional and have always reacted to the artifacts in their world emotionally.

Alan Cooper, President of Cooper

The Daily Grind

Works with Developer and a Designer. The UX designer is the glue that holds things together. The UX designers skills overlap with the other two a little.

Things a UX designer might work on…

  • User research
  • user personas
  • user stories
  • wireframes
  • protoytypes
  • user testing
  • visual design
  • user interface
  • information architecture
  • user interaction design
  • accessibility
  • usability

Different users have different expectations so its important to test and prototype.

What do employers want?

Unicorns!

Ridiculous job descriptions that want everything at all times all day in one person.

MOAR Unicorns!

Some can’t even decide what their “unicorn” is made of…

So many damn buzzwords! in job descriptions. There are no UX unicorns. You need a UX designer in a team with great designers and developers. One person can’t do the job of an entire team.

No. Seriously, give me five things they want in a junior designer.

What are hiring managers looking for?

  • communication
  • learning and challenges
  • initiative
  • creativity
  • portfolio

You will not recognize UX until its really bad. Such as hitting the wrong button all the time. This requires extra time learning the backwards way of using something. UX designers have to know that they are designing for other people… not themselves. Such as making a chocolate cake for someone’s birthday only to discover they’re allergic to chocolate.

Getting there from here

  1. Read and research.
    1. a book apart
    2. steve croog, don’t make me think, it’s not rocket surgery
      1. Take one day a month to look at something as a user
    3. Understand the difference between UX and UI. Understand the role of UX in business
  2. Get to know UX Workflow
  3. Ideate a solution
  4. Test your design on users, gather feedback, make corrections, test more
  5. Develop and execute
  6. Play with the tools of the UX trade
    1. User research
    2. Wireframing
    3. Prototyping
    4. Project Management
    5. Communications
    6. Brainstroming
  7. Take a course
    1. Learning by doing.
      1. Boot camps
      2. Workshops
      3. Design
  8. Get inspired
    1. Visit sites
    2. Bookmark sites for reference
  9. Build your portfolio

Tips

Don’t forget to include examples of parts of the UX workflow… even the bad ones. the process matters

Network with other professionals

  • Slack lurking, professional organizations etc.