Category Archives: JavaScript for WordPress

Create Additional Search Keywords for Your Gutenberg Editor Blocks

While working on my Gutenberg Editor Development Course I stumbled upon a cool feature for Gutenberg Blocks that let’s someone to find your block using words not found in the title of your block.

Searching for Blocks in Gutenberg

One of the easiest ways to find a specific block in Gutenberg is by using the search field.  By default, if your title has a keyword someone searches for, it will show your block in the results.

Sometimes though, we want our block to show for keywords that are not included in our title.

gutenberg-search-for-block-feature

Here is an example of searching for “Image” and receiving multiple matching blocks

You can see in the example above that if we search for an “Image” block we get blocks that do not have “Image” in the title.

This is accomplished using the “keywords” parameter when registering your block.

Using the Keyword Setting When Creating a Block in Gutenberg

When you create a block using registerBlockType() you can set a parameter called “keyword.”  This parameter takes an array of words that if searched for, will include your block in the results.

custom-keyword-gutenberg-block.png

Custom keyword allows block to be searched for using keywords not found in the block title

In the example above we have added extra keywords to a custom block.

Here is the code to make this work.  (Notice we are also escaping them using the wp.i18n library for localization).

This allows us to have our block show up for the search terms “zac,” “fire,” and “fuego,” which are not found in our block title.

I would suggest looking at what keywords the default WordPress blocks use and leverage some of those keywords in your blocks.

Learn More About Gutenberg Development

If you would like to learn more about creating custom blocks or developing with Gutenberg in general, please check out my Gutenberg Development Course!

How to Add Custom Icons to Gutenberg Editor Blocks in WordPress Using Dashicons or SVG

While working on my upcoming Gutenberg Editor Development Course I came across the question, “How do you create a custom icon for a block in the new Gutenberg editor.”  This post explains my process in figuring this out 🙂

Block Icons in the Gutenberg Editor

With the new Gutenberg editor in WordPress you have the option to select an icon to go along with your custom block.

Screen Shot 2017-12-07 at 4.51.01 PM

Example of icons with default block.

Using Default WordPress Dashicons as Block Icons

When you use registerBlockType() to create a new block, one of the parameters is “icon”.  You can use any default WordPress Dashicons as an icon.

In the example below we are using one of the default dashicons named “admin-settings“.  That will give us a settings icon like this.

default-gutenberg-icon.png

Example of custom block with ‘admin-settings’ dashicon

Here is the code to make that work (focus just on the icon parameter):

Interestingly, if you look in the Gutenberg Core file ‘components/dashicon/index.js‘ you will see that dashicons are not being used the same way in blocks as they are in as in places like admin menus.  Instead, there is a case statement against each default argument, assigning it the proper SVG path.

gutenberg-dashicon-case-statement.png

Example of Dashicon component in Gutenberg Core assigning default SVG paths.

Creating Custom Gutenberg Block Icons Using SVG Paths

A lot of folks are going to want to create custom icons like this one.

custom-gutenberg-icon.png

Example of Custom Block with Custom SVG Icon

In the example above, I used an SVG icon from this collection here.  You can also create you own custom icons.

What you want to do is get the SVG path for your custom icon and create a custom SVG icon using that path.

Here is the code example from the image above.  Pay attention to the top, where iconEl is created then passed as the value to the registerBlockType() icon parameter.

You can use this model in your own code and simply replace the path ‘d’ value with the path for your own custom icon svg.

To Learn More About Gutenberg Development

To learn more about creating custom blocks and more with the new Gutenberg editor for WordPress, check out my Gutenberg Development Course.

WordCamp New York 2017 JavaScript Workshop

WCNYC 2017.png

It’s been a good number of years since I last attended a WordCamp New York.  But it holds a warm place in my heart.  My first WordCamp was WordCamp New York 2008 🙂

This year, my good friend, David Parsons, took up the lead organizer role and put on a great WordCamp New York.

From the venue to the speakers, it all went very smooth and had a nice local camp feel.

Reflections From the JavaScript Workshop

IMG_20171022_003310_556.jpg

My workshop was an adaptation of a similar workshop I have been doing at a number of other camps this year.

However, I learned one important thing this time.

It is important to take the time at the beginning to address who needs to “Learn JavaScript Deeply” from a programmer’s perspective and who just needs to know what it is capable of doing.

I noticed that some people loved learning vanilla JavaScript fundamentals and how to integrate with the WordPress REST API.  However, some people hung around through several hours of the workshop with not really realizing they did not need to learn JavaScript deeply as a developer. Some of these people were just savy website owners.

This supports something I have been saying for a while:

Compared to HTML and CSS, which you can learn a little and do a lot, with JavaScript you have to learn a lot to do a little.

All that said, for folks who wanted to learn JavaScript more deeply (or even just for the first time) I think the workshop went great.

Changes I’m Making for Next Time

There are a few modifications I am going to make for next time though:

  • Add a note at the beginning about “Who Should Be Learning JavaScript Deeply” and who can just learn to “Speak JavaScript”
  • With the decoupled Vanilla JS and WP REST API practice project we will just use fetch instead of introducing Axios or jQuery.
  • Inside of WordPress, when we import our decoupled example into a WordPress theme I am just going to show how to use jQuery AJAX.
  • Rather than try to teach the Backbone client I am just going to mention it at the end.  After teaching it for a while, I think it is best to know some Backbone before trying to use this.

You can view the slides and example files from the workshop here.

Learn More JavaScript!

WCNYC 2017 (1).png

Want to learn more JavaScript?

Head over the JavaScript for WordPress to learn about my Master Course to help you learn JavaScript more deeply.

Data Visualization Talk at WooConf

Wow!  What an honor to attend the 3rd annual WooConf!  Last year I did a workshop on WooCommerce Theme Development.  This year it was all JavaScript, API, and Data Visualization.

I was a little unsure going into the event how the talk would go.  Originally it was a workshop using the Woo API and Chart.js and D3.  However, shortly before the event started, the format was switched to a standard 50 minutes talk.

A Big Thanks!

Luckily, I think that everything went well.  I did a lot of research on Data Visualization as well as related JavaScript libraries.  A big thanks go out to all the folks at the conference who gave me insights into how they do data visualization with their work.  Also shoutout to K. Adam White’s talk at WCEU on data visualization.

Come Out Next Year!

If WooCommerce is how you make your living, you might look into attending WooConf next year.  They put on an amazing conference and I highly recommend it, not just for the talks, but for the networking as well.

Want to learn more about WooCommerce development?  Checkout my WooCommerce Theme Development Course.

Zac Gordon Advanced JavaScript Topics Talk at WordCamp San José Costa Rica

Teaching JavaScript Deeply at WordCamp San José 2017

WordCamp San José

¡Pura Vida! Is the best way to start my review of attending WordCamp San José (formally WordCamp Costa Rica).

Organizers Roberto Remedios and Alfredo “El Puas” invited me to do a workshop at WordCamp San José 2017 earlier this year while we were all hanging out at WordCamp Miami (also a great camp to attend).

What started as a JavaScript workshop turned into a talk on advanced JavaScript and sitting in on a JavaScript panel with two other amazing speakers.

Un Poco Sobre WordCamp San José

IMG_2367.JPG

WordCamp San José 2017 took place at La Universidad Latina de San José, Costa Rica.  More than 350 people attended two days of talks with three tracks.

WordCamp San José Talk from Johana about Brand

Most of talks were in Spanish and topics covered everything from Marketing to Development (w plenty of JS) and everything in between.  Many of the talks also included sing language interpretation and a good group benefiting from it.

DSC_0569.JPG

The layout of the venue was great, with a big open area for the sponsors right in front of the three rooms for the talks.  The main sponsors had cool seating areas and the food included amazing breakfast, lunch and treats!

Screen Shot 2017-09-07 at 10.14.39 PM.png

Let’s not forget about the after party either.  The camp hosted everyone with music, food and great atmosphere at a nearby restaurant / club with a pool and hammocks (not pictured).

My JavaScript and WordPress REST API Workshop

Continuing with my 2017 JavaScript Workshop Tour, I ran a 3 hr workshop on the Friday day before the two day of talks. You can see the slides and example files for the workshop here.

Zac Gordon Costa Rica WordCamp San Jose JavaScript Workshop.png

The workshop covered the following:

  1. JavaScript Language Basics
  2. The Document Object Model
  3. Events in JavaScript
  4. The WordPress REST API
  5. Using JavaScript and the API in WP Themes

Unfortunately, my Spanish was not quite good enough to give the workshop in Spanish so props to all the bi-lingual attendees for following the talk, along with questions, in English.

Zac Gordon JavaScript and WordPress REST API Workshop San José WordCamp Costa Rica.JPG

I like the 3hr time span for a workshop.  It let’s you really cover fundamentals and give time for practice.  Big thanks to the organizers and attendees for inviting me down to do this workshop.

Next year I am going to try to do it en Español 🙂

My First “Advanced JavaScript Topics” WordCamp Talk

A few moons before the camp started, the organizers asked if I would like to do a talk in addition to the workshop.  I knew I would be recording my Advanced JavaScript Topics section of my Master Course so I submitted an open ended talk entitled “Interesting Things About JavaScript” that was actually a JavaScript homage to Andrew Nacin’s Advanced WordPress Topics talk.

Zac Gordon Advanced JavaScript Topics Talk at WordCamp San José Costa Rica

The talk included a number of different intermediate, advanced, new and, well, interesting things, about JavaScript that I am going into more depth on in my Master Course.

The slides might not be as helpful without the explanations but you may still gleam some things from flicking through the deck 🙂

5 + 1 Question JavaScript Panel

As an added bonus I got to sit in on a panel on JavaScript with Elio Rivero from Automattic and Gabo Esquivel who heads up the JavaScript community in San José.

Zac Gordon JavaScript Panel WordCamp San José w Elio and Gabo

The questions were basically something like this (but in Spanish except for my answers):

  • Panelist Intros
  • Advice for JavaScript beginners (I said CodeAcademy, Treehouse, Wes Bos and of course my free JavaScript videos)
  • Top 3 Good JavaScript Practices (I suggested Testing, Coding Standards and Keep on Learning)
  • Favorite JS Framework and why (Choose the best tool for the job, I like Vue for it’s architecture and ease and React for Gutenberg Blocks etc,  If I was building a huge app or plugin I would also consider Angular)
  • Most challenge JavaScript project (Teaching JavaScript Deeply!)
  • JavaScript for WordPress in 2018 (Gutenberg, JS Widgets, More w Customizer, Keep Learning JavaScript)

Overall a Great Camp with Lots of JavaScript

Muchas gracias a los organizadores y voluntarios de WordCamp San José 2017.  It won the 2017 WordCamp Award for food (rice, beans and real cooked food is soo good) in my opinion.

WordCamp San José 2017 Volunteers

It also had a ton of talks on JavaScript in addition to mine, like Cross Platform React, CSS in JS, Calypso, Angular, GraphQL and even a demo of Caldera Forms in action, which I am definitely checking out for my next WP project that needs JS driven forms.

I am going to start a rumor that in 2018 you may see more than one large WordCamp in Central America around the same time period.  I highly suggest you attend and get some of this Pura Vida WordCamp energía!

Workshopalooza at WordCamp Denver 2017

cropped-logo-website.png

This weekend I had the opportunity to attend WordCamp Denver, a great example of a well attended and run local camp.  The first day included two tracks of great talks.  The second day featured 13 different workshops (including one from me on JavaScript + WP REST API).

  • Site SEO Checkup
  • Flexbox
  • Defining, Mapping and (Sometimes) Automating Your Business Processes
  • 5 Things You Can Do to Get More Traffic to Your Blog
  • Making Your First WordPress Plugin
  • Let’s learn Git. No more excuses.
  • Take back the day with WP-CLI
  • Learn Vanilla JavaScript (& The WP REST API)
  • How to create an intro packet to streamline client screening and onboarding
  • Get Personal – Content Personalization with WordPress
  • Advanced WordPress Features for User / Bloggers
  • Building a Theme
  • How to Attract More Clients with Better Branding

 

13 Workshops in 1 Room, All at Once

Honestly, at first I did not think this idea was going to work.  All of the workshops took place in the same room.

Each workshop included 8 people around a round table (w a monitor rather than a projector).  Some workshops had two groups of tables.

I predicted mayhem.

Actually, this was a GREAT setup and I would actually recommend it to other WordCamps.

20170827_095815.jpg

Here are what I think are some Pros to this approach:

  • You can cover a lot of different topics
  • It is invigorating to have other workshops going on (folks did not seem as tired after 3hrs)

There are some downsides however:

  • Limited to ~8 people per workshop (other camps have workshops with 30-50 people)
  • Some folks had a hard time hearing with 2 tables and a presenter at the far end of one of the tables
  • Not directly related to this approach in general, but make sure everyone has power and presenters have a monitor with proper cables and adapters.

Although I would have liked to have been able to offer the workshop to more people, I think that this approach worked really well for WordCamp Denver.

 

3 Hours is a Good Length for a WordCamp Workshop

Most of the WordCamp workshops I have seen this year run 90 minutes or 2 hours.  I do not think this is enough time for attendees to practice on their own and cover enough content for people to walk away feeling like they really learned something.

 

20170827_092641.jpg

 

Three hours works well.  You can either move at a nice and relaxed pace and cover a single topic very well.  Or you can go faster and offer more ready made resources like exercise files, templates or example projects.  With this approach you can cover quite a lot of content in 3 hours, while still giving time for practice.

 

My Continually Evolving JavaScript Workshop

I did a lot of work between WordCamp DC and WordCamp Minneapolis modifying the JS for WP workshop I have been giving this year.

You can see the slide deck and example files for the WordCamp Denver version of the workshop here.

I took out a lot of things this time on the DOM (traversing, cloning, deleting), removed most examples that used webpack, and added in more on wp_localize_script and the Backbone API Client.

I also took out a section on JSON (w JSON.parse and JSON.stringify), instead relying on Axios, jQuery or the Backbone Client to get the JSON into a native JS object.  In hindsight this was a mistake.  I think it is valuable to learn if you are taking the approach of trying to learn how things work under the hood in JavaScript.

On the other hand, I could skip over JSON and AJAX completely if we are already inside of WordPress and just use the Backbone API Client.  In the past I have taught AJAX using Axios or jQuery and would really like to start pushing the Backbone Client as the recommended way to make JS WP API requests inside a theme or plugin.

 

20170827_092633.jpg

Even with taking a lot of things out of the workshop, it still has too much for a three hour workshop.  Really I think that this workshop should mostly (90%) focus on JavaScript (and less trying to cover different API implementations).  So an outline like this:

  • JS Basics
  • DOM selection, manipulation and creation
  • Events
  • JSON and AJAX (Then pull in WP REST API as the example)

Currently I am doing a lot more with enqueueing JavaScript in WordPress.  One approach could be to do the entire workshop inside of WordPress themes instead of stand alone JS and HTML files.  This may give it a more JavaScript for WordPress feel as opposed to more just a JavaScript workshop.  It will also ensure if we get cut short that this basic skill gets covered.

I will continue to work on giving and modifying this workshop through the end of this year.  Next week when I give this workshop at WordCamp San José and try out some different approaches mentioned here.

 

Hats Off to Leah Ashley (and other organizers)

Apparently, lead organizer, Leah Ashley, emailed each WordCamp attendee asking them what workshop they wanted to attend.  This resulted in pretty much all workshops completely full.  Great job Leah (and every one who helped and supported you).

If you are in the Denver area I would definitely suggest coming out to this camp in the future.  It was well run, fun and not too overwhelming.  Great job to all the volunteers and folks who made WordCamp Denver and Workshopalooza Denver 2017 possible.

If you want to learn more about JavaScript for WordPress, please check out some of my free JavaScript videos here.

WordPress DC 2017 – HTML, CSS and JavaScript Workshops

wordcampdc

This weekend we had the first ever WordCamp DC.  I have been part of the DC WordPress Community since it’s early days so it felt wonderful to have such a great 3 Day ~500 People Inaugural Event.

On the third day of the event we had 6 workshops running concurrently with Contributor Day:

  1. Beginning WordPress
  2. Beginning Marketing
  3. Beginning Brand/Design
  4. Intro to HTML
  5. Intro to CSS
  6. Intro the JavaScript

The user, marketing and design workshops ran at the same times as the HTML, CSS and JavaScript workshops.  I heard all of the workshops were great, but I wanted to highlight the coding ones since it is a slightly different approach to WordCamp Workshop Tracks I have seen lately that solely focused on JavaScript.

Not Just Teaching JavaScript

This year I have been to a number of camps with JavaScript workshop tracks.  Usually they start with an intro to JavaScript, which I have done, then more advanced workshops on topics like frameworks, the WP API, or new JS features and tools.

WordCamp DC took a more general approach and offered Intro workshops on web design overall, including HTML, CSS and JavaScript.  This has some benefits since many people were able to get a big picture look at the common front-end languages.  The downside is that folks interested in more advanced JavaScript topics did not have a workshop option.

When designing workshop tracks I think it’s important to have a pulse on what your community wants and needs.  This approach worked really well for WordCamp DC, but it might not have been the right choice for all camps.

What I Was Able to Teach About JavaScript in 90 Minutes

You can see the slides and practice files for my workshop here.  The main outline included the following:

  1. JavaScript Language Basics
  2. The DOM
  3. Events

Each section had a few slides and a few practice files.

I am very grateful for Beth Soderberg, one of the camp organizers for TAing my workshop.  With her feedback we went much slower than I would have otherwise.  This was good since most people had very little web design or programming experience.

Even some folks who had taken a few online JS courses shared they learned a lot more about how JavaScript interacts with a page using the DOM.

We were able to work through JavaScript Language Basics and The DOM but did not get through Events or the little project I put together.  So, everyone got homework and I hope a few folks try working through it.

In the future I might leave out a few things in order to make the workshop fit better into 90 minutes.  I have been doing different versions of this workshop for a couple months now and learning a bit more each time about what is essential to include and what is not.

Thoughts on Workshop Lengths

I have written about this a few times, but I want to repeat it here.  Workshops can be a great addition to camps.  However, to have a good workshop it needs to be long enough for people of various abilities to follow along and have enough time to practice as a group and individually.

Sometimes there is not enough time to allow for this, but I do think folks will gain more out of 3-4 hour workshop than a 90 minute one.  Sometimes this means you cannot offer as many workshops or cover as many topics, but it does mean people will leave having absorbed more.

One way around this is rather than trying to teach an actual subject, like HTML, JavaScript or Vue in a single 90 minute workshop, do a live build out of a specific feature or project.  For example, rather than a 90 minute workshop on VueJS and WordPress, a better 90 minute workshop might be How to List Blog Posts with VueJS and WordPress.  You can make clear you’re not teaching all of Vue in 90 minutes, rather showing how it works in action.  As long as you provide enough time for everyone to follow along with coding out the project it can still be a beneficial workshop and you’re more likely to get through everything.

Keep Up the Teaching!

Workshops at WordCamps have been going on long before I started writing about them, but since I am trying to be more involved in teaching JavaScript in person at WordCamps via Workshops, I would like to encourage camps to really think through and plan how they can offer the best workshop offerings at their camps.

Some suggestions I have for WordCamp organizers include:

  1. Poll your community on what it wants to learn about in more depth via workshops
  2. Try to provide 2-4hrs for a single workshop
  3. If you are planning a Workshop Track, make sure workshop leaders discuss with each other how to tie their talks together and not have to reteach the same thing
  4. Have multiple TAs in the audience to help attendees and give feedback to workshop leaders on pacing

I’ll just end again with praise and props to WordCamp DC for coming up with an amazing workshop track.  Everyone I talked to learned something and having workshops on non coding topics was really popular.