Our vision is to be the go-to resource for design for other teams across the WordPress 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.
If you have a ticket that you would love to see focused in this release, please leave a comment at the open call.
GutenbergGutenbergThe 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/ updates
Leave your thoughts around IA or layout for the Edit Image 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. placeholder on the corresponding ticket.
Today, Gutenberg 5.7 was released! More than 48 contributors participated in this release. Find out what’s new.
The Gutenberg block directory
The past two weeks, people involved in this project have been focused on research, especially competitive analysis. The team is thinking about exploring breaking the project down into multiple steps:
Discovery of blocks through search
Previewing a block
The installation process
Loading a page with missing blocks (we already handle this, but it’s not connected to re-installing or re-activating)
If anyone’s interested, please help review the competitive analysis issue and leave any thoughts you have, or post any examples you can think of. @iviolini and @melchoyce will write up a recap before the end of this week.
This library (that used be called WP5.0 library or similar, has grown organically while elements were added on an as-needed basis. The result is that it’s sort of become a messy array of disconnected pieces.
Components → smallest UIUIUI 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. components (buttons, inputs, checkboxes, etc), directly 1:1 with @wordpress/components
Patterns → larger patterns made up of individual UI components (blocks, navigation bars, Gutenberg’s sidebarSidebarA 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., etc)
If you have additional thoughts or ideas, please leave them in the comments of these notes. There will be a summary post for this particular topic soon where you can leave your ideas as well.
File organisation and naming conventions
There’s not really a good standardisation in naming files and components in Figma. Some examples from our current library:
Some examples from our current library:
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./Publish-Title/Save_Draft
There’s a short discussion about the approach: Uppercase/lowercase, dashes, underscores or spaces.
@boemedia suggests doing an inventory of what type of files / components we have and work from there. @tinkerbelly would love it if our design library were as close as possible a mirror to the code—having a shared mental model between devs and designers can make it easier to communicate.
So if we look at how the @wordpress/components package is organised: https://github.com/WordPress/gutenberg/tree/master/packages/components/src, there are a couple of points here
It’s a totally flat structure, with all components at the top level. We may want to be more aspirational with how we organise our library for now.
The folders are named using lowercase-hyphens, but the components themselves use UppercaseNoSpaces
If you have thoughts on this topic, please feel free to share them in the comments.
Design table at WCEU
In June, it’s WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe in Berlin. There will be a design table at contributor dayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.. But as not everyone will be able to travel to Berlin, it would be nice if people could join remote. This will be an agenda topic for next week, so please join if you have ideas on this!