Lara Schenck laras126

A Gentle Introduction to Gutenberg Development

I'm Lara, not Laura.

Disclaimer: I am just learning this myself...and it's hard, very hard.

Main links:

Blocks ≠ Fields Everything is in post_content and structured with HTML comments

	<?php

	function enqueue_theme_assets() {

	// Get the current template and remove the file extension.
	global $template;
	$template_file = basename( $template );
	$bundle_name = str_replace( '.php', '', $template_file );
	$template_dir = get_template_directory_uri();

	/**
	* BLOCK: sponge-block
	*
	* Registering a basic block with Gutenberg.
	* Simple block, renders and saves the same content without any interactivity.
	*/

	// Import CSS.
	import './style.scss';
	import './editor.scss';


	const findDifference = (a, b) => {
	let diff = a - b;
	return diff;
	}

	const findMaxDifference = (arr) => {
	let diff = 0,
	max_diff = 0,
	min = array[0],

	// Task at hand:
	// Write a function that determines if two strings are anagrams.

	// Yikes!

	// Note: Another way to solve this would be to sort each string alphabetically
	// and then see if they are the same...but that's too easy!

	const checkIfContains = (char, array) => {
	let count = 0;

	// You can run this code by downloading it and typing in your console: node linked-list.js

	// See the accompanying blog post here:
	// And all of this is an ES6 adaptation of this excellent tutorial bu Cho S. Kim on CodeTuts: https://code.tutsplus.com/articles/data-structures-with-javascript-singly-linked-list-and-doubly-linked-list--cms-23392


	// Create the object prototype for a "Node", that is, a list item (note that there is no technical relation to node.js or a "Node" in terms of the DOM)
	class Node {
	constructor(data) {
	this.data = data;



	$(document).ready( function() {

	// Only run this code on the Pays d'Oc page template
	if( $('body').hasClass('page-template-template-paysdoc') ) {

	// Get the exisitng DOM items
	var $ITEMS = $('.pd-item'),
	$CARDS = $('.pd-card'),