X-post: DevHub getting a new look

X-comment from +make.wordpress.org/docs: Comment on DevHub getting a new look

Design Share: Nov 7 – Nov 18

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

Style variations for 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. types

Block style variations are preset block designs. These mockups explore a way to edit them in one place, as well as create new ones. Issue.

Drop shadow tools

Editing and applying drop shadows to blocks, locally and globally, should be possible. These mockups explore how. Issue.

Developers redesign

Work was started on a redesign of the developer section of the 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/ support pages. Figma file

Enterprise redesign

A mockup for a redesign of the Enterprise page of wordpress.org to follow the new style from News. Figma file.

Updating the Padding control

A follow-up design evolution of the preset padding control in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.


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

A refresh of WordPress.org/Showcase

In the near future, the Showcase section will receive a refresh in the visual style started with /News:

The gallery above shows the three basic layouts: landing page, single page, and archive. 

The refresh of the Showcase site addresses several requests that have been made in previous discussions (Call for design: WordPress Showcase, Showcase redesign, and this Showcase GitHub issue), such as adding supplementary metadata to each showcased site, improving the mobile page layout and, in general, making the design of the whole section more modern and exciting. The current work represents a starting point that will continue to be iterated upon as additional features, and content changes are explored.

Feel free to provide feedback here, in the Figma file, or follow the Showcase GitHub repository for future developments and conversations.

#redesign

Design Share: Oct 24-Nov 4

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

Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.

Exploring the Add the ability to add custom CSS through Global Styles, or in Group blocks.

Sticky groups

Explorations on the ability to make a group block sticky.

Move document information and outline to list view panel

Added an illustration for the empty state of the outline list that is now inside the list view panel. PR

Push local 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. styles

Exploring ideas for a functionality that would allow users to extend the local styles of a block to all the other blocks of the same type. Design file and issue on GitHub.

Import, export, copy styles without switching themes

Exploring the ability to import, export, or switch to styles from a theme that’s installed but isn’t your currently active theme.

Copy and Paste Block Styles

Exploring a feature for copying and pasting styles between blocks. Design file and issue on GitHub.

Colorisation of synced blocks

A long-time requested feature! PR 45473 is putting the finishing touches on designs to highlight globally synced blocks like Template Parts and Reusable Blocks in the 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..


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: Oct 10-Oct 21

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

Brushes Collection

Marko is looking at expanding brushes collection while improving their style.

Browse mode

Jay is working on the finer details of Browse mode, which will elevate the content editing experience in the Site Editor. Check out the PR here.

Top Toolbar

Jay is exploring how we might update the Top Toolbar option in the Editor so that it occupies less space, with one eye on smaller applications 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.

Font pairs & management

Joen is exploring font management features. 


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

X-post: WordPress.org Redesign Update

X-comment from +make.wordpress.org/meta: Comment on WordPress.org Redesign Update

X-post: New design for HelpHub in WordPress.org

X-comment from +make.wordpress.org/docs: Comment on New design for HelpHub in WordPress.org

X-post: Renaming WordPress.org Support to Documentation

X-post from +make.wordpress.org/meta: Renaming WordPress.org Support to Documentation

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