An updated Button component in WordPress 5.4

As the @wordpress/components package becomes the vehicle that implements more and more of the WordPress design system, and as that system matures, its components get more consistent and more coherent.

WordPress 5.4 adds a number of changes and enhancements to the Button component.

Button sizes

In keeping with the overall design direction of the project, the button default height is now 36px. So you no longer need to use the previous isLarge prop variation.

The Button still supports the isSmall variation.

import { Button } from '@wordpress/components';

const regularButton = <Button>My Button</Button>;
const smallButton = <Button isSmall>My Button</Button>;

To keep all the button variations consistent, their styles now declare specific heights.

If you’ve been relying on the previous buttons’ dynamic heights to make them adapt to their content, you’ll want to override the new fixed heights. Make sure you add the rule below:

height: auto;

Icon support

In previous versions, the components package offered a Button component for regular buttons and an IconButton for buttons with icons.

WordPress 5.4 merges those components. To show buttons with icons, pass an extra icon prop to the regular Button component. You can also mix text and icons.

import { Button } from '@wordpress/components';

const myIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" viewport="0 0 20 20">
    <path r="M5 4l10 6-10 6V4z" />
  </svg>
);

const SimpleIconButton = <Button icon={ myIcon } label="Button label" />;

const IconAndTextButton = (
  <Button icon={ myIcon }>
    Button Text
  </Button>
);

Note: the IconButton is still available, but it’s officially deprecated.

Classname changes

In previous versions, icon buttons relied internally on the components-icon-button. With the merger of the Button and IconButton components, WordPress removes this class name and replaces it with .components-button.has-icon.

Recommendation: Don’t rely on any internal className a component might use. If you want to target a specific component, prefer adding your own className prop and use that instead.

Going further

Try out the Button component or the other wordpress/components. Check out the components Storybook.

#5-4, #block-editor, #components, #dev-notes

Devchat summary: November 27, 2019

The year is winding down!

@francina led the chat; @marybaum here taking notes on a holiday-travel schedule.

20 people announced their presence – of course somewhere around 30K are members, and we could ALL have been watching. The more the merrier!

The chat worked from this agenda.

Announcements

Next minor: 5.3.1

The announcements were all about the next minor, WordPress 5.3.1.

@justinahinon and I (@marybaum) announced that he would move the Thursday bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub to Friday so folks in the US could join in without interrupting their Thanksgiving plans.

After some discussion, @azaozz suggested ad hoc bug scrubs every day until release on December 11. He got active emoji support from five people, and then @audrasjb volunteered to host a bug scrub every day this week (the week of December 2).

Highlighted Posts

@francina called the group’s attention to four conversations.

Got opinions? Especially if your feelings are strong, now’s the time to get over there and share your views:

  1. Recap from last week “Regular” chat https://make.wordpress.org/core/2019/11/20/dev-chat-summary-november-20-2019/ (edited) 3:15 PM
  2. Recap from last week “After Hour” chat https://make.wordpress.org/core/2019/11/25/devchat-after-the-hour-november-20/ (edited) 3:15 PM
  3. Tons of good feedback about the 5.3 release https://make.wordpress.org/core/2019/11/15/5-3-retrospective-call-for-feedback/ (edited) 3:16 PM
  4. And tentative release for 2020-2021 https://make.wordpress.org/core/2019/11/21/tentative-release-calendar-2020-2021/ (edited)

And you can always come to devchat, Wednesdays at 21:00 UTC. Find the agenda here, 24 hours in advance.

Calls from Component Maintainers

@francina opened the Call with this wide-ranging intro:

Do we have news from components? Do we have abandoned components that someone wants to adopt? (edited) 3:22 PM

Do we have components that are struggling with the amount of work and need more hands on deck? How can we come together as a community to recruit? (edited) 

See the discussion starting here.

What followed was a general clarification of the difference between a component and a focus, thanks to @sergeybiryukov, who linked to two posts that add some detail.

(I’m listing them in reverse order, so you can read from the general to the specific):

@isabel_brison‘s post introducing the idea of a focus versus a component.

And this post, introducing the Core-CSS group in Slack.

As that discussion ended, @isabel_brison offered to write a followup post, which you can find here.

What are our goals in publishing?

@francina handed the (virtual) mic to @joyously, whose comment on the agenda for this chat asked the group to address goals in publishing.

Essentially, @joyously reminded us that publishers – our users [and as I was trained to think of such folks ~30 years ago, our customers, both internal and external] create content that is going to go more places than just a browser: in emails, feed readers and more. And those environments vary radically in their support for CSSCSS Cascading Style Sheets. and JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors..

In her words:

I am concerned that the trend is toward content that looks good only in a web browser (with JS and CSS) and not good anywhere else.

@joyously

See the rest of the discussion in chat here.

A highlight: @francina linked to this post on Smashing Magazine, that looks at another facet of this issue.

And be on the lookout for more blogblog (versus network, site) posts addressing the topic, so you can add your thoughts.

#components, #core-css, #dev-chat, #focuses

Component Maintainers in 5.3

On the heels of APAC Triage and Bug Scrub Sessions and Bug Scrub Schedule for 5.3, thanks @pento and @davidbaumwald, I’d like to propose something a little bit different.

The WordPress 5.3 release is shaping up to be substantial. There are tons of fixes and improvements 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/, for both users and developers. Even if 5.3 only included the Gutenberg update, it would have been a very nice, very desirable upgrade.

There is more to this release! Currently there are 632 tickets on the 5.3 milestone on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress., both open and closed. A few smaller new features and user facing enhancements are in the works, and a lot of bugfixes and under-the-hood improvements are coming up or already done.

I’d like to propose that component maintainers take more “charge” of the tickets in their components. There is a general expectation that if you moved a ticketticket Created for both bug reports and feature development on the bug tracker. to a milestone you are the “lead” for that ticket and will see it through to completion, or move it to a future milestone if not feasible. But that shouldn’t stop component maintainers from helping to keep those tickets moving.

With the scheduled bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrubs, and the per-component bug scrubs that usually happen at the components’ meetings, the 329 open tickets aren’t that big of a mountain. 

The 5.3 Challenge

During the next few weeks (by betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.-1 scheduled for 23 September) join me in making sure all 5.3 tickets in our components will either be resolved or moved to a future milestone. And if there are any hurdles leave a comment on the ticket briefly outlining the difficulties and include a resolution timeline.

It would also be helpful if during this time all component maintainers do a short, concise update about their component on the weekly coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev chats. These updates would typically include the number of open 5.3 tickets and whether there are any difficulties with any of them. This will help people know where help is most needed, especially any newer contributors who are having trouble deciding where to spend their time.

Also, we have a Docs Wrangler for our release! After 5.3.0-beta-1 is out, it would be great if component maintainers review all changes to their component (if not already reviewed), then, if possible, help @justinahinon with writing or editing dev. notes. There are currently 301 fixes and enhancements committed to the 5.3 milestone and they will need documentation.

The proposed change for component maintainers is to act early, before beta-1, and to regularly make updates and bring any difficulties to the core dev chat.

#5-3, #bug-scrub, #components, #core

Dev Chat Summary: August 28th 2019

This post summarizes the weekly dev chat meeting from August 28th 2019 (agenda / Slack Archive).

Announcements

@chanthaboune mentioned a Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post about using SSL for auto-updates.

@francina mentioned the recently created WP-Notify working group. They had their first meeting and they have two weekly meeting so people from different timezones can attend. If you are interested, join #feature-notifications dedicated 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/. channel.

WP-Notify was also added to the features list page on Make/Core.

@francina also mentioned there is a new time slot for Core tickets/Gutenberg issues triage and bug-scrubs. If you are in the APAC timezone feel free to take part into the bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrubs, they are great to get started in understanding how WordPress is made.

Upcoming Releases

5.2.3

5.2.3 RC 1 is available for testing.

Release leadRelease Lead The community member ultimately responsible for the Release. @whyisjake mentioned they are skipping RC2 for 5.2.3 as there are no new commits since RC1 and no regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. was reported against RC1. The final release is scheduled for this coming Wednesday.

Please continue testing, and provide feedback. If you are new to testing Core releases, there is a guide to get started. Getting involved in testing WordPress means you will be directly involved in raising the quality of the WordPress user experience.

5.3

@francina announced that @audrasjb is joining the Release Team as focus lead for the accessibilityAccessibility Accessibility (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) part.

@davidbaumwald ran the first bug scrub of the release cycle, focused on tickets that are milestoned for 5.3, but haven’t see any movement in some time.

@johnbillion: “We need more people attending bug scrubs and scrubbing bugs. Tell all your friends.”. @davidbaumwald added that’s being added for the 5.3 cycle to give props for those running scrubs.

If you want lead a scrub, please get in touch with @davidbaumwald and it will be added to the official schedule to spread the word.

@azaozz mentioned it would also be great if component maintainers could help triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. their components.

@audrasjb mentioned the accessibility team will run two additional bug scrubs dedicated to 5.3.

@karmatosed mentioned the design team also runs weekly bug scrubs.

@davidbaumwald is maintaining the list of 5.3 bug scrubs. There was a discussion about having it as a sticky post to see if it helps to increase the number of people attending bug scrubs.

@karmatosed published a post concerning the design of WP core About Page. The post is to start a discussion about what could be easier about this screen. It has a few of the current problems around it and then leads into some potential ideas. Any input on this is welcome.

Call for component maintainers

As per today, there is 6 components without maintainer. Any interested contributors is welcome to help maintain components.

@justinahinon mentioned his interest for the Site Health component.

@francina asked if all the components who seem to have a maintainer really maintained.

@jeffpaul did one component maintainers audit this year and one last year, so the current listing is nearly almost folks who committed to maintaining as best they can.

#5-2-3, #5-3, #bug-scrub, #components, #feature-plugins

Call for Component Maintainers

WordPress is organized into 60 components. Each component can have more than one maintainer. A maintainer triages new tickets, looks after existing ones, spearheads or mentors tasks, pitches new ideas, curates roadmaps, and provides feedback to other contributors.

Pings/Trackbacks, Date/Time, Autosave, Quick/Bulk Edit, Export, Import, Mail, Permalinks, Rewrite Rules, Post Thumbnails, Menus, and Role/Capability are currently without a maintainer. Are you familiar with one of the components and want to help to maintain this component? Please comment below or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @jorbin or @ocean90 on 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/. if you’re interested.

 

The list of component maintainers is a living document. If you are no longer actively maintaining a component, please remove yourself or let us know so that the list can be as accurate as possible

#4-6, #components

Component Page Updates for 4.4

Now that 4.4 is underway, let’s update the component pages to reflect 4.4 activity. The Customize, Editor, and Press This pages serve as good templates, though they all need 4.4 updates. The component pages are targeted at betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. testers. They should describe the component, list milestones (roadmap), and explain what needs testing and how to test it. Good component pages assist triage. For details, see the previous round of component page updates.

Also, if your component has a corresponding 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/. chat, link to the component page from the chat’s channel topic. This assists using Slack in beta testing flows.

Component maintainers, here are your component pages…

Continue reading

#components, #maintainership

Proposed Trac component reorganization

Warning, this long. tl;dr: I propose a reorganization of our TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. components. 34 top-level components with two dozen subcomponents. New tree at the bottom. First, an overview of some of our problems.
Continue reading

#components, #trac

Continuing the Trac component re-organization with "focuses"

Based on triaging a few hundred tickets in the General and Multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site components, we’ve added five components:

  • Bootstrap/Load — applies to wp-settings.php, ms-load.php, load.php, ms-settings.php, etc.
  • Login and Registration — useful for multisite, but applies to single-site too
  • Options and MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. — option.php, meta.php, etc.
  • Script Loader — WP_Scripts, WP_Styles, and script-loader.php
  • Networks and Sites — multisite only

We also removed two components that (poorly) described the problem rather than the affected area of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. “Validation” ranged from from validation tickets to XHTML issues. HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. validation issues now belong in the affected component, like “Template” or “Administration.” “Warnings/Notices” contained tickets ranging from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warnings to providing feedback to users. The open tickets were moved to more appropriate components. Additionally, the remaining tickets in “AtomPub” were wontfixed and the component was removed.

A new concept: Focuses

We’ve also added seven new “focuses”ui, accessibilityAccessibility Accessibility (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), javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., docs, multisite, performance, and rtl. Focuses are about broad concepts and help break tickets down by specialties and skills, rather than functional areas of core. Multisite and RTL are widely general “modes” for WordPress, and each have contributors who focus strongly on those areas, but they are not well-contained “components” of core. Accessibility isn’t an area of core — it permates the entire user experience. A ticketticket Created for both bug reports and feature development on the bug tracker. about inline documentation should still receive the attention of developers for that area of core (say, comment.php), while those who focus on inline documentation should still be able to do so.

“Focuses” is a new field in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.. They’re like tags, and more than one can be assigned to a ticket. It can be queried using custom queries. And they have their own reports which we hope to properly expose and make better really soon — https://core.trac.wordpress.org/focus/accessibility.

Guidelines to help with the transition

The corresponding components for the new focuses have been removed. The “ui-focus” keyword has also been converted over. Overall, we gained five components but lost eight.

This has the potential to be confusing at first and we’ll surely need to make some adjustments. Also, the component cleanup is not done yet — this is just the beginning. Here are some guidelines for how to use the new focuses.

  • The old RTL component — use the rtl focus and assign a relevant component. If it’s RTL issues with the media library, use the “Media” component. If it’s about the RTL build tools, then use the “Build Tools” component. If it’s more general, then use the “I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.” component.

  • The old Accessibility component — use the accessibility focus and assign a relevant component. For issues with the media library, use “Media.” For issues with activating a theme, use “Themes.”

  • The old Inline Docsinline docs (phpdoc, docblock, xref) component — use the docs focus and assign a relevant component. Hook documentation for user.php belongs in the “Users” component.

  • The old Multisite component — use the multisite focus and assign a relevant component. If it’s related to users, use “Users.” If it’s related to the loading process of multisite (choosing a site based on domain and path, etc.), use “Bootstrap/Load.” If it’s related to the installation process, use “Upgrade/Install.” network_admin_url() goes into the “Permalinks” component. get_site_option() is “Options and Meta.” The Networknetwork (versus site, blog) Adminadmin (and super admin) still has its own component. (Choosing that component or “Networks and Sites” automatically assign the “multisite” focus for you.) @jeremyfelt recategorized about 110 tickets into about 15 different components.

  • The old Performance component — use the performance focus and assign a relevant component. Improving the performance of WP_Query belongs in “Query,” improving the performance of get_option() belongs in “Options and Meta,” etc.

  • The old Graphic Design component — use the ui focus and assign a relevant component. (This is probably going to be “Administration”, at least for now.)

  • The old ui-focus keyword — This has been removed. Simply use the ui focus.

  • The old JavaScript and UIUI User interface components — these have not existed for some time. Use the corresponding focus and assign a relevant component.

We may add more focuses over time. For example, the “Text Changes” component would probably make a better focus, for our wordsmiths.

Any questions, suggestions, or comments?

This is a summary and addendum of one section of this Wednesday’s weekly developer meeting. Logs.

#components, #trac

It might be useful to create a …

It might be useful to create a “Text” component that people could use for reporting typos, suggesting text changes, etc. This would also automatically be a good starter component for people who need something super easy to learn how to submit a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing..

#components