ISBAT use CoBlocks without jQuery

[AnthonyLedesma]

Is your feature request related to a problem? Please describe.

CoBlocks should consider removing jQuery as a required dependency for the plugin. Getting a look at the plugin I find that 20 files reference jQuery which could be refactored to use plain JavaScript. This change would help to make CoBlocks more performant.

Required changes

Events & Post Carousel block

• Remove Slick carousel in favor of Flickity. (Slick is a jQuery extension) - Will be removed following Events/Post-Carousel refactor
• src/js/coblocks-events.js initializes slick in the DOM. - Needs Block refactor
• src/js/coblocks-slick-initializer-front.js - Will be removed following Events/Post-Carousel refactor ( In progress )
• src/js/coblocks-slick-initializer.js - Will be removed following Events/Post-Carousel refactor ( In progress )

Form block - jQuery UI Datepicker | Should be another open-source date picker.

• Remove jQuery from Form block edit.js file ( Remove jQuery Phase 1 #1376 )
• src/js/coblocks-datepicker.js Should be removed. ( Remove jQuery Datepicker from Form Block #2180 )
• includes/class-coblocks-form.php Should not reference jquery-ui-datepicker. ( Remove jQuery Datepicker from Form Block #2180 )
• src/js/coblocks-google-recaptcha.js Should not use jQuery. ( Remove jQuery from Recaptcha script #2131 )

Gif block

• Remove jQuery from Gif edit.js file ( Remove jQuery Phase 1 #1376 )

Gallery Carousel src/js/coblocks-accordion-carousel.js - ( PR: #2147 )

• Refactor to vanilla-js swiper package

Gallery Masonry src/js/coblocks-masonry.js

• Use vanilla JS to initialize Masonry. (https://github.com/desandro/masonry#initialize)

Google Maps Script src/js/coblocks-google-maps.js

• Refactor script ( Remove jQuery from Google Maps script #2130 )

CoBlocks Lightbox src/js/coblocks-lightbox.js

• Refactor script ( Refactor CoBlocks Lightbox to remove jQuery #1429 )

CoBlocks Crop Settings Extension & Component

• Remove jQuery from Crop Settings extension and component ( Remove jQuery Phase 1 #1376 )

Cleanup tasks

• Review includes/class-coblocks-block-assets.php and remove jQuery from dependency arrays.
  - This file will be able to remove all references to jQuery once the following blocks are refactored
  - Events
  - Post-Carousel
• Review package.json and remove jQuery from devDependencies
  - As stated above, both the Events and Post-Carousel blocks must be refactored away from Slick before we can remove jQuery from the devDependencies file

Inspired by WordPress.org support request
https://wordpress.org/support/topic/did-you-start-using-jquery-in-a-recent-release/

[jrtashjian]

We can use the Fetch API to replace this.

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

[josephscott]

This would be a very welcome improvement.

I was running performance tests on a scratch site and just activating the CoBlocks plugin was enough to trigger adding jQuery, jQuery Migrate ( and slick.js ) for page views. In mobile performance tests I ran, activating the CoBlocks plugin slowed down start render by more than 30%.

There are great resources on replacing jQuery code with vanilla JS, like http://youmightnotneedjquery.com/ - which can be very helpful in an update like this, in combination with targeting IE and IE versions ( if that is a concern ).

See also WordPress/gutenberg#15256

[richtabor]

We'll likely need to break this down into phases, the first being removing what we can more easily remove/migrate from. The second being the bigger moves - such as the lightbox/slider functionalities.