The Design Team provides experience, interface, and visual design expertise for the WordPress project.
Want to get involved? See our handbook and drop into #design once signed up for volunteer opportunities. Our vision is to be the go-to resource for design for other teams across the open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
New designs for an Events section on WordPress.orgWordPress.orgThe 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/ (previously shown here) are done and implementation is currently in progress. The scope of this first release is in line with the new brand, and reuses existing components.
Drag and Drop
To aid in the drag and drop creation of basic layouts, this PR aims to make it possible to drag an image or blockBlockBlock 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. onto another block and have dropzones appear before and after the block you’re hovering. If it’s a horizontal flex container, the zones appear vertically before and after; if it’s a vertical flex or flow container, the dropzones appear horizontally above and below. It can be the drag and drop equivalent of “Add before” and “Add after”.
Gallery captions and potential lightbox behaviors
Mockups showing color-inheriting caption styles can benefit contrast in both light and dark themes.Mockups showing a potential future “external captions” visual style for galleries.
Image captions in galleries are not the most legible at the moment, with a dark scrim and hard-coded colors for scrim and text. Inspired by a recent PR to add light-weight scrollbars for those very-long-caption-edge-cases, these mockups strive to revisit captions to avoid the scrim and leverage theme background and text colors for better integration. Also, potentially, to add a gallery variation that has external captions instead of overlay captions. Issue.
Revisiting social links
Adding social sharing links remain both an important part of site building, yet one of the clunkier flows altogether. With one block for each social service, adding multiple buttons is double the amount of clicks and often involves searching. In a conversation on improving the situation, this idea is to have a single socia icon block that always defaults to the WordPress service, but provides an easy transform to any other icon in the popover next to the URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org box. Issue.
Local nav and breadcrumb
Mockups that explore a way to simplify and make flexible the local navigation and breadcrumb components for WordPress.org. Issue.
Unified toolbar button sizes
Editor toolbar before (top) and after (bottom).
Toolbar buttons are now a single unified size, 32px across, and toolbar toggle sizes are unified across top toolbar and block toolbars. Before there was a mix of 32px, 36px, and uneven spaces as a result. PR.
Data views: Grid layout
Follow the link to view full-size.
Mockups for grid layout in different contexts.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..