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
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
// 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; |
#!/usr/bin/env node | |
'use strict'; | |
const fs = require( 'fs' ); | |
const chalk = require( 'chalk' ); | |
const path = require( 'path' ); | |
const getConfig = require( '@penskemediacorp/larva' ).getConfig; | |
const args = process.argv.slice( 2 ); |
import{ createHigherOrderComponent } from '@wordpress/compose'; | |
import { Fragment } from '@wordpress/element'; | |
import { InspectorControls } from '@wordpress/editor'; | |
import { PanelBody } from '@wordpress/components'; | |
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => { | |
return ( props ) => { | |
return ( | |
<Fragment> | |
<BlockEdit { ...props } /> |
function logAttributes( attributes ) { | |
console.log( attributes ); | |
return attributes; | |
} | |
wp.hooks.addFilter( | |
'blocks.getBlockAttributes', | |
'storytime/panel', | |
logAttributes |
function changeListBlockClassName( settings, name ) { | |
if ( name !== 'core/list' ) { | |
return settings; | |
} | |
return lodash.assign( {}, settings, { | |
title: 'Default List' // Changing the title of the block - this lodash helper merges the objects or w/e | |
} ); | |
} | |
<!DOCTYPE html> | |
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> | |
<head> | |
<meta charset="utf-8"> <!-- utf-8 works for most cases --> | |
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary --> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine --> | |
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely --> | |
<title>Announcement - [Plain HTML]</title> <!-- The title tag shows in email notifications, like Android 4.4. --> | |
<!-- Web Font / @font-face : BEGIN --> |
<?php | |
// See: https://timber.github.io/docs/guides/cheatsheet/ | |
$context = Timber::context(); | |
$context['post'] = new Timber\Post(); | |
Timber::render( 'single.twig', $context ); |
// Article Grid | |
// | |
// The Article Grid is a CSS Grid algorithm specifically created for the single article layout. | |
// It supports a side area called `social` that snaps to the second row on the left at desktop-xl | |
// in response to `author` becoming a full row. On small screens it is single column. | |
// | |
// The Article Grid algorithm is only responsible for position the _outer most_ elements of | |
// the single article contents. | |
// | |
// Markup: a-article-grid.html |
One-offs patterns are modules that are not parsed into directly into PHP. Their implementation in the pattern library and the production theme are separate. The one-offs here are artifacts of the development process, and are not necessarily up to date with the production version. Their markup files should have a .html
extension so that they are not parsed into PHP.
When writing styles for a one-off, get as far as you can with utility and algorithm classes, then add additional styles that do not fit into utilities/algorithms in the One-off pattern's SCSS file.
Class names for One-off patterns should have no namespace to indicate they are outside of the design system. For example, a one-off pattern for an author
, might have the following styles in 09-one-offs/author/author.scss
: