Design Share: Jan 16-Jan 27

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

Hosting Redesign

The Hosting page of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ is currently being redesigned, here’s a first iteration with a clean, white look, similar in simplicity to https://wordpress.org/download/.

Jobs Redesign

The WordPress Jobs site (https://jobs.wordpress.net/) is being redesigned, borrowing generic styles from WordPress.org redesign.

Dev Blog Redesign

An exploration of a fresh visual for the dev blog to match the Developer redesign.

About Page Redesign

Ongoing work to redesign the WordPress.org main About page. Figma, GitHub.

Discussing Global Styles IA

Discussing the IA of global styles to explore whether splitting into presets and styles subgroups might make it easier to discover. Join in the conversation on the issue.

Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. with error highlighting

Exploring how we might in the future highlight erroneous CSS code in the Custom CSS box.

Pointers/notices

For increasing awareness of changes, or pointing out new features or tips, inline pointers could be useful. This issue explores one such for the Settings panel.

Shadow control

An exploration into a shadow design tool that can accommodate preset options, and the full scope of css’ box-shadow property.

Link control

An updated design for the add/edit link 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. 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. editor. The new design features some accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) enhancements and better scales to accommodate features we’re looking to add soon.


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/..

#design, #design-share

Design Share: Jan 2-Jan 13

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

Learn redesign

We continued working on the Learn redesign. Figma file.

Themes Directory redesign

Designs for a Themes Directory redesign.

Button Padding

From the department of details that matter, a bug concerning button padding was fixed. Completed in PR 46764.


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/..

#design, #design-share

Design Share: Dec 19–Dec 30

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

Translate Redesign

We explored a redesign of the Translate pages with several things still being worked on.

Top toolbar improvements

For constrained contexts or simply if you prefer, there’s an option to dock 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 to the top of the screen. At the moment this results in a stacked and somewhat clumsy experience, which these explorations aim to mitigate through making the singular top toolbar contextual. Needs dev in 40450.

An in-canvas drag handle exploration

An ongoing problem with the top toolbar option is that there’s no handle for drag and drop. To go along with top toolbar improvements, this is an exploration to move the handle back in context of the block, same color as the text, so it works for either toolbar configuration.

Move outline stats to the top of the outline

The document outline was recently merged into the list view. Responding to feedback that it was easy to miss at the bottom, we moved those stats to the top of the outline tab. Completed in 46648.

A unified 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. components grid

Block editor UI components are currently a mix of sizes ranging from 32 over 36 to 40px in height. This new issue outlines an approach to unifying on 32 and 40px sizes, with 40px being the tall and graceful default, and the more compact size being appropriate for a few specific contexts, such as the top toolbar. Issue 46734.

Adding Fonts

Mockups to go with PR 46332, which explores font management.


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/..

#design, #design-share

Design Share: Dec 5–Dec 16

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

Top Toolbar improvements

When “Top toolbar” is enabled, or when 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. editor is used in constrained contexts, the toolbar is moved from the block context to the top of the viewport. The current behavior is not as elegant as it could be, and in this issue we are exploring enhancements.

Hosting redesign

We worked on the initial iteration of the redesign of the Hosting page. Figma file.

Jobs redesign

We continued iterating the Jobs site adding secondary pages and updating several components. Figma file.

Learn redesign

We worked on the initial iteration of the redesign of the Learn pages. Figma file.


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/..

#design, #design-share

Design Share: Nov 21–Dec 2

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

Developer and Documentation redesigns

We continued iterating the design of the Developer and Documentation pages with feedback from the community and the WordPress Documentation team.

Jobs redesign

We started redesigning the WordPress Jobs website. Figma file with an initial iteration.

Global styles summary view for blocks and styles

We are working on a feature called Style Book, a collection of every 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. available organized by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. that can be used to customize and preview the style of a site. Figma file and issue.

Summary panel grid tweaks

A very tiny improvement to the spacing of items in the post status summary panel. More work to be done. PR.

Snap point updates

Updated mockups for rendering snap-points when resizing images. There is an interesting CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. challenge for rendering the overlay with transparent gutters in both centered, and justified right configurations.

Global Styles panel/drilldown synchronicity

Efforts to add box-shadow controls to the editor have unearthed an inconsistency between Global Styles properties and inspector panels. For example, a missing “Border” panel, resulting in border properties currently being found in the “Layout” section. This PR adds a new border panel, with some icon work attached.

Menu Item Transforms

Building navigation is made slower by having to pick between mostly similar item types, “Page Link” vs. “Custom Link”. This issue details a simplification to hopefully reduce to a single item that can be transformed in the inspector.

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. counter in Openverse

The filters applied counter is coming back to the Filter button and the filter tab. The idea is for improving the content settings flow and how users are aware of the narrowed results.

Browse Mode

Pull Request #44770 reorganizes the site editor so that it is better positioned for exciting future enhancements like browse mode.

Shadows

Pull Request #46228 explores higher definition shadows in the block editor 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..


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/..

#design, #design-share

Design Share: Nov 7 – Nov 18

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

Style variations for 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. types

Block style variations are preset block designs. These mockups explore a way to edit them in one place, as well as create new ones. Issue.

Drop shadow tools

Editing and applying drop shadows to blocks, locally and globally, should be possible. These mockups explore how. Issue.

Developers redesign

Work was started on a redesign of the developer section of the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ support pages. Figma file

Enterprise redesign

A mockup for a redesign of the Enterprise page of wordpress.org to follow the new style from News. Figma file.

Updating the Padding control

A follow-up design evolution of the preset padding control in 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/.


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/..

#design, #design-share

Design Share: Oct 10-Oct 21

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

Brushes Collection

Marko is looking at expanding brushes collection while improving their style.

Browse mode

Jay is working on the finer details of Browse mode, which will elevate the content editing experience in the Site Editor. Check out the PR here.

Top Toolbar

Jay is exploring how we might update the Top Toolbar option in the Editor so that it occupies less space, with one eye on smaller applications of 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. editor.

Font pairs & management

Joen is exploring font management features. 


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/..

#design, #design-share

Design Share: Sep 26–Oct 7

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

Selection style refresh

The visual appearance of selecting text and blocks has been updated to be clearer. Partial selections remain the native indicator, but when the selection starts to include a 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. that can’t be merged, the multi-selection now shows an overlay color across every block selected.

Navigation overlay as a block

Revisited and updated an issue for moving the navigation overlay into a separate block, allowing global styles customization and custom inner blocks. The issue could use your feedback!

Resizing images to snap to wide and full alignments

If you resize an image to be larger than the main content column, you’ll and up with a badly aligned image that stops being responsive. So perhaps we could snap you to wide and full alignments, when you near those? Mockups here.

Removing layout shifts from Quote and Image

Most on-select layout shifts have been removed from the editor, but the image caption and quote citation fields still cause a jump. This mockup explores moving those fields into a toolbar button.

Cover margin bugfix

From the department of details that matter, the focus style for a Cover block was a couple of pixels too tall, surfacing a gap at the bottom. We fixed it


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/..

#design, #design-share

Design Share: Aug 15-26

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

New Homepage and Download pages for WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/

New designs for two of the most high-traffic pages on the WordPress.org site — the Homepage and Download page. The new look & feel builds on the updates that rolled out to the News section last year, putting a more modern and jazzy spin on the WordPress brand.

Making the Site Editor feel more like a design tool

Inspired by the style variation video we’ve been looking at ways to elevate key site editing features (styles specially) in the overall experience, so that the site editor feels more like a holistic design tool rather than a template editor.

Rethinking WordPress.org Navigation

Inspired by some discussion on the Make Meta blog, we’ve been exploring how to clean up and simplify the navigation on the WordPress.org site.

Copy improvements in Openverse

As a quick win in the openverse search experience, we shared a design idea to improve the copy on some pages and make Openverse more clear. Having the search engine inside the WordPress site makes it difficult to convey what is about.

Styles update in Openverse

In the current version of Openverse, text styles are defined per component and differ when placed together. We started exploring a style update to clean and centralize all styles to make the search more consistent.

Placeholders

A literal placeholder style with a dashed line has been used in a few places to indicate the ability to add a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. or a a site logo. This style has been expanded to the Image 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., which now visualizes an inherited duotone 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.. The placeholder also features a blurred background to set it apart in stacked contexts. Tickets/PRs: ImageSite Logo/Featured ImageImage radius and duotone + more

Inspector grid

With ongoing component work and cleanup, here’s a visualization of how inspector components should naturally lay themselves out.

Pre-publish sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. summary section

We continued exploring the pre-publish sidebar with a version that improves the readability of the sidebar by integrating the suggestions inside the main summary section.


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/..

#design, #design-share

Design Share: Aug 1–12

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

Twenty Twenty-Three default theme kickoff

An experimental new process was kicked off for designing the style variation-focused Twenty Twenty-Three theme with a post on the Make Design blog. Join us in 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/. channel: coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-themes-projects.

Visual template building

A number of recent / upcoming developments present an opportunity to implement a more visual, and flexible template creation experience. @jameskoster explored more here.

Pre-publish sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. summary section

@javiarce published a proposal to improve the pre-publish sidebar with a summary section that includes the document title, excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., tags, and categories. 

Editor welcome guide with setup

We have a number of useful appearance and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) options in the Editor. To enable folks to customize their editing experience from the get-go, @jameskoster has been exploring a way to surface these options as a part of the on-boarding process. He recently shared a post on the Make Design blog requesting feedback on the proposal.

Openverse 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.

@fcoveram continued with the Openverse header, this new version proposes shifting the content type and filtering on a popover without leaving the page.

Global Styles previews

When customizing 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. defaults (in Global Styles → Blocks), there isn’t always an in-canvas preview present for the block you’re customizing. By including a preview in the inspector, you can nevertheless get a sense of your changes. @joen explored this in a ticket.

Stepped Slider

The stepped slider is a new 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. control that lets users take advantage of preset spacing values. The effort unearthed some interesting challenges around how to present indeterminate states, and the control is likely to evolve further in the future. Dive into the conversation on the ticket.


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 Slack.

#design, #design-share