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 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: 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: Sep 12 – Sep 23

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

Integrating Document Outline into list view

A couple of explorations on how the List View might look if we integrated the Document Outline into it. This would simplify the top toolbar. GH Issue.

Continuing on Placeholders

Continuing with making placeholders that work well in patterns, one PR expands the minimalist style to the Video 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., and another refreshes the appearance from that of a dashed border to a simpler style. In progress here and here.

Updating link/unlink buttons

The link/unlink buttons have been updated to be regular icon buttons. Completed here.

Split inserter

The inserter for patterns is being split into a column of categories and a column of previews. In progress PR, and original design.

More Safari text selection fixes

Previously thought to have been fixed, the selection issue now has a new patch applied, that should be more resilient. Completed with more to come.

Media Library Inserter

New work started to on a new Media tab in the Inserter, which will help users adding images to the content without having to open the Media Library. It could also offer an option to search Openverse.

Image dropping modal

Idea: a small modal that appears when users drop a file outside of a drop area, offering them three options: save the file to the Media Library, append it to the post, set it as 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.. Original issue.

Refreshing patterns for the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block

A proposed refresh of the patterns that come bundled with the Query Loop block.

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/ Design Library update

Updates to the WordPress.org Design Library with components for the recently redesigned Global navigation and also improved the footer components with some variations.

WordPress.org/mobile

There’s a new design for the wordpress.org/mobile page.

Progress on Twenty Twenty-Three theme

Selected style variations have been added to the TT3 theme with edits that were suggested during the curation round. So now would be a great time to test, test, test all variations!


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

TT3 default theme: One week left to submit style variations

Hey everyone, just a quick reminder that there’s one week left to submit style variations for the TT3 default theme before submissions close on August 31st.

Check out the kickoff post for submission details, or browse some of the beautiful work that’s been submitted already ✨

+make.wordpress.org/themes/

‘Open Floor’: Design Team Bi-weekly Meeting 10 August 2022

Its been a while since we’ve had an agenda based P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. published on the Make Design Blog. The most recent one dates back to October 2021. I want to invite contributors to attend the bi-weekly meeting today at Wednesday, August 10, 2022, 15:00 UTC in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

We’ll have an ‘open floor’- type meeting as seemed most effective for almost an year now to discuss the following items:

  • Design Table Lead for WordCamp US 2022
  • Design Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts.
  • Big Picture Goals
  • Bi-Weekly Meeting

Hoping to see you all there!

#agenda, #meeting-agenda, #weekly-design-chat

Design Share: July 4–15

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

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/ redesign — call for input

A kickoff post for the redesign of the WordPress.org Homepage and Download pages was shared on the Make Design blog recently:

With a new design style making an appearance in various places across the site, it seems like a good time to turn our attention to the home and download pages, two of the most-visited pages on WordPress.org and a well-worn path for those coming to experience WordPress.

@eidolonnight

Please share your ideas about how you envision these two pages taking shape directly on the post!

Design Library updates

Several new popovers have been added to the WordPress Design Library, like the “Publish” and “Color” popovers. They can be found in the “Views & Stickers” page of the library.

Navigation 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. bulk insert

@javiarce shared a prototype for inserting several items at once for the Navigation Block to ease the creation of new menus. Check out the design and prototypes, or weigh in on the original issue.

FSE usability testing

A number of design contributors volunteered to run usability testing sessions as a part of this month’s Full Site Editor outreach call for testing. @annezazu published an excellent recap of the testing sessions that’s full of valuable insights about some of the difficulties users encountered. Huge thanks to @javiarce @estelaris @ericcarco and @colourpress for conducting these sessions!


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 Share: May 9–20

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

Multi-entity Saving: drafting and scheduling changes

@javiarce revisited his original design proposal to add drafting and scheduling capabilities to the site editor. Design of the second iterationPrototype.

Controls for interactive states

@javiarce submitted a proposal for an interface to enable interactive states (:hover, :active, :focused, etc.) to specific blocks’ properties. Design and prototype.

Creating a Template Part from scratch

@jameskoster explored how we can improve the experience when creating template parts from scratch in Gutenberg issue #41008.

Pattern modal

@jameskoster is working on designs to consolidate the various pattern browsing experiences into a single component.

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Dependencies project

@shaunandrews shared some early thoughts in the Design channel about the Plugin Dependencies project, specifically how we can improve the flow of installing a plugin that requires additional plugins.

3D model support

@fcoveram has been working on integrating 3D model content in Openverse results by creating new components and layouts for results and single result view.

Openverse Design Library updates

@fcoveram started updating the Openverse Design Library by using the WordPress Design Library utility components. This sync aims to ease the design contribution onboarding.


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