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

Cleaner results layout

After updating most 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 with the new button styles, we made use of the button revisit to polish the content media links and 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. layout of All content results. Design ticket.

Notification banners

As part of the analytics project, we are updating the notification banners for the new privacy settings and other possible performance breaks we need to inform users about.

Detail panels

Continued work to nail down the contents of the details panel in the site editor for various contexts.

Save modal

An updated design for the Site Editor save modal.

Save dock behaviour

We’ve updated the behaviour of the save hub in the site editor so that it only prompts to review changes when there are changes outside the current context. PR.

Patterns

Introduces a way to create and manage patterns via a consolidated “Library” space. This work is leading up to the idea of synced patterns. Issue.

View site link + new external link icon

A design for an unobtrusive “View site” link in the site editor. Also updates the `external` icon making it more harmonious with the rest of the set. 

Document Title

As part of designing the new title bar, we’ve created designs for all cases of the toolbar, across post editor, site editor, top toolbar, and mobile combinations.

Navigation in Site View

A navigation section was included in the site editor late in the 6.2 phase, but was pulled at the last minute due to some intricacies of its behavior. We are revisiting and simplifying these behaviors, with a primary focus on surfacing every menu you have saved, and letting you do basic management in the site view, still directing you to the edit view for intricate operations.

Notification bell

A coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. project, WP Notify, is making progress, and we’re seeking out how we can collaborate with them. For now, we’ve contributed a bell icon.

Condensed margin/padding controls

Thanks to work by Aaron, more condensed unlinked padding and margin controls are close to landing.

Aspect ratio

Collaborating with Rich, mockups for aspect ratio tools are ready for a dev.

Visualizing style inheritance

When building thems in the site editor, it can be unclear from where a particular style originates (theme, user, global unspecific, global specific, local, etc). These concepts explore how to visualize that in an unintrusive way, and could use your feedback.

---

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

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

Document title

Work in progress on a unified document title interface, that contains the most common and necessary actions, and scales to the content/template breadcrumb pattern as well.

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.

Ramon is enhancing revision history management in the site editor, and this concept explores a potential future side by side page comparison. This could also be a juxtaposed version with a before/after slider.

Vertical text

New issue for a design control that adds an option for vertical text. The issue is ready for a dev to pick up.

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

Robert updates the Featured image panel to be more compact and coherent.

Language icon

A new language icon for polyglots to use, or to go with the lang attribute control.

Detail panels

In the site view of the site editor, each 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. section you navigate to we’ve referred to as “detail panels” or “drilldown details”. They are a good opportunity to surface high level options, without needing to dive into the edit view.

Command Center

A first iteration of the command center has landed. As an initial step it’s quick access to items and actions on your site. 

A unified destination for “Add new page”

You can create pages from a variety of locations, such as URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org dialogs, navigation items, the command center, or the site editor. An important part of a site building flow is also to create a slew of pages initially as you are building out your site, then edit them later. These mockups imagine a unified modal for this.

Pattern modal updates

When creating things like Query Loops, Templates, and Headers, there are prompts in the site editor that ask the user to choose a pattern. Previously these prompts opened small, cramped modals that forced the user to scroll a lot to see all the options. They now open comfier ‘full screen’ modals that are capable of showing many patterns at once. 

Call for testing: content/template split in the site editor

The PR to make it clearer when you are editing page content vs. theme template is ready for testing. Give it a spin!

Simplified layout

This POC layout branch is making progress.

Two-factor authentication

Providing designs for the 2fa process, as well as the 2fa re-auth flow.

Drag from media library into patterns

Thanks to work by Kai, you can now drag and drop images from the inserter media library or Openverse tabs into patterns.

Frame resizing

Updating the behavior of the site editor resize handle to both let you scale up into edit view, and scale down to tablet and mobile previews.

Masonry in template pattern suggestion modals

A masonry layout avoids rivers in the thumbnails.

Style variation editing

Editing and saving style variations is an important incoming feature. Existing mockups have style variation picking as drilldowns from an itemgroup, but another option would be a dropdown to select the variation.

Add page detail

Mockup showing how an “Add new page” detail panel could look like as invoked from the site editor.

On-canvas radius manipulation

A quick mockup to demonstrate how we might enable users to change the corner radius of 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. without having to open the Inspector.

AI

A very quick mockup for Anne’s post about AI.

---

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

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

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

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: Image, Site Logo/Featured Image, Image 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