Skip to content

Instantly share code, notes, and snippets.


Joni Halabi thatdevgirl

View GitHub Profile
thatdevgirl /
Last active January 13, 2022 20:43
What the Gutenberg?

What the Gutenberg?

Gutenberg is the code name for the new WordPress post editor. It was included in version 5.0 of core, but is still its own project that gets periodically merged into major and minor (but not patch) updates. However, there is no correlation between Gutenberg and WordPress core versioning, nor is there any indication in core's code about which Gutenberg version has been included. This makes it very difficult to figure out what version of Gutenberg is in which version of core.

The obfuscation is likely purposeful, but sometimes it is useful to have this information. Well, I find it helpful. If you do too, here you go. This is a manually curated list of Gutenberg versions to Core versions, starting from 5.3 because I do not really care to go backwards from there.

Version mapping

WP Core Gutenberg Exceptions Source
thatdevgirl /
Last active June 29, 2020 17:33
Javascript code standards for GU

Javascript code standards for GU

This document outlines best practices and standards for Javascript code written for GU projects. They are largely taken from the W3 Schools JavaScript Style Guide and the Wordpress Javascript Coding Standards.


  • Variable names should begin with a letter and be written in camelCase.
  • Variable names should be descriptive of the information they contain, even if it makes the variable a little long (but don't go overboard).
  • Use const for all variables that will definitely not change.
  • Use let for local variables inside a function or callback.
thatdevgirl / word-count.html
Created December 19, 2019 20:26
This component provides a simple word counter using jQuery. It counts the number of characters, words, and paragraphs in a given textarea input field.
View word-count.html
<!DOCTYPE html>
<title>Word Counter</title>
<link rel="stylesheet" type="text/css" href="word-count.css">
<h1>Word Counter</h1>
thatdevgirl / csv-to-json.js
Last active December 19, 2019 20:19
This script will convert a CSV file to JSON. That's it! Usage: csvToJson.go( 'PATH_TO_CSV' );
View csv-to-json.js
var csvToJson = {
json: [],
headers: [],
go: function(url) {
var _this = this;
// AJAX call to get CSV data.
type: "GET",
thatdevgirl / css-only-menu.css
Created December 19, 2019 20:15
This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.
View css-only-menu.css
* CSS-only Menu
/* Link set up */
nav a,
nav a:visited {
text-decoration: none;
thatdevgirl / css-mega-menu-example.html
Created December 19, 2019 20:10
This simple mega navigation menu is inspired by the many mega menus on retail and other websites.
View css-mega-menu-example.html
<!DOCTYPE html>
<title>CSS Mega-Menu</title>
<link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
thatdevgirl / character-counter.html
Last active December 19, 2019 20:08
This component is a simple jQuery function that adds a character counter to a form field. The function takes a single parameter - the character limit of the specified form element.
View character-counter.html
<!DOCTYPE html>
<html lang="en">
<title>Character Count using jQuery</title>
<h1>Character Count using jQuery</h1>
thatdevgirl / handle-tab-focus.js
Created June 20, 2019 19:30
Function that handles focus when user navigates through a site using their keyboard. Prevents the focus from getting stuck, which can sometimes happen with carousels.
View handle-tab-focus.js
function handleTabFocus(e) {
let focus = document.activeElement,
$(document).keyup(function(e) {
const code = e.keyCode || e.which;
// If the tab key is pressed:
if (code === 9) {
// Determine which element has focus now.
thatdevgirl / simple-autocomplete.js
Created November 29, 2018 15:29
Simple Autocomplete component for WP Gutenberg
View simple-autocomplete.js
* A very simple autocomplete component
* This is to replace the OOTB Gutenberg Autocomplete component because it is
* currently broken as of v4.5.1.
* See Github issue:
* Note: The options array should be an array of objects containing labels and values; i.e.:
* [