Design Share: Oct 24-Nov 4

The Design Team provides design for the WordPress project.

Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

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

Dozent.IS 11:34 am on November 8, 2022

Very good ideas, especially Colorisation of synced blocks.

Regarding Colorisation:
I see more often in my courses that beginners do not always recognize empty lines/paragraphs or headings as such right away (e.g. a line with only a WordPress placeholder like heading).

Is it possible to color-code or highlight or gray out “contentless blocks” in the list view panel?
- James Koster 11:48 am on November 8, 2022
  
  This sounds similar to an idea I shared here: https://github.com/WordPress/gutenberg/issues/41747
  
  I could totally see empty/un-configured blocks being highlighted somehow in list view.
maurodf 1:25 pm on November 8, 2022

Awesome work guys!
I think that Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. link into 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. section is a bit invisible between all that settings, but is very “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/ Style”.
gravnetic 11:30 pm on November 8, 2022

Font: Sm, M, L, XL, XXL with a padding or spacing of 1, 2, 3, 4, 5, or 6. Why are we using these polymorphs? What is wrong with people learning what a tag is?
yllipylla 12:46 pm on November 9, 2022

Great additions. I think that “” icon of Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. can be changed to another icon that better represent CSS such as “{ }” or “{CSS}”…
- Joen A. 1:25 pm on November 9, 2022
  
  Good note, {} does make more sense than <>.