Design Share: Feb 26-Mar 8

Updates from design

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

Continue reading

#design, #design-share

Design Share: Feb 12-Feb 23

Updates from design

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

Continue reading

#design, #design-share

Design Share: Dec 1-Dec 29

Updates from design

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

Continue reading

#design, #design-share

Design Share: Oct 9-Oct 20

Updates from design

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

Continue reading

#design, #design-share

Design Share: Sep 25-Oct 6

Updates from design

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

Continue reading

#design, #design-share

Design Share: Aug 14-Aug 25

Updates from design

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

Continue reading

#design, #design-share

Design Share: Jul 31-Aug 11

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

Learn / Documentation iteration 2

Following up on feedback, here’s a second iteration of the Documentation section 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/. The best way to review and leave feedback is to first give this prototype a good test, and then consider leaving feedback directly in the Figma file.

Learn / Developer Resources iteration 2

Progress with an i2 as well on the Developer Resources section of WordPress.org. Also here, please give this prototype a good test, and then consider leaving feedback directly in the Figma file.

Learn / Forums iteration 2

Also an i2 in the Learn categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. are the Forums. Review first this prototype a good test, and then consider leaving feedback directly in the Figma file.

Learn iteration 2

See also: video thumbnail template examples:

Finally rounding out the bigger section that had the most feedback is the treasure trove that is the Learn section. Please give this prototype a thorough test, and then consider leaving feedback directly in the Figma file.

Showcase prototype

A clickable prototype of the showcase refresh we previously shared on this channel. Have a look!

WordPress 6.3 Lionel Artwork

6.3 is named after Lionel Hampton, and here’s the shiny record artwork for this release.

6.3 Release Video

A video to celebrate both the release of WordPress 6.3 Lionel, but also to celebrate that the site editor is coming into its own. Watch it on YouTube as well.

6.3 Release Demo Site

A microsite to celebrate and coincide with the release. Have a look!

Photos Directory mini-refresh

Kudos @coffee2code for giving the Photos Directory a small visual refresh to use the modern blue.

Blocks

Click to zoom.

A new page in the Extend category, “Blocks” aims to outline what you can do with the blocks in the editor. Read more here!

Style inheritance

Style inheritance is becoming increasingly complex, we’ve been exploring ways to communicate the source of a given style, when local overrides are present, and offer shortcuts to make those overrides the default. Issue.

Template details + Inspector relationship

The details panel for certain templates was enhanced in 6.3. As we expand this to all templates moving forwards it’s important to nail down the relationship between the template details panel in the site editor, and the template inspector in the full screen editor. Issue.

Table view and component theming

Expanding the template management experience in the site editor is something we hope to get to in 6.4. A robust Table component should underpin this effort, and will be essential as we explore the admin design in more detail too. A consideration there – additional to the features of the table itself – is the theme-ability of components. Admin themes, contrast preferences, etc should be factored into the design. We’ve been trying some of the new variable tools in Figma to explore light and dark modes, with high contrast and spacing preferences. 

Post Formats – 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. style

This initial exploration seeks to offer a quick-publish flow for images, quotes, videos, and other post formats. Partially synced patterns make it convenient for the user to update the design for any format in one go. The format itself is applying intrinsically – if a post consists of only an Image block then it is an image post. 


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: Jun 19–Jun 30

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

Site Editor Legends

A small set of “legend” style pictograms depicting various 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. elements 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.

Navigation “focus mode”

Menus can be edited in isolation, just their content and none of their style. If you want to edit their styles, you have to edit the menu in context of a template or template part. On its own, this differentiation can be a little confusing, but the split is similar to how blocks in the Style Book are styled. For that same reason, this mockup leans into an incoming Style Book refresh to add in-canvas controls for orientation and otherwise. Issue.

Reusable Blocks, Library, “Patterns”

In 6.3, you will be able to create and edit your own custom patterns. Since the underlying tech is similar to that of reusable blocks, a rename is being considered, so reusable blocks will simply become “Synced patterns”. Here are some related mockups. Issue, Issue 2.

Editing prompt layout shift fix

Small PR to fix a layout shift between the default appender — the first prompt to “Type / to choose a block” — and the empty paragraph thats added there on click.


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: Jun 5–Jun 16

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

Pattern Library

Closing in towards completion are two important phase 2 PRs as shepherded by Glen, Aaron and Saxon, with aim to have a version of this in 6.3. PRs to follow, 51144, 51078.

Modal radius

Small PR to update the border radius from 8px to 4px to better match buttons that sit inside.

Toolbar button refinements

Issue outlining some visual improvements to how the buttons on the right side of the editor toolbar can be refined a bit. Issue.

Styling drop caps

New issue outlining how we can add more customization controls to the drop cap option. Issue.

Styling and customizing ordered and unordered lists

New issue outlining improvements to the list 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. controls, such as customizing the bullet, the type of numeral, color, or size. Issue.

Add template explorations

Polishing some details around the current flow, including updating the template titles. Also exploring a longer-term update which brings the add-template flow into the command palette.

Home template details panel

Putting the finishing touches on the Home template details panel. PR here.

Site editor publishing

PR to add a publish flow that works in context of the new content/template editing split.

Learn Refresh

Higher res version. With the first sketch shared early the WordPress core Slack to gather initial impressions, sections in the Learn categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. on 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/ are being revisited in a minimal and pragmatic way, with a new design language that can be systematically applied to multiple pages and sections. Note that these mockups are still just that, mockups, which is why they are full of lorem ipsum text and without all current feedback applied yet (please keep it coming). Hopefully the design language can inspire content updates that can leverage and inform these designs.


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: May 8—May 19

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