Design Share: Nov 20-Dec 1

Updates from design

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

Events

New designs for an Events section 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/ (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 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. 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

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 URLURL A 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

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