Tag Archives: javascript

Ajit Bohra 9:15 am on May 28, 2019
Tags: , , javascript   

JavaScript chat summary, May 21st, 2019

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.

Maintaining Changelog

  • Updates to docs on maintaining packages change log.
  • Developers should not choose the version number for changes to packages, instead, add the changes to relevant subsection under “Master” heading.

Unstable APIs

  • Some discussion around listing and auditing various unstable APIs in use.
  • @nosolosw suggested automating the listing using JSDoc and was agreed upon.
  • These unsable 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.’s will be reviewed and removed on case by case basis.

Release Automation Tool

  • Current release process required manual intervention which was time consuming and prone to errors.
  • @youknowriad worked on the initial tool which helps in automating the process more details in PR

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

#core-editor-summary, #core-js, #javascript

Omar Reiss 8:03 am on May 21, 2019
Tags: , , javascript,   

JavaScript chat summary, May 14th, 2019

Below is a summary of the discussion from last 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 this week’s agenda.

Agenda: ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. for Data

Slack Conversation

We discussed an issue to introduce a useSelect React hook to the @wordpress/data package. The discussion focused on determining what the best 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. would be and a concern was raised to investigate the potential performance impact. We agreed it would be best to have a single useSelect function which allows to pass in a mapping callback for more complex conditional type use-cases involving multiple selectors/stores. We could create utility functions for simple cases.

Open floor: Node compatibility

The version of node-sass we use isn’t compatible with Node 12.x. A PR to update node-sass to a compatible version is now merged.

#core-js, #corejs, #javascript, #js

Darren Ethier (nerrad) 2:47 pm on May 7, 2019
Tags: , javascript   

Javascript Chat Summary: May 7th, 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 (agenda, Slack Transcript)

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

Agenda: ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. offering for wordpress/data

Context | Slack

There’s a bit of discussion surrounding implementing React Hooks in the WordPress use of javascript. Here’s some take-ways/actions from the discussion:

  • Experiment with a useSelect limited example to port an existing component (initial experiments owned by @nerrad)
  • Consider the broader context of higher-order components, and the impact of hooks:
    • Which existing higher-order components can be ported? All of them?
    • Do the interfaces change in porting to hooks?
    • Would we ever find reason to create new higher-order components?

Please assist in working through this discussion. You can contribute thoughts in the related github issue.

#core-js, #javascript

Anton Timmermans 2:35 pm on April 30, 2019
Tags: javascript   

JavaScript chat summary, April 30th, 2019

Below is a summary of 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.

Webpack 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. to extract script dependencies

A status update on the state of automation for maintaining script dependencies. The pull request to replace the manually maintained packages-dependencies.php with a generated one is now merged. We discussed what the next steps would be for inclusion of this in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. For this the packages need to be released and a 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. created.

#javascript

Greg Ziółkowski 2:30 pm on April 25, 2019
Tags: javascript   

JavaScript chat summary, April 23th, 2019

Below is a summary of 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.

Webpack 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. to extract script dependencies

Another update was shared on a Webpack plugin discussed during the previous week’s meeting, which helps provide automation for the tedious and error-prone task of manually maintaining script dependencies. The pull request was merged this past week: PR#14869. It won’t be published to npm until WordPress 5.2 is released.

There’s a follow-up issue at PR#14837 which aims to replace the existing manually maintained packages-dependencies.php file 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/. There’s an open question there about how we handle “legacy” scripts which are still referenced on the window global, as these aren’t explicit but rather implicit dependencies. We discussed several possible solutions and decided to take the following steps:

  1. We know what these implicit dependencies are and which scripts depend on them, let’s merge those into the “extracted” set? There is already a follow-up PR#15124 opened (shortly after the meeting) by @jonsurrell.
  2. We were all in agreement that referencing the window globals is itself a problem we need to address. This is incompatible for use in an npm context and should be eliminated or substituted with an equivalent package. @aduth created an issue#15125 to keep track of it.

#javascript

Andrew Duthie 6:33 pm on April 17, 2019
Tags: javascript   

JavaScript chat summary, April 16th, 2019

Below is a summary of 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.

Closing the LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop: TypeScript

Slack Conversation | Previous Conversation

Question: What decision do we arrive at based on the previous discussion and comments?

Context: It had been an agenda topic for a meeting last month to consider whether to maintain and accept pull requests proposing to include TypeScript definitions in the project. As previously discussed, it was generally agreed upon to not maintain these in the project. Additional time was allotted to allow for asynchronous feedback. Since then, the topic had not been revisited.

Decision: TypeScript definitions will not be maintained 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.

Follow-up: In an effort to support those who may find benefit in these definitions, we should at least consider documenting third-party resources.

Action items:

  • Explain decision and close the related pull request. (Owner: @aduth)
  • Open a new documentation issue to outline the desired resources, and invite those from the affected pull request to provide feedback as to what specific information would most benefit interested developers and require the least ongoing maintenance. (Owner: @aduth)

Future of 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. Registration

Slack Conversation | Previous Conversation

An update was shared on a proposed Webpack 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. discussed during the previous week’s meeting, which would help provide automation for the tedious and error-prone task of manually maintaining script dependencies. (Note: The pull request has since been merged)

Subsequent discussion was two-fold:

  • Could this plugin be used to help solve the unanswered question around asset management for the ongoing Blocks Registration RFC discussion? And if so, what would that look like?
    • There was some consideration about whether the manifest output by this tool, when used in combination with an explicit or implicit entry point to a block, could be sufficient to derive all necessary information to register and load a script and its dependencies.
  • Would this or its impact on the Blocks Registration RFC impact (for better or worse) an existing issue with load order of scripts and the challenge it poses to plugins who seek to extend blocks?
    • It was not considered to be directly related. However, there was some follow-up discussion about the use of filters generally, and whether the Blocks Registration RFC could have an impact in considering the registered block type to be aggregate of a series of patches (merging the block manifest, the client-side definition, and any third-party modifications).
    • Action Item: Continue discussion on the associated issue.

#javascript

Jorge Costa 3:54 pm on April 10, 2019
Tags: javascript   

JavaScript chat summary, April 9th, 2019

Below is a summary of 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.

Agenda: Administrative

@aduth requested an update to the meeting time displayed in https://make.wordpress.org/core/ — the time being shown was wrong and it should be corrected to be one hour later.
@sergeybiryukov performed the update.

Agenda: Feature: Add webpack 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. to externalize and extract script dependencies

A pull request was proposed to implement a new module to help automate some of the processes around assigning webpack externals.

@aduth provided some context:

A problem we have today is we have the package.json each package which lists these, then they need to be duplicated again into lib/package-dependencies.php, which sometimes does not occur

The pull request was generally well received, people participating in the meeting noted that it may be a step to eliminate the need for maintaining dependencies in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher for plugin developers utilizing webpack or wp-scripts build workflow.

@aduth referred that the broader problem of from just a JavaScript file figuring out the dependencies may not be possible to solve.
If someone reading this has any idea that would work in the majority of cases feel free to comment.

@youknowriad referred he would prefer to have the mechanism implemented as a babel plugin instead of a webpack plugin as babel is more “universal” tool to read JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. and transform it, and would allow the mechanism to work in plugins using other bundle systems like Parcel. But reinforced that he is not against a first version using a webpack plugin.

Agenda: Filterable translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. functions

@swissspidy proposed a pull request that makes all gettext functions from the i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. package filterable.

There was some consensus that although the filters may not have a big overhead during a gettext function call, the function is a hot path and may be called many times during the application usage.

The discussion went forward and people analyzed some tradeoffs of the following potential alternatives:

  • Apply the filters on the server.
  • Add a labels property to the editor setting that developers may change.
  • Provide developers a simple way to extend an i18n file with another file containing their customizations.

Ultimately it seemed people were not able to decide on a solution because there is a lack of knowledge of the high level need a plugin wanting to use a gettext 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. may have.

@nerrad suggested the following action item:

experiment with actual benchmarking metrics for the filter approach using concrete examples

@swissspidy volunteered to find some concrete examples/use cases.

If anyone has some concrete examples please provide them as it would allow to decide the best path forward and would allow to have real-world measures of the performance.

#javascript

Ajit Bohra 7:43 pm on April 4, 2019
Tags: , javascript   

JavaScript chat summary, April 2nd, 2019

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.

Custom ESLint Rules

  • Current ESLint plugin enforces rules like “dependency group”, and “valid-sprintf” which are quite specific to 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/ / WordPress.
  • These rules are to be removed and recommended ESLints rules to be further discussed and enhanced.

Update to MediaElement.js

  • With recent browser changes, Vimeo videos will no longer autoplay in chrome. An update to MediaElement.js fixes the various issues.
  • MediaElement.js library to be updated and backported to previous WP releases, follow tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticket for further info.

Packages Versioning

  • Current contribution guidelines for packages recommend that the person proposing a change decide the version bump based on the type of their change.
  • There have been few discussions in pull requests which indicates that the version should not be proposed as part of individual changes, rather decided at the time of publishing.
  • Contribution guidelines for packages changelog to be updated to recommend adding changes as “unreleased” or “master”.
  • Some discussions around experimenting with the automated changelog creation for long term solution.

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

#core-editor-summary, #javascript

Omar Reiss 11:39 am on March 28, 2019
Tags: , , javascript,   

JavaScript chat summary, March 26th, 2019

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.

Agenda: Building JavaScript

Slack Conversation

A post was published on the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Make blogblog (versus network, site) titled Building JavaScript. It explains how to set up an ESNext development environment using the new WordPress scripts package. This provides an easy and standard method for building blocks and JavaScript heavy plugins.

The discussion continued towards a potential followup task: to offer a scaffolding package that would help to create your first 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.. This could then in turn be utilized by the wp scaffold command in WP CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress., to allow scaffolding blocks directly with WP CLI. The discussion continues on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ here: https://github.com/WordPress/gutenberg/issues/10629.

Agenda: Coding Guidelines

Slack Conversation

Coding guideline changes have been proposed for CSS naming and Experimental / Unstable JS API’s 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/. Feedback is welcome!

Agenda: Gutenberg Playground

Slack Conversation

A standalone Gutenberg playground environment has been merged. As we’re expanding the usage of Gutenberg outside of edit-post and also talking about cross-CMS usage and external usage (in the broad sense), we need a way to run the block editor in a context independent from WordPress Adminadmin (and super admin).

The playground allows us to test Gutenberg as a standalone editor. For example, we can use it to test that our components don’t rely on WP Admin styles to be present, that core blocks can be used without necessarily requiring a post object.

This is only a first step. The playground could evolve to contain examples of reusable components, and it could also serve as a contributor-tool to help developers discover 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.’s.

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

Marcus Kazmierczak 1:04 pm on March 25, 2019
Tags: , , javascript   

Building JavaScript

The Gutenberg Handbook shows 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 examples in two syntaxes: ES5 and ESNext. These are version names for the JavaScript language standard definitions. You may also see elsewhere the names ES6, or ECMAScript 2015 mentioned. See the ECMAScript Wikipedia article for all the details.

ES5 code is compatible with WordPress’s minimum target for browser support. It can run straight in your browser and does not require an additional build step. In many cases, it will be perfectly fine to follow the same approach to start experimenting with your 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. or theme quickly. As soon as your codebase grows to hundreds of lines, it might be a good idea to take advantage of all the great JavaScript features included in ESNext syntax.

With the release 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/ 5.3, the @wordpress/scripts package was updated to include webpack and Babel configurations. The update makes setting up an ESNext development environment much easier for building blocks and creates a standard method for developers to set up their plugin.

The documentation in the JavaScript tutorial and the ESNext examples in the gutenberg-examples repository are both updated to include the new process.

Here is a quick overview of how to set up an environment. First, you need to install @wordpress/scripts package:

npm install --save-dev @wordpress/scripts

You can then update the scripts section of your package.json to include:

"scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
}

No webpack config (e.g., webpack.config.js) or Babel config (e.g., .babelrc) is needed.

The scripts expect the source file to be found at src/index.js and will output the build to build/index.js. So if you are migrating an existing plugin, you will need to move your source and enqueueing to these new locations.

With the setup in place, the standard workflow is:

  • Install dependencies: npm install
  • Start development builds: npm start
  • Develop. Test. Repeat.
  • Create production build: npm run build

In general, the package should be used with the set of recommended config files. While it is possible to override every single config file provided, if you have to, it means that your use case is more complicated than anticipated. We’d love hearing about it as we’d like to iterate on the current setup and offer more flexibility in the future. At the moment, our recommendation would be to use the underlying tools (webpack, Babel) directly.

See the JavaScript Build Setup documentation for a full explanation and walk through, and see the scripts package documentation for all the details.

Props to @gziolo and @nosolosw for their efforts.

#core-editor, #core-js, #javascript