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.
TrelloTrelloProject management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. and Handbook Organization
Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it.
Topics of Interest, using tags/categories and ways to surface
The blue box is a bit leaner
@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.
Call for WordCamps
If you are attending or running a 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., particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #designSlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.
List of Active Contributors
This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11yAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.
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 were given by @mapk. The focus area for this month is highlighted here:
Great news from today’s chat #core-editor revealed that the Navigation 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. is super close.
@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.
Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.
People can leave comments on any of the mentioned PRs or check out the label Needs Design Feedback in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.
Exploring some of the hover/selection states in Gutenberg blocks
Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.
Block Style System
@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides
This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the 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. because it standardizes how UI can be constructed
The idea for the proposal is to find a way to help standardize how HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites./CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography.
Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.
@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.
Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.
Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.
Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.