Skip to content

Instantly share code, notes, and snippets.

Avatar

Joni Halabi thatdevgirl

View GitHub Profile
View gutenberg-versions.md

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
thatdevgirl / javascript-standards.md
Last active Jun 29, 2020
Javascript code standards for GU
View javascript-standards.md

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.

Variables

  • 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
thatdevgirl / word-count.html
Created Dec 19, 2019
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>
<html>
<head>
<title>Word Counter</title>
<link rel="stylesheet" type="text/css" href="word-count.css">
</head>
<body>
<h1>Word Counter</h1>
@thatdevgirl
thatdevgirl / csv-to-json.js
Last active Dec 19, 2019
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.
$.ajax({
type: "GET",
@thatdevgirl
thatdevgirl / css-only-menu.css
Created Dec 19, 2019
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
thatdevgirl / css-mega-menu-example.html
Created Dec 19, 2019
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>
<html>
<head>
<title>CSS Mega-Menu</title>
<link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
</head>
<body>
<nav>
@thatdevgirl
thatdevgirl / character-counter.html
Last active Dec 19, 2019
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">
<head>
<title>Character Count using jQuery</title>
</head>
<body>
<header>
<h1>Character Count using jQuery</h1>
@thatdevgirl
thatdevgirl / handle-tab-focus.js
Created Jun 20, 2019
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,
newFocus;
$(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
thatdevgirl / simple-autocomplete.js
Created Nov 29, 2018
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: https://github.com/WordPress/gutenberg/issues/10542
*
* Note: The options array should be an array of objects containing labels and values; i.e.:
* [