Andrew Ozz 10:44 pm on June 29, 2020
Tags: ,   

Updating jQuery version shipped with WordPress

This has been a long time coming; the TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. #37110 is already few years old.

Following the recommendations of the jQuery team, the updating has to happen in stages:

  1. Remove jQuery Migrate 1.x. This is planned for WordPress 5.5.
  2. Update to the latest version of jQuery and add the latest jQuery Migrate. This is tentatively planned for WordPress 5.6 depending on test results. Updating to the latest jQuery UIUI User interface, version 1.12.1, is also planned for 5.6.
  3. Remove jQuery Migrate. This is tentatively planned for WordPress 5.7 or later, depending on testing.

As planned, a Test jQuery Updates pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party was released to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it easy to test different versions of jQuery, jQuery Migrate, and jQuery UI. Please install it and thoroughly test if everything works as expected, especially on the front-end, or at the settings pages of other WordPress plugins.

How to help with testing

The plugin has a settings screen found under the Plugins menu in WordPress adminadmin (and super admin). Different versions of the jQuery libraries can be selected there for testing. Please test by:

  1. Disabling jQuery Migrate, and leaving jQuery and jQuery UI at the default versions (for WordPress 5.5).
  2. Selecting jQuery 3.5.1, enabling jQuery Migrate, and selecting jQuery UI 1.12.1 (for WordPress 5.6).
Test jQuery Updates settings screen, under the Plugins menu.

Updating your code

To get ready for this jQuery update, it’s important that you update your code. The migrate plugin will assist you in identifying issues. Additionally, the jQuery Core 3.0 Upgrade Guide and 3.5 Upgrade Guide provide detailed information about what has changed. As the browser supported list is also updated, this is also a great time for you to revisit what versions of browsers are supported by your themes and plugins.

See a 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.?

If you find a bug in Test jQuery Updates, or if you run into a jQuery related issue, please report it at https://github.com/WordPress/wp-jquery-update-test. If the issue is with a default script in WordPress, please open a new ticket on Trac.

Thanks @andreamiddleton, @annezazu, and @jorbin for helping with this post.

#5-5, #jquery
David Baumwald 3:56 pm on June 6, 2020
Tags: ,   

Bug Scrub Schedule for 5.5

Now that 5.5 has been officially kicked off, 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 will happen weekly all the way up to the final releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. “Early” ticketticket Created for both bug reports and feature development on the bug tracker. scrubs have already taken place. Keep an eye on this schedule – it will change often to reflect the latest information.

  1. 6/9/2020 18:00 UTC
  2. 6/18/2020 15:00 UTC
  3. 6/22/2020 23:00 UTC
  4. 7/1/2020 04:00 UTC (APAC-Friendly)
  5. 7/8/2020 21:00 UTC
  6. 7/16/2020 20:00 UTC
  7. 7/20/2020 16:00 UTC
  8. 7/27/2020 19:00 UTC
  9. 8/3/2020 TBD (If Necessary)

These scrubs are separate and in addition to the normal scrubbing and triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. by individual components. Some of those sessions include:

Design Triage: Every Monday 17:30 UTC at #design
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/ Design Triage: Every Tuesday 17:00 UTC at #design
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) Scrub: Every Friday 14:00 UTC at #accessibility

The #accessibility team has also announced a set of 5.5-focused scrubs.

Also, the ongoing APAC-friendly #core bug scrub session every Tuesday at 05:00 UTC will continue during the cycle, alternating focus between coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and editor.

Finally, a reminder that anyone — Yes, you! — can host a bug scrub at anytime. You can work through any tickets you’re comfortable with. In fact, if you plan one that’s 5.5-focused, we’ll add it to the schedule here along with your name. Finally, you’ll get well deserved props in the weekly Dev Chat, as well as in the #props 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!

All open tickets for 5.5, in order of priority, can be found here. Tickets that haven’t seen any love in a while are in particular need. Those can be found in this query.

If you’d like to lead a bug scrub or have any questions or concerns about the schedule, please leave a comment or reach out to me directly.

#5-5, #bug-scrub

Jb Audras 10:35 am on July 10, 2020
Tags: , , ,   

New CSS styles for buttons with disabled state in WP 5.5

[last modified on July 10, 2020 at 10:58 UTC]

In WordPress 5.5, the styles for both primary and secondary buttons were updated in the WordPress adminadmin (and super admin) to produce a more consistent experience when the buttons are disabled.

Previously, the disabled button styling was inconsistent in the WordPress admin between the default and alternate color schemes. Styling was also different between primary and secondary buttons.

Prior to WordPress 5.5 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 was decided to simplify all disabled button states to use the same design. There is no need for disabled buttons to convey primary and secondary visual semantics since the disabled state denotes that status.

This change introduces new unified CSSCSS Cascading Style Sheets. declarations for disabled buttons:

color: #a0a5aa;
background: #f7f7f7;
border-color: #ddd;

Those above CSS declarations are used both in the WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dashboard and 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.

New styles for disabled primary and secondary buttons:

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors and WordPress developers are encouraged to update the CSS styles they use for their buttons with disabled state for better consistency across the ecosystem. Of course, they are even more encouraged to not use custom styles and to rather user default core UIUI User interface styles instead.

Disabled state of buttons can be easily targeted in CSS, for example by using the following selectors:

button[disabled],
input[type=button][disabled],
input[type=submit][disabled] {
	color: #a0a5aa;
	background: #f7f7f7;
	border-color: #ddd;
}

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #48709.

Props @whyisjake, @desrosj and @afercia for proofreading.

#5-5, #accessibility, #core-css, #dev-notes

sageshilling 4:29 pm on July 9, 2020
Tags: , ,   

Dev chat summary, July 8, 2020

@whyisjake hosted from this agenda, edited by @marybaum.

Announcements

WordPress 5.5 beta 1 landed yesterday! Tell everyone you know to download it, test everything and try to break all the new features—that’s what 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. releases are for.

@audrasjb  shared some stats: as of Beta 1, WordPress 5.5 has 190 new core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org.! A lively discussion followed, covering stats and going back several years, in some detail. Check it out here.

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/ 8.5 is live!
https://make.wordpress.org/core/2020/07/03/whats-next-in-gutenberg-july/

This is the last Gutenberg releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. going into WordPress 5.5 and is the major focus for this month.

From now until the final release of WordPress 5.5, Gutenberg is also in a feature freeze. That means the only tickets that will move on are 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. fixes and code regressions; everything else will get punted to 5.6 or a future release.

Another result of the feature freeze is that TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. and the Gutenberg should both see fewer last-minute commits. So look for the Beta 2 release party to start a little earlier next week (July 14) in a bow to our European contributors’ schedules.

@pbiron  #50449 could use some 
from those who are knowledgeable about RTL
#50449: Sitemap style for RTL sites

Component check-in

@marybaum announced a schedule change for the about page. She’ll attach the copy and layout to the ticketticket Created for both bug reports and feature development on the bug tracker. for 5.5 on Friday. She issued shoutouts to new contributors @abhanonstopnewsuk and @yvettesonneveld for their research with folks in the Marketing team, and @estelaris for in-depth research in design.

@justinahinon updated the group on dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. for 5.5 and issued a call for writers. You can see progress on the Trac notes on this Google Sheet  and Gutenberg-related notes here on GitHub.   

Open Floor

@desrosj has a post coming soon that will focus the ongoing discussion of exactly which bugs and tasks get the ticket love in two periods: the beta-to-RC period (for 5.5, that’s now: it started July 7 and will run until RC1 lands on July 28) and the RC-to-release period (for 5.5, the two weeks from July28 to August 11).  

For now, you can see earlier discussion on the topic here.

Finally, @whyisjake brought up a pull request that got his attention because of licensing issues it raises for part of the contributor toolchain.

#5-5-2, #devchat, #summary

#5-5

Jb Audras 4:28 pm on July 9, 2020
Tags: , , , ,   

Accessibility improvements to widgets outputting lists of links in 5.5

When lists of links are displayed on a page for navigational purpose, it can become difficult for users utilizing assistive technologies to navigate between these lists while maintaining an understanding of the purpose of the links. The <ul> element also does not convey proper context.

Starting in WordPress 5.5, a new theme support feature (navigation-widgets) has been added to address this issue. When support is declared, all default widgets included in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. that produce lists of links will be output wrapped in the <nav> element. Note: the markup produced inside this wrapper will remain unchanged.

Additionally, an arial-label attribute (which is spoken to users using assistive technologies) is automatically generated based on the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.’s title field and added to the nav element to help distinguish each navigation widget from other nav elements on the page (such as a primary navigation).

The feature is fully opt-in. Theme developers must declare HTML5 support for navigation-widgets. For many themes, this may need some additional CSSCSS Cascading Style Sheets. rules or adjustments to ensure the widgets remain properly styled when outputting the new markup.

Theme developers are highly encouraged to utilize this improvement in their themes. This new theme support feature is an easy way to improve semantics and 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) in all of the sites using your theme.

Widgets affected

The following default Core widgets are impacted by this change:

  • Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.
  • Archives
  • Categories
  • Pages
  • Recent posts
  • Recent comments
  • 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.
  • RSS

How to declare support

Theme developers are encouraged to declare support for navigation widgets in their functions.php file. This can be done by calling add_theme_support() and passing the preexisting html5 feature with the new navigation-widgets type.

Example

// Declare support for navigation widgets markup.
add_theme_support( 'html5', array( 'navigation-widgets' ) );

// This can be combined with other HTML5 types if supported.
add_theme_support(
	'html5',
	array(
		'navigation-widgets',
		'comment-list',
		'comment-form',
		'search-form',
		'gallery',
		'caption',
		'style',
		'script'
	)
);

For reference, see the related documentation on DevHub.

As mentioned above, an aria-label will be generated for each widget based on the widget’s “Title” field. Below is a screenshot when aria-label attributes are not present to illustrate the problem for users utilizing a screen reader.

The screenshot above shows how the absence of aria-label attributes contributes to a poor experience when utilizing a screen reader. Props @afercia.

The screenshot below shows how the user’s experience is improved when by aria-label attributes.

The screenshot above shows how aria-label attributes helps users utilizing a screen reader to distinguish navigation elements from each other. Props @afercia.

Markup changes

Below is what the output markup looks like when support for navigation-widgets is not declared.

<!-- Without declaration for HTML5 `navigation-widgets` feature support -->
<div class="widget widget_archive">
	<div class="widget-content">
		<h2 class="widget-title">Archives</h2>
		<ul>
			<li><a href="mywebsite/2020/07/">July 2020</a></li>
			<li><a href="mywebsite/2019/12/">December 2019</a></li>
		</ul>
	</div>
</div>

Below is what the new output markup will look like when support for navigation-widgets is declared.

<!-- When the theme declares HTML5 `navigation-widgets` feature support -->
<div class="widget widget_archive">
	<div class="widget-content">
		<h2 class="widget-title">Archives</h2>
		<nav role="navigation" aria-label="Archives">
			<ul>
				<li><a href="mywebsite/2020/07/">July 2020</a></li>
				<li><a href="mywebsite/2019/12/">December 2019</a></li>
			</ul>
		</nav>
	</div>
</div>

Forcing navigation-widgets support

Support for HTML5 navigation-widgets feature can be forced on a sitesite (versus network, blog) by using the new navigation_widgets_format filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. This hook determines the type of markup used in widgets that contain navigation links.

This filter accepts two different values: html5 and xhtml. Returning any other value to this filter will output the old markup without these accessibility improvements.

// Force HTML5 markup.
function mytheme_force_semantic_nav_widgets( $value ) {
	return 'html5';
}
add_filter( 'navigation_widgets_format', 'mytheme_force_semantic_nav_widgets');

// Force legacy markup.
function mytheme_force_legacy_nav_widgets( $value ) {
	return 'xhmtl';
}
add_filter( 'navigation_widgets_format', 'mytheme_force_legacy_nav_widgets');

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #48170.

Props @whyisjake and @desrosj for proofreading.

#5-5, #accessibility, #dev-notes, #html5, #widgets

David Smith 4:10 pm on July 9, 2020
Tags: , ,   

Editor chat summary: 8th July, 2020

This post summarizes the weekly editor chat meeting (agenda here) held on 2020-07-08 14:00 UTC in Slack. Moderated by @get_dave.

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/ 8.5.0 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.

  • Gutenberg 8.5.0 was released just prior to the meeting.
  • @youknowriad highlighted:
    • Better Drag and Drop
    • Possibility to upload external images on image blocks
    • A11yAccessibility 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): Allow disabling arrow navigation across blocks
    • Anchor support added into most static blocks

WordPress 5.5

  • With Gutenberg 8.5.0 released, the focus now shifts to getting everything ready for inclusion in WordPress 5.5.
  • @ellatrix is maintaining a project board for 5.5 of issues/PRs that need to be completed.
  • @youknowriad noted the importance of:
    • testing Gutenberg 8.5.0 with WordPress 5.5 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.
    • those familiar with performance-related work, to do some monitoring and improvements.
  • @andraganescu has helpfully prepared a post which summarises the features expected to be included in WordPress 5.5.

Monthly Priorities

  • In addition to Gutenberg 8.5.0 and WordPress 5.5 the following items were highlighted as priorities for the month:
    • Full Sitesite (versus network, blog) Editing.
    • Navigation screen and navigation 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..
    • Global Styles.
    • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. screen.
  • @michael-arestad invited feedback on Full Site Editing flows.
  • @jeffpaul raised a query about the readiness of the Block Directory for inclusion in WP 5.5:
    • are there items the team needs to help with to ensure the non-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. components are ready for the 5.5 release such that the Block Directory can be considered “ready” for 5.5? (Slack conversation)
    • @tellyworth was invited to provide an update on this.

WordCampWordCamp WordCamps 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. US Contributor DayContributor Day Contributor 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/.

  • @georgestephanis asked for a volunteer to be a point of contact for WordCamp US Contributor day for the Core Editor team.
  • @itsjusteileen volunteered to take on this role (Slack discussion).
  • @youknowriad suggested another “Introduction to Gutenberg contributing” workshop might be a good idea.

Task Coordination

Open Floor

Thanks to everyone who attended.

#core-editor, #core-editor-summary, #meeting-notes

Lara Schenck 2:11 pm on July 9, 2020
Tags: ,   

CSS Chat Agenda: 9th July 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, July 18, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in 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/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CSS audit status update
    • Next steps brainstorming
  • Color scheming updates
    • Review screenshot annotations
  • Open floor
  • CSS latest and greatest link share

#agenda, #core-css

Lara Schenck 2:05 pm on July 9, 2020
Tags: ,   

CSS Chat Summary: 2nd July 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1593723636063300

I (@notlaura) facilitated the meeting.

CSSCSS Cascading Style Sheets. Audit Updates

@danfarrow made some formatting updates on the Google doc containing the audit data, and added an image of the longest selector on a mug:

Longest CSS selector found in WordPress on a mug

Brilliant!

@isabel_brison added an audit of z-index values to the list as well.

Color Scheming Updates

We discussed the ticketticket Created for both bug reports and feature development on the bug tracker. #50504 for a modern/higher contrast color scheme in 5.5 (mistakenly referred to it as a high contrast scheme, but it is higher contrast). @afercia asked what problem this new color scheme will solve, and why it is using the Sass variables instead of CSS custom properties. @ryelle indicated that we are moving slowly with this initiative, and that for now any new schemes should continue with existing conventions.

The rationale for the new color scheme is a conversation for the design channel, but @youknowriad understood it was meant to modernize the look/feel of WordPress adminadmin (and super admin), and to possibly be the default theme later. @ryelle mentioned it would also be a good pairing with dark mode. In terms of implementation, @youknowriad discussed that there will still be a need for Sass variables, and to be cautious about what values are exposed as CSS variables since it is a runtime APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. A CSS variable for the main admin color makes a lot of sense.

@youknowriad noted an issue with the color schemes not applying to secondary buttons (secondary is a term used 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/ though not in wp-admin, and refers to the outlined style of button) that he is working on in ticket #50537. @ryelle noted that that may be intentional for color contrast, and that a specific variable for secondary/default button colors would help with this issue. @youknowriad indicated the colors are adapted for secondary buttons in Gutenberg, and this should be consistent with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. @afercia noted that a related change was submitted in 5.3 but reverted. It is unclear if that was specifically about the button color or possibly inputs, but in any event, the functionality is inconsistent with core and Gutenberg.

I asked if there are any notes from this incident that we should take into account with the color scheming work, and @afercia mentioned that styling changes in 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 that are intended to be adopted in core, should be discussed in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. vs. GithubGitHub GitHub is a website that offers online implementation of git repositories that can 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/. I proposed an idea that the same CSS variables that are now used Gutenberg should be used in wp-admin. @youknowriad said this would be great for post-5.5 work.

We then discussed a bit of the distinction between wp-admin CSS and Gutenberg CSS, and the history of the #core-css channel. The #core-css channel came about at the beginning of this year as a avenue for discussing how to use more modern CSS practices in wp-admin. The Gutenberg CSS architecture conversations occurred in the #core-js channel.

@ryelle asked if anyone was actively owning the task to annotate screenshots, and I committed to coming up with at least a starting point to discuss at the next meeting.

CSS Latest and Greatest Link Share

@kburgoine shared “a latest but maybe not greatest” link for CUBE CSS, a new CSS methodology that’s been floating around. Like any methodology, it depends!

That was all for this week. I’m super late posting these notes, but better than not posting them!

#summary

Jonathan Bossenger 8:33 am on July 9, 2020
Tags: ,   

WP Notify – next steps

Now that we have finalized the initial requirements for the WP Notify project, it’s time to kick of the project build.

I would therefore like to open the floor for suggestions on how best to move forward. I have some initial comments/questions, that I would like to gather feedback on.

  • We should probably start with designing/prototyping what the various pieces will look like.
    • What software will we use for design/prototyping
    • How will we gather feedback to the designs.
  • As discussed in our requirements document, this will be built as a feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins.. We therefore need to start the process of deciding on where/how this pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party will be built
    • Will we use GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/, or WordPress style svn + tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.?
    • Are we able to start developing the framework of the plugin/making development decisions?
  • It would be ideal if we could identify/select two separate reps for these efforts, a technical rep to manage the plugin development and a design rep to manage the design efforts.
    • How will we select these folks?
    • Do we have any candidates?
    • It’s important to note that these reps could change over time, but for now I’m just considering how we deal with making decisions.
  • Is it time to resurrect the weekly meetings?

Please feel free to leave your comments/suggestions here, I’ll leave comments open for 1 week until Thursday, July 16, 2020, 20:00 UTC, and then use the feedback to help us define our next steps.

#feature-notifications

#agenda

Jonathan Bossenger 8:01 am on July 9, 2020
Tags: , ,   

JavaScript Core Chat Summary: 07 July 2020

This is a recap of the 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/. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. chat held on Tuesday, July 7, 2020, 14:00 UTC. You can read the full meeting discussion here in Slack

@nerrad hosted

There were no agenda items for today, so @nerrad moved straight to the open floor

Open floor:

  • @youknowriad has opened a PR for this ticket to bring the CSSCSS Cascading Style Sheets. variables support on 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/ into Core, and is hoping it can be ready for 5.6. Feedback and testing is welcome
  • @gziolo mention that thanks to @aduth we now have the ability to lazily import a module, installing it automatically if missing.
    • @adamsilverstein discussed the implications of lazy importing a module and how that might change the structure of code in GB and elsewhere
    • @gziolo pointed out that this is meant for non-production code with many dependencies installed, so the idea was to install them on demand
  • @gziolo is exploring a way to provide a local path when you want to import something that isn’t a package name
  • @gziolo is also continuing work started on 3rd party templates for Create 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. based on prior work from @fabiankaegy and has run into an interesting challenge. Suggestions and feedback welcome.
  • @mkaz raised an issue he’s run into twice now  related to the static analysis failing on a commit.
    • this can be viewed on a live PR here
    • a lengthy discussion following with @nerrad summarizing the problem as follows: Gutenberg has a GithHub action check that ensures the package-lock.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file is not changed when npm install is run. Since the Gutenberg project is set to require the latest version of npm, whenever a new version of npm is released, that could cause this check to fail and the fix is to commit a regenerated package-lock.json using the latest npm version.
    • Possible workarounds for this were discussed, including documenting the problem in the “testing docs” by @youknowriaad and raising the issue in the npm 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. tracker by @gziolo
    • @aduth also referenced an earlier discussion on the topic

As there were no other open floor items, @nerrad closed meeting 5 minutes to the hour

Next chat is on Wednesday, July 14, 2020, 14:00 UTC in the #core-js channel 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/..

Weekly JavaScript news round up

#javascript, #meeting-notes

Riad Benguella 5:48 pm on July 8, 2020
Tags: , ,   

What’s new in Gutenberg (8 july)

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/ 8.5 has been released. This is the last pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. that is going to be included entirely (without experimental features) in WordPress 5.5.

Drag and Drop

Since its first introduction, the experience of drag and dropping blocks to reorder them has stayed almost untouched. This release includes several iterations to improve on this interaction. Drag and drop supports vertical reordering more clearly, it replaces the cloned element with a nice little drag chip and smooth the scroll-on-drag behavior.

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) improvements

One important addition in this release is the possibility to disable arrow navigation across blocks. While writing long form content, it’s very important to be able to navigate using arrow keys between blocks, this can be confusing for screen reader users. We now have an option to disable that behavior.

Easy upload for external images.

Another workflow people use while writing is to rely on external tools to write or collaborate on their posts and when ready, copy/paste these into 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.

The downside is that any external images used there are hosted elsewhere and may not always persist. In this release, if an image block is using an external images, you’ll have the possibility to upload it to the media library while keeping it as is on the post with a single click.

8.5 🇸🇪

Features

  • A11yAccessibility 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): Add an option to keep the caret inside blocks in edit mode. (23546)
  • Add anchor/id support to all static blocks. (23197)

Enhancements

  • Add an edit button to the gallery images. (23554)
  • Image block: Allow uploading external image if image host allows it. (23565)
  • Drag And Drop:
    • Enable for multi selection. (23477)
    • Improve the drag and scroll behavior. (23082) (23448)
    • Don’t show a cloned block while dragging. (23024)
    • Polish the block drag chip. (23609)
  • Image editing:
    • Move zoom control to toolbar dropdown. (23677)
    • Add original aspect to dropdown. (23659)
    • Add filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. image edit. (23539)
    • Polish zoom slider. (23418)
    • Add permission checks to the endpoint. (23423)
  • Block Directory:
    • Return inactive plugins in search results. (23688)
    • Use CDN for block directory assets. (23499)
  • Add line height rule to the post title. (23656)
  • Avoid ordering block types per frecency inside block categories. (23643)
  • Polish the document sidebarSidebar A 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. controls. (23578)
  • Add modern color scheme support. (23558)
  • Use a consistent close icon across the UIUI User interface. (23551)
  • Redesign the transform menu. (23028) (23449)
  • Redesign the canvas inserter. (22789)
  • Unify tooltip styles. (23382)
  • Add block variations to the slash inserter. (23364)
  • Hide the most used blocks by default and add an option to enable it. (23358)
  • Add reusable block tab to inserter. (23296)
  • Add keyboard shortcuts for moving blocks. (23276)
  • Cover block: Don’t show the matrix alignment button when no background set. (23196)
  • Spacer: Show tooltip with height value on resize. (23077)
  • Improve post publish buttons alignment. (22390) (23487)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). Preview and Save Draft buttons use the same style. (21192)
  • Add unlink URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to buttons block. (23445)
  • Clean the patterns list to include in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (23608)
  • Add pullquote block tranformations. (23562)
  • Remove block label from child block appender. (23393)
  • A11y: Move blocks between levels using keyboard. (22453)

New APIs

  • Support orientation prop in InnerBlocks. (23416)
  • Support a flexible useItems APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. for the autocompleters API. (22853) (23385)
  • Stabilize the image editing REST API endpoint. (23536)
  • Stabilize the block directory REST API endpoint. (23528)
  • Add descriptions to Block patterns. (23070)

Experiments

  • Sitesite (versus network, blog) Builder:
    • Remove the button block appender. (23436)
    • Improve the template parts insertion flow. (23295)
    • Fix template part resolution for edited files. (23591)
    • Fix inspector panels buttons. (23464)
    • Add template part block keyword. (23623)
    • Allow wide alignment. (23488)
    • Remove templateIds state. (22893)
  • Navigation screen and block:
    • Fix saving issues. (23559)
    • A11y: Improve keyboard navigation on the Navigation block toolbar. (23281)
    • Fix text size no longer overwritten. (23360)
    • Adjust Navigation block submenu padding and spacing. (23380)
    • Update placeholder label. (23297)
    • Hide the block toolbar on the navigation screen. (23021)
    • Allow setting up menus that auto add new pages. (22697)
    • Allow Search block to be added alongside links. (22656)

Bug Fixes

  • Block Directory:
    • Support .svg extension for results icons. (23442)
    • Throw error if we have an issue registering blocks. (23439)
    • Remove the overflow on the Add button. (23409)
    • Fix double border in block list. (23625)
  • Fix the upload icon size. (23553)
  • Allow scrolling over Popovers. (23696)
  • Fix quote left border color in dark mode. (23692)
  • Fix empty block list appender visibility on aligned blocks. (23672)
  • Fix horizontal Block Mover Layout. (23640)
  • Fix invisible drop target indicator. (23638)
  • Rich text: Fix soft line break in caption on enter. (23622)
  • Fix clicking Gallery items buttons on Safari. (23586)
  • Hide block list appender in a reusable block if it’s not being edited. (23584)
  • Revert “Remove the style CSSCSS Cascading Style Sheets. class when the default style variation is chosen”. (23548)
  • Classic block:
    • Add height: Auto to content wrapper. (23547)
    • Add scroll to last edit position. (23544)
    • Adjust placement of the toolbar. (23438)
    • Prevent content loss by regularly dispatching changes. (23408)
    • Fix undo keyboard shortcut. (23376)
  • Fix the Gallery images buttons rendering. (23471)
  • Fix Post title top margin. (23447)
  • Fix file names generation for edited image files. (23440)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when cropping imùges. (23432)
  • Polish block moving animation. (23401) (22640)
  • Fix small RTL 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. in Buttons block. (23390)
  • Fix centered legacy button. (23381)
  • Fix React warning while unmounting slots. (23365)
  • Don’t show the “Move to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” action if the user is not allowed to delete posts. (23174)
  • add inline font-sizes and colors to the editor for themes that don’t enqueue the preset classes. (22356) (22668) (23717)
  • Create Block: Fix missing scripts section in scaffolded package.json. (23443)
  • Scripts: Fix build script with style.css files. (23710)
  • Restore removed props and behavior back to Query Controls. (23419)
  • Add support for hexadecimal colors in gradient presets. (23363)

Performance

  • Improve the performance of the keyboard shortcuts binding. (23394)

Documentation

  • Add a documentation page explaining how the repository is organized. (23563)
  • Document the WordPress 5.5 backported code. (23478) (23708)
  • Add .markdownlint.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. configuration extending scripts configuration. (23655)
  • Add “Create a Block” tutorial Create a Block tutorial. (22831) (23654)
  • Update wp-env Ubuntu documentation. (23650)
  • Add documentation for InnerBlocks orientation prop. (23641)
  • Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. (23577)
  • Update categories in block registration documentation. (23572)
  • Update ESNext usage in public API. (23475)
  • Clarify the wp-block-styles documentation. (23359)
  • Add documentation for setting up Prettier for markdown. (23286)
  • Typos and tweaks: (23542) (23489) (23590) (23300) (23534) (23467)

Code Quality

  • Optimize useSelect calls (dependencies) (23255) (23247) (23245) (23249)
  • Reduced the number of SASS color variables. (23648) (23454)
  • Remove unused getBlockIndex selector from useBlockDropZone hook. (23634)
  • Scroll on drag: Remove blockNodes context dependency. (23561)
  • Add missing notices dependency. (23517)
  • Remove BlockPopover key prop and related code. (23504)
  • Show a warning when SlotFillProvider is missing. (23493)
  • Block toolbar: Remove data-align attribute. (23468)
  • Extract block draggable scroll behaviour into React hook. (23444)
  • Refactor Dropdown to use functional component. (23142)
  • Refactor Embed Edit component: Class component to Function component. (22846)
  • Extract navigation link rendering code from the navigation block. (21075)
  • Block editor: Use vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. instead of Lodash if possible. (21063) (23633)
  • Add “engines” to the package.json and “engine-strict = true” to the package.json. (23600)
  • Block Directory: Remove custom permission check in favor of canUser. (23624)
  • Remove REST_WP_REST_Block_Types_Controller_Test which now exists in WordPress Core. (23500)
  • Editor: Remove unnecessary block directory dependency. (23476)
  • Plugin Controller: Return the plugin without the extension. (23395)
  • Clean up image editor REST route. (23368)
  • Make slash inserter tests more stable. (23367)
  • Post Author block: Fix end-to-end test fixture indentation. (23209)

Build Tooling

  • Add new command for pre-releasing npm packages. (23357)
  • Move the CI setup from Travis to GithubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ actions. (23523) (23520) (23518) (23470) (23538)
  • Add npm cache to Github workflows and use checkout v2. (23482)
  • Update bin/validate-package-lock.js error message. (23435)
  • Minor improvements to the release tool and release documentation. (23441)
  • Tools: Always append prerelease to version update in package.json when preparing npm release. (23480)
  • Scripts: Add custom TerserPlugin configuration. (22990)
  • Scripts: Exclude node_modules from source map processing in start script. (23711)
  • Fix rc version number added to the CHANGELOG. (23433)
  • Tests: Jest – Add typeahead plugin. (23366)
  • Tests: Run end-to-end tests only as an adminadmin (and super admin). (23588)
  • End-2-end Tests: Add test for using block variation with the slash inserter. (23585)

Various

  • RangeControl: Integrate NumberControl + update internal state flow. (23006)
  • Create Block: Generate a block.json file. (23399)
  • Sync Block Context changes from Core. (23602)
  • Scripts: Remove default exclude rule for node_modules for SVG, CSS and Sass files. (23495)
  • REST API: Sync /themes endpoint with Core’s. (23321)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version Loading Time KeyPress Event (typing)
Gutenberg 8.5 6.86 s 27.84 ms
Gutenberg 8.4 7.22 s 27.85 ms
WordPress 5.4 8.91 s 40.52 ms

Kudos for all the contributors that helped with the release. 👏

#core-editor, #editor, #gutenberg-new

Jake Spurlock 5:08 pm on July 8, 2020
Tags: , ,   

Dev Chat Agenda for July 8th, 2020

Here is the agenda for the weekly meeting happening later today: July 8th, 2020 13:00 PDT.

Also, @davidbaumwald will run a 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 right after the chat. Stick around and show off your flyswatting skills!

Highlighted/Need Feedback Blogblog (versus network, site) Posts

Discussion

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 recap

Components check-in and status updates

  • News from components
  • Components that need help/Orphaned components
  • Cross-component collaboration

Open Floor

Got something to propose for the agenda, or a specific item relevant to our standard list above?

Please leave a comment, and say whether or not you’ll be in the chat, so the group can either give you the floor or bring up your topic for you, accordingly.

This meeting happens in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack.

#5-5, #agenda, #devchat