JavaScript Chat Summary: April 14, 2020

Below is a summary of the discussion from this week’s 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/. chat (agenda, Slack Transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Internet Explorer End-to-End Testing

(Slack conversation)

Context: https://github.com/WordPress/gutenberg/pull/21528

Feature Proposal: https://github.com/WordPress/gutenberg/issues/16509

Discussion: The above pull request seeks to introduce a new package incorporating a Selenium-based web driver to run Internet Explorer tests through BrowserStack’s automation 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..

Discussion Points:

  • It’s been something of a pain point 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/’s history of browser-specific bugs that can’t be captured with the current set of testing tools.
  • It ought to be done with careful consideration since having multiple test setups for end-to-end tests is prone to introduce some confusing developer experience.
  • @adamsilverstein could imagine there might be other ways to leverage Browserstack as well, e.g., if we want to cover additional browsers.
  • Running on merge to master seems fine, although that means you’ll be fixing things after they are broken.
  • @aduth raised that typically Browserstack is a paid service (“$12.50/mo for Freelancers” plan is the cheapest). They offer free open sourceOpen Source Open 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. testing, which he applied for and was accepted. But that doesn’t help for local testing since we’d not want to be sharing our credentials.

News Roundup

This roundup contains a few links for Gutenberg and JavaScript related news curated (and commented on) by @nerrad.

  • Dave Ryan posted a reflection on the recent WPBlockTalk conference. One standout observation he made that I took note of:
    • “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 is great, but perhaps some of the biggest potential for the Gutenberg project exists in the relationship Blocks can have with the external, web ecosystem — both how edits in the Block Editor can be pushed to other services and how external systems can automate content creation and edits on the WordPress side.”

#core-js, #javascript

JavaScript Chat Summary: April 7, 2020

Below is a summary of the discussion from this week’s 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/. chat (agenda, Slack Transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Consent 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.

(Slack conversation)

Context: https://github.com/rlankhorst/wp-consent-level-api/issues/50

Feature Proposal: https://make.wordpress.org/core/2020/04/01/feature-plugin-proposal-wp-consent-api/

Discussion: What is the ideal JavaScript interface for accessing, updating, and responding to changes in consent? In what ways could we leverage the existing data module?

Discussion Points:

  • Is data module supported on sites running Classic Editor 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? Is it otherwise tied to 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?
    • While it is developed in the 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/ repository, it’s intended to be general-purpose to support a variety of use-cases.
    • For example, WooCommerce plugin is using the data module outside of the editor context.
  • A primary value of the data module is API consistency in retrieving and updating data.
  • There is a need to support expiration as part of the requirements of the Consent API.
    • @nerrad has done some experimentation around this and would be happy to help contribute to the discussion.
  • @youknowriad shared a code example for how a basic consent implementation could be achieved using the data module.
  • There could still be abstractions on top of the data module.
    • For example, the blocks module uses the data module internally, but still exposes its public API as wp.blocks.registerBlockType, etc.
    • Ideally these would still follow the convention of groupings under the wp global (wp.consent).
  • Another advantage of the data API is that it provides future-proofing if blocks or future UIs are built with the Consent API in mind.
  • There’s a general desire to develop new APIs as following consistent and established patterns.
  • There may need to be enhancements to the data module in order for it to be most useful:
    • Subscribing to changes in a specific store value is currently cumbersome.
    • Expiration.
    • Persistent storage using cookies.
      • The current data module or persistence implementation can support this, but it may still need further enhancements so as not to break expectations that preferences may still need to save to localStorage for the near future.

#core-js, #javascript

JavaScript Chat Summary: March 31, 2020

Below is a summary of the discussion from this week’s 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/. chat (agenda, Slack Transcript). Many thanks to @cbravobernal for compiling these notes!

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

TypeScript Types from Packages

(Slack conversation)

WordPress packages will now ship with their own first-party TypeScript types!

Pull request: https://github.com/WordPress/gutenberg/pull/18942

The types (declaration files) will be published with the packages, so folks using the packages via npm will have access without doing anything else.

The type generation is built into the existing package build/publish flow, so things should remain largely the same from the perspective of 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/ development (hopefully with better information in our IDEs!)

npm run build:package-types is the script that generates them.

Awesome job! Kudos!

Action:

JSX support for wordpress/scripts

(Slack conversation)

Link to the issue

PR proposing it for formatting command.

There is a small discussion about seeing if it is necessary to discourage or not jsx files. Noticing that changes to accept jsx are quite simple. And are even accepted in some code already. There are different opinions, so the team prefer to continue the discussion.

Action: 

Open Floor

Updating Jest Error

@gziolo had issues upgrading Jest with the last version. See pull request. Asks if is it a good reason to refactor them to use the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Testing Library?

@aduth comments that is Enzyme related issue. That expects a DOM to exist.

Airbnb transferred the project to the community. Seems that everyone is going to switch away from Enzyme.

Also they comment that Jest, Babel and Puppeteer should be upgraded, and would be nice to have some strategya arount all that. The project seems to have too many dependencies.

Action:

  • No action defined.

News Roundup

This roundup contains a few links for Gutenberg and JavaScript related news curated (and commented on) by @nerrad.

#core-js, #javascript

JavaScript Chat Summary: March 17, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Agenda Items

JSDoc Documentation Standards

(Slack conversation)

Question: Does it 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). sense to document changes to a function over time, and if so, how?

Context: https://github.com/WordPress/gutenberg/pull/20427#discussion_r386396607

The current JavaScript documentation standards restrict the @since tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) to include only the version number:

@since x.x.x: Should always be 3-digit (e.g. @since 3.6.0).

This is in contrast to the PHP documentation standards, which include guidelines around using @since as a changelog:

If significant changes have been made to a function, hook, class, or method, additional @since tags, versions, and descriptions should be added to provide a changelog for that function.

Proposal: Incorporate some adaptation of the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 since changelog guidelines into the JavaScript inline documentation standards.

Discussion Points:

  • @nerrad asks if this could be used to pull documentation automatically from the source code. This is quite possible, and is likely exactly what is done with the PHP source code documentation (example documentation and source).

Action Items:

  • Update the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. documentation standards, assuming there is no opposition presented in the coming days.
  • Disable the JSDoc since format validation for 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/ in the related changelog (already done)

News Roundup

This roundup contains a few links for Gutenberg and JavaScript related news curated (and commented on) by @nerrad

  • The editor chat summary from March 4. Also the chat summary from March 11.
  • Rich Tabor writes a nice overview of what the block patterns api means for WordPress.
  • Gutenberg 7.7 was released (and shortly thereafter 7.7.1). Highlights in this 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. are: the new 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. ui (otherwise known as “G2”) and the initial version of the block patterns ui.
  • Outside of normal Gutenberg and JS news, but I thought it worth highlighting – All-women release squad. I’m so excited about this!
  • Justin Tadlock writes about Sorta Brilliant’s Sorta Fun Block Plugins. If you want some creative inspiration… great stuff!
  • Speaking of sortabrilliant, that sitesite (versus network, blog) released an interesting tool (Chrome extension) called Detective Wapuu – a site scanner for blocks.
  • The CSS chat summary for March 12th’s meeting is posted. A number of tickets were created around doing a CSSCSS Cascading Style Sheets. audit of WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Notes from the March 13 accessibility team meeting.

Other Random Stuff:

#core-js, #javascript

JavaScript Chat Summary: March 10, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

News roundup proposal

(Slack conversation)

@nerrad as been kind enough to offer to share an aggregate of news relevant in the 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/ and general JavaScript ecosystem, to include in the summary notes for each week’s meeting.

Discussion:

  • There was an agreement that it’s a great idea.
  • The plan is to add this as an extra section in our JavaScript chat summary starting from this week.

Action items:

  • New agendas should be structured to include separate sections “Agenda Topics” and “News Roundup”
  • Note-takers should aim to include these items in the published summary notes.
  • Update “Note Takers” document guidelines.

ESLint “prefer-const” relaxation proposal

(Slack conversation)

@aduth added a pull request about a potential revision to our default ESLint configurations (i.e. coding standards) at https://github.com/WordPress/gutenberg/pull/20737. He just wanted to bring it to attention, since any of these sorts of coding standards changes are good to highlight. There’s been some positive feedback already on the pull request that was echoed in the chat.

Visual 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. testing tools

(Slack conversation)

@isabel_brison created a ticketticket Created for both bug reports and feature development on the bug tracker. https://core.trac.wordpress.org/ticket/49606 to introduce visual regression testing in the WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., so we can clean up some of the old CSSCSS Cascading Style Sheets. with confidence. She was wondering if this type of testing has been discussed or explored at all for core or Gutenberg. Also, would there be value in adding it for Gutenberg, too?

Discussion:

There’s no visual regression testing in Gutenberg as of today, but there are parts of the tooling that could 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 possible, like taking screenshots with the headless browser via Puppeteer. At least with the ticket as presented, it seems primarily focused on existing screens which may not be expected to change, and thus primarily with the aim of preventing regressions while doing CSS refactoring.

The tests themselves are minimal, but the reference images are not insignificant though and need to be updated periodically. The biggest concern is the size of the assets that would have to be maintained and how to ensure they don’t pollute repositories with source code.

There is an existing prototype in the Gutenberg repository (https://github.com/WordPress/gutenberg/pull/18797) that uses 3rd party service percy.io that can be used as a reference when exploring the final implementation.

Introduce a common 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. to style Button from both web and mobile

(Slack conversation)

There is a pull request that explores primitive UIUI User interface components that can be used both in native mobile apps and in the browser: https://github.com/WordPress/gutenberg/pull/19104. There was no specific discussion item attached to this, but it was requested that anyone interested take a look and provide any feedback they have to drive further development.

News roundup

A few links to Gutenberg and JavaScript related news (curated by @nerrad).

WordPress 5.4 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.

  • General Block Editor API Updates include: 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. attribute sources deprecated, ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. transforms configuration can include an isMatch function, AsyncModeProvider API, custom media upload handler as a setting, easier drag and drop, rich text won’t set focus when applying a format, a new guide component, and deprecation of @wordpress/nux.
  • New gradient theme APIs will be available in WordPress 5.4
  • Fullscreen mode is now the default in the block-editor.
  • All the goodies introduced with wp-env.
  • A fieldguide for WordPress 5.4.

Other random stuff

#core-js, #javascript

JavaScript Chat Summary: February 25, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Unit testing revisited

(Slack conversation)

The current tooling used for component testing 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/ was observed to not support support ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. portals. An implementation of a new testing utility module was originally proposed, then later resubmitted as an incremental approach to adopt React Testing Library.

Discussion:

  • Is this about limitations of the tooling for fundamental React features, or about our approach to testing? It appears to be a little of both.
  • The conversation evolved into a discussion of how we want to test components, essentially distilled to a distinction between white-box and black-box testing.
  • There was some unclarity around what impact React Testing Library would have on our existing tools. @hazdiego joined the conversation, pointed to an earlier GitHub comment contrasting the solutions, and clarified that while it has feature parity to support replacing existing tools, it also comes opinionated with integration-style testing.

Action items:

Open Floor

WordPress 5.4 Deadlines

(Slack conversation)

@adamsilverstein made note that the WordPress 5.4 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. is quickly approaching and that any work not addressed soon would need to be punted to a future release.

@aduth mentioned that a polyfill fix for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org will be needed, and that he would appreciate attention on the corresponding 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. at #49360.

Webpack Build

(Slack conversation)

@gziolo mentioned that changes to the Webpack build were introduced with #48154, where one asset file is created containing all JavaScript entry points. This generated file is used to iterate and register all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. scripts output from the Webpack build.

@gziolo mentioned a desire to improve upon this with better handling between development and production environments. He gave an example of the wp-warning package, which should be considered unnecessary for production, since it is a noop in that environment. Due to time constraints, this is planned to be discussed further in next week’s meeting.

#core-js, #javascript

JavaScript Chat Summary: January 28, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

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. package

(Slack conversation)

New @wordpress/create-block package was merged in the past week: https://github.com/WordPress/gutenberg/pull/19773. The package is meant to help 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 developers scaffold new blocks with a single command npm init @wordpress/block.

It is already available on NPM. It was published today as part of the next 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/ plugin 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. process that started on Monday.

Playwright vs Puppeteer

(Slack conversation)

Last week, Microsoft announced its new “Playwright” tool, which is very much like Puppeteer and created by many of its original contributors. The main draw here is that it supports multiple browsers, whereas we’ve always been limited to just Chrome using Puppeteer.

We discussed whether we should consider migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. from Puppeteer to Playwright but we decide to postpone the decision for some time. The reason for that is the uncertainty about how those two projects evolve. The fact that the Puppeteer team has just released a new version that supports the Firefox browser makes it even more interesting. We plan to revisit this topic in the future.

#core-js, #javascript, #summary

JavaScript Chat Summary: January 21, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

New “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.” package

@gziolo has opened a pull request to propose a new “create-block” package, intended to be used by 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 to scaffold new blocks. This is the result of work which had been previewed during a previous meeting’s open floor.

Discussion points:

  • Separate package vs. part of the existing scripts package?
    • Needs to be separate to be usable as an npm init initializer.
    • We could decide later to add something to scripts which “proxies” commands to the separate package
  • Differences from the existing WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ scaffold script?
    • Embraces build tooling, vs. intention of WP-CLI script to be run-and-done
    • Can be run outside a WordPress environment
  • Future goals

Action Items:

Open Floor

  • @epiqueras shared a problem which has surfaced in development of the block editor relating to values in inner blocks contextual to their ancestor blocks. He has worries about the performance impact of the current approaches, and has proposed an idea for a solution to improve the block 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. in a way which creates a shared context for block values.
  • @davilera raised an ongoing discussion regarding date function inconsistencies. This was also discussed during last week’s meeting. As an action item, he would like for a decision on the desired behavior and function signatures. We want to avoid backwards-incompatible changes. The pull request in its current form is sufficient for fixing an existing 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.. After some discussion, a plan emerges that changes toward a more desirable API can and will be made within the current pull request without introducing breaking changes.

#core-js, #javascript

JavaScript Chat Summary: January 14, 2020

Below is a summary of the discussion from this week’s 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/. chat (agendaSlack transcript). Thanks to @cbravobernal for compiling these notes.

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Date package

(Slack conversation)

@davilera mentions in the pull request issues a developer might face when using the date package and proposed how to solve them. Namely, source timezone, target timezone, and possible translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. of the final date. People noticed that the package is not considering timezone.

Regarding PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 side, date_i18n() is remarked to be “illogical, incompatible with Unix timestamps, and in order to be deprecated”.

Action:

  • Identifying the minimum changes required to fix the original issue that PR tried to solve
  • Open a new issue where a discussion on if and how to refactor the package
  • Look at the current PHP implementation and trying to reconcile the two

Dropdown rendering with modals

(Slack conversation)

At first, the dropdown wasn’t rendering properly. But once the positioning was fixed, two more issues arose:

  • In a dropdown with multiple fields (such as, for instance, the one you get when using DateTimePicker), tabbing from one field to the other doesn’t work, as the focus moves away from the dropdown, back to the modal. This is an 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) issue.
  • Dropdowns should be closed when one clicks outside of them. But this only works if you click outside of both the dropdown and the modal. Clicking on the modal doesn’t close the dropdown. Dunno what kind of issue this one is.

The mechanism that are affecting this behaviour is the SlotFill system 

@itsjonq says that the mechanism that are affecting this behaviour is the SlotFill system, and currently @hazdiego is working on an (unrelated) PR to start refactoring it:

https://github.com/WordPress/gutenberg/pull/19242

After a little discussion about how hard is to work on focus, modals, dropdowns…

Action:

Open Floor: Markdown linter

(Slack conversation)

@mkaz announce that he introduced a lint-md script that lints code blocks inside markdown. This uses a new .eslintrc-md.js config in scripts package to turn down some of the noise due to documentation being snippets of code.

Right now you need to run manually, we can fine tune and adjust the config before automating further. Try it out using: npm run lint-md [your-file] or if no file specified it runs across all markdown documents. 

Removing ES5 snippets is discussed also.

Action:

  • Try out the new script lint-md especially if writing or updating any markdown and source and we can see how it goes

Open Floor: NPM publishing

(Slack conversation)

@gziolo propose to grant npm permissions to @jonsurrell and Bernie Reiter so they could help with releases. Also talk about automate CHANGELOG file updates on the 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. day.

Action:

  • Grant NPM accesses (owned by @aduth)
  • Keep working on improving release workflow.

#core-js, #javascript

Javascript Chat Summary: Tuesday, December 17, 2019

Below is a of the discussion from this week’s 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/. chat (agendaSlack Transcript)

Have a topic for discussion for the next meeting? Leave a suggested edit on the next chat agenda.

Next Javascript meeting is January 7th, 2020.

Because of a lot of people being AFK for their holidays we’ll skip the next two meetings.

Prettier

@aduth introduce the topic by saying:

There’s been quite a bit happening this past week, both in the comments of the revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. proposal post, and in the original pull request.

Post: https://make.wordpress.org/core/2019/12/09/proposed-javascript-coding-standards-revisions-for-prettier-compatibility/

Pull request: https://github.com/WordPress/gutenberg/pull/18048 

I think we’re in a position 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). a decision on how to proceed here. From the feedback to the post, there are some general thoughts around improvements to the standard, but not any reluctance to Prettier specifically (quite the opposite, in fact!)

It would seem to me that most people are on board with this. Does anyone have any last-minute thoughts on this, or would it be fair to say we can move forward with adopting Prettier?

Based on the comments of the PR and the conversation in the chat, it seems we are in a position to merge this work.

@jsnajdr referred that the PR adds a format-js script to wp-scripts, and provides support for IDEIDE Integrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality. integrations. Well-behaving Prettier editor integrations should pick up the config and the fork binary automatically.

@mkaz proposed a PR that documents these changes at https://github.com/WordPress/gutenberg/pull/19074.

The conversation went on @jsnajdr noted that the PR does not yet format the code, but we can easily format it with `wp-scripts format-js`.

@gziolo showed availability to collaborate/discuss with @jsnajdr how format-js will operate after the PR is merged.

@gziolo noted that having prettier code formatting will alow inline snapshots on the test cases https://jestjs.io/docs/en/snapshot-testing#inline-snapshots.

@aduth proposed the following action items:

  1. Merge @jsnajdr‘s pull request.
  2. Review, merge @mkaz developer tools documentation.
  3. Submit standards revisions changes.

After @jsnajdr‘s pull request is merged:

  1. Create a pull request to apply formatting to the entire codebase
  2. Explore options for automated formatting.

Participants agreed on the plan.

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. Scaffolding

@gziolo shared the following GIF showing block Scaffolding working:

Block Scaffolding Tool

@gziolo managed to implement ESNext template support with wp-scripts integration and is wondering if this scaffolding mechanism should be part of the 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/ repository.

Participants started discussing if this solution is part of the Gutenberg repository, what will happen to the current “official” scaffolding solution offered in WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/. There are technical restrictions in making something equivalent to the solution @gziolo proposed on WP-CLI because WP-CLI should not depend on node.

@gziolo will continue iterating on the new scaffolding solution and, once tested, will import it into Gutenberg.

SVGR support in wp-scripts

@mkaz started the topic by saying:

I have a PR that adds SVG support to it which is a handy addition, but not sure if we want to add it without having the same support in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Gutenberg: https://github.com/WordPress/gutenberg/pull/18243 

For core blocks, we don’t inline SVG, we always code them, so this mechanism would not be used by core blocks, but it may be helpful for third party block developers.

@gziolo said Parcel 2 is heading in the direction of supporting CSSCSS Cascading Style Sheets. and SVG imports. @aduth said Parcel faces a similar challenge, and it may be a useful reference of how to address this problem.

#core-js, #javascript, #meeting-notes