Design Share: Apr 11–22

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. icon

@joen added a new filter icon for showing in the 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. toolbar when no duotone filter is applied.

Design controls for interactive states

Still a work in progress, @javiarce and @joen explored some ideas to manage the style of elements depending on their state (hovered, focused, active, etc.).

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. block patterns

@melchoyce has been working on developing resources for WordCamps based on common content patterns across sites that can be created as block patterns.

Global Styles panel revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

@critterverse and @joen brainstormed a couple of ideas for reorganizing the Global Styles panel to streamline the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and better accommodate the “Browse styles” button.

Design template

@javiarce published the starter template he uses to showcase designs to the Figma community. The template contains some nice defaults like a cover, documentation elements, cursors, labels, and a simple page structure, which can be useful to speed up the repetitive setup of a new file.

Documentation design

@estelaris has been working on a design for support/documentation pages that is based on the wordpress.org/news look and feel, and shared a great update during the last Design team Show & Tell call.

About page headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. artwork

@fcoveram shared some design options for the 6.0 About page header artwork on the Trac ticket. We discussed the options in the recent Design team Show & Tell call and folks are leaning towards the option on the left!

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 13.0 release assets

@joen with the help of @beafialho contributed release assets for the 13.0 release of the plugin.

If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design, #design-share

#design, #design-share