Skip to content

Instantly share code, notes, and snippets.

@laras126
laras126 / gist:9500f99d9d67b9e67f80c915a267608e
Created September 2, 2020 13:23
module scaffold script
#!/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 );
@laras126
laras126 / block-edit-filter.js
Created January 23, 2020 00:19
Add a panel to block inspector
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 } />
@laras126
laras126 / filter-attrs.js
Created January 22, 2020 22:56
Log attributes for all blocks
function logAttributes( attributes ) {
console.log( attributes );
return attributes;
}
wp.hooks.addFilter(
'blocks.getBlockAttributes',
'storytime/panel',
logAttributes
@laras126
laras126 / block-settings-filter.js
Last active January 22, 2020 22:42
Filtering a block settings
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 );
@laras126
laras126 / a-article-grid.scss
Last active February 17, 2019 20:44
Article Grid Algorithm
// 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
@laras126
laras126 / one-offs.md
Last active February 12, 2019 18:02
Documentation Share: One-offs

One-off Patterns

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.

Writing One-off SCSS

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:

@laras126
laras126 / parse.php
Created December 24, 2018 16:14
Possible Twig to PHP parsing
<?php
function render_component( $component, $data ) {
$twig_file = CHILD_THEME_PATH . '/assets/src/components/c-' . $component . '/c-' . $component . '.twig';
$template_path = CHILD_THEME_PATH . '/template-parts/components/c-' . $component . '.php';
// This file writing / string manipulation should likely be part of a different program, not the render_component function.
if ( file_exists( $twig_file ) && 0 === validate_file( $twig_file ) ) {
$twig_markup = PMC::render_template( $twig_file, [] );
@laras126
laras126 / functions.php
Created December 9, 2018 22:57
Possible way to generate PHP from template syntax
<?php
function render_component( $component, $data ) {
// Should be replaced with node_modules path.
$twig_file = CHILD_THEME_PATH . '/assets/src/modules/' . $component . '/' . $component . '.twig';
$template_path = CHILD_THEME_PATH . '/template-parts/pmc-components/' . $component . '.php';
if ( file_exists( $twig_file ) && 0 === validate_file( $twig_file ) ) {
$twig_markup = PMC::render_template( $twig_file, [] );