JavaScript Comes To WordPress

What Calypso means to WordPress Users

JavaScript has always been a part of WordPress. But within the last 5 years WordPress has expanded its use of 3rd party JavaScript libraries as seen in the current list of supported JS libraries:
Backbone.js – handles much data table operations
cropper.js – key part of media library Crop tool
emoji.js – manage emoji icons
html5.js – checks HTML elements
jQuery .js- most frequently used JavaScript library
jQuery.imageareaselect – part of Media library edits
jQueryUI. – many admin interface ops
swfupload (deprecated) – Adobe Flash is disappearing
ThickBox – Gallery views
TinyMCE.js – Visual editor features
This list of JavaScript routines varies widely depending on  the theme and plugins being used in your WordPress website.

Enter Calypso

calyp2In November of 2015, a new Calypso UI/UX interface was introduced on WordPress.com  as the screenshots below show. Matt Mullenweg,  WordPress creator and curator, has announced, JavaScript has become the dominant coding tool for the WPAdmin Client and other user interface functions at WordPress.com.

So when you  use  one of your blogs at WordPress.com you will have a choice whether to use the JavaScript-based Calypso interface or the traditional PHP-based admin and edit  interface. The key question is what does this mean in the long term to the PHP-Centric WordPress  Core and the 42,000++ PHP-based WordPress plugins currently available to WP users.

So now with WordPress.com, users have all the major WP screens and operations but with new JavaScript driven interfaces. Much of  the Calypso interface reproduces the classic WP Admin UI but there are some major changes. Here is a Calypso Post Edit screen:
calypsoMost of the PHP-based traditional Post and Page edit interface is faithfully reproduced in Calypso JavaScript but with new left versus right sidebar orientation. Unfortunately I was surprised to discover that many of the WordPress Edit Annoyances are preserved in the new Calypso editor. If you want to check this out on your WordPress.org hosted website, just add the JetPack plugin and enable the Manage Jetpack option.

Calypso is used throughout the new admin interface. Here is a sample:
wpcalmenu

In the screenshot above the drag and drop Menu interface now has  a + icon driven placement of new menuitems. In the Page/Post editor, the Visual Edit tab looks very much like the classic WP editor but the Text or HTML tab is now stripped of all its edit commands:
wpcaledithtmml

Also note that the Editor sidebar is on the left and most of the commands are contained in an accordion pulldown. However, many of the classic WP  commands have changed position,  layout or even have yet to appear in the current Calypso interface.

For example, the gallery command in the media library sees a simpler interface:
wpcalgallery

Even more useful, now there are 7 gallery layouts including tiled mosaic and slideshow layouts that are simple and easy to use. But these layouts cannot be configured at all while there is still no list of galleries . So this  removes  some of the luster for Calypso gallery support.

Major New Calypso Features

In the past few months a number of Calypso features have snuck out the door including changes to the editor  and JetPack configuration/settings, etc. But with  the Calypso unveiling, all of WordPress.com  admin interface has changed. And the new Admin interface [you can still revert to the classic old WPAdmin] takes on new functionality.

First, using a special Calypso Mac App or WordPress.com in any major browser, and a JetPack plugin enabled hoste WordPress.org website, users now can tryout many parts of the Calypso interface have a multisite admin interface for many WP tasks:
wpcaladmin

So from my WordPress.com MySites page I am able to edit my PicsofCanada.com website which is hosted on an  external server. This is attractive because it means I can go to one place to administer a host of my own and client websites. There are restrictions, see here for details.

Second Calypso key feature is that JetPack now has a uniform JavaScript base with a common setting/configurtaion interface. But this raises a question, that Matt Mullenweg is not prpapred to answer – will JavaScript replace PHP as WordPress’ Core language?

Third key feature  is the fact that WordPress now has a more general Notifications system. Users go to one place to see clients reactions and comments to messages and posts online. This messaging  answerback  page   could be extended to other social media like Faceboook, Google+ and Twitter.

In sum, WordPress with its JavaScript for admin and  client side  operations now has a new state of the art interface using the latest JavaScript libraries. Just a little future proofing by adding and/or intensifying the use of server-adept JavaScript libraries like angular.js, node.js , React.js, etc. More broadly, JavaScript after 24 years of Web evolution, emerges as the driving programming language for WordPress and also  broader Web  development.


Calypso Resources:
Definitive Overview
GitHub Open Source
Matt Mullenweg talks Calypso among other things
The Future of WordPress in 2016

Advertisements

About warkworth1

Web Designer and Developer that uses WordPress primarily but also Bootstrap, Foundation Zurb, Ink, and even Magento etc. Love teaching full stack developer tricks with HTML/CSS/JavaScript/PHP/SQL at WordCamps and on my blogs
This entry was posted in coding, ui and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s