Block Templates and Block Styles

Written by

I regularly build custom blocks for clients. They very often contain a set of InnerBlocks called a template. The syntax for this is not well documented.

$template = array(

        array( 'core/buttons', array(), array(

            array( 'core/button', array(

                'text'  => 'Button Text',

                'className' => 'is-style-transparent-arrow'

            ) ),

        ) ),

        array( 'core/paragraph', array(

            'placeholder' => 'Add a description of your button here...',

        ) )

    );

The template is an array of blocks.

Each block is an object with the block name as a string, an array of that block’s properties, and, optionally, an array of nested blocks. In the example above, the ‘core/buttons’ block could have some properties set on it to make the nested button blocks stack vertically.

The other detail to pay attention to is that the button in the example has its className property defined. This is class that would be applied if the user had selected the “Transparent with Arrow” block style that is defined elsewhere in the theme.

FoundationPress Generator

Written by

I’ve been using Foundation for a long time as my go-to front-end framework. I’ve been very grateful for the Foundation Press starter theme. While some starter themes are stripped too bare and others come loaded with too much, Ole Fredrik’s theme strikes the Goldilocks zone. I’m also a big fan of how quickly the folks over at Zurb keep pushing Foundation. Bootstrap is great but moves a lot more slowly because of its immense popularity.

But when I build a custom theme for a client I want every detail to be just right. That includes the names of functions, the textdomain, and lots of other little details. Unfortunately, it’s a little tricky to replace all the references to “foundationpress” with the new theme name. However, the fine folks over a Automattic solved this problem for their Underscores theme and were kind enough to open source the plugin they wrote.

So I’ve adapted that plugin here so you can make your own customized FoundationPress theme. Just head over to the Generator page and fill out the form and you’ll get the latest version of FoundationPress custom-named to start your next project.

SVN in a Git world

Written by

I mostly use the Git version control system in my workflow. The one exception is for WordPress.org plugin repos that still use SVN. Since I rarely use it I just spent a ton of time re-learning how to deal with it to update my Featured Authors Widget plugin. Here are my notes. This is mostly to jog my own memory later but maybe someone will find this helpful.

  1. Spin up a local development environment.
  2. Navigate to the plugins directory in terminal
  3. Check out trunk into an appropriately named directory with

    svn co http://plugins.svn.wordpress.org/example-plugin/trunk example-plugin

    (that URL comes from the plugin repo on wordpress.org)

  4. Update the plugin as necessary
  5. Commit your changes back to the repo with

    svn ci -m ‘updated readme after testing on WP 4.0.1’

  6. Go enjoy another cup of coffee.

New WordPress plugin: Featured Authors Widget

Written by

I’ve posted up a plugin to the WordPress.org repository, Featured Authors Widget. I built it for Article-3.com but it’s a useful plugin for anyone with a multi-author WordPress site that wants to showcase particular authors.

You can read the full details here or just head over to WordPress.org to download it.

Big fun with preg_replace_callback

Written by

I had a job that required creating a custom input filter for Drupal. It turns out to be pretty easy but I had a heck of a time finding documentation on it that made much sense to me so here’s my explanation of how to do it. The magic is all done by the PHP function preg_replace_callback() which takes as its arguments a regular expression (pattern) to search for, a callback function to take the stuff the expression finds and return you altered text to put in its place, and the big honking block of text to search through. So let’s start simple:

$text = <a href="http://www.php.net/preg_replace_callback">preg_replace_callback</a>('/hello/', '_smallWorld', $text);
function _smallWorld($match){
$world = 'world'; return $world;
}

All this will do is scan through $text and for each instance of hello with world. You can just use preg_replace for that. But it gets a lot more interesting when you start adding options to your regex like the very useful collapsible text module for Drupal:

function collapse_text_process($text) {
$text = <a href="http://www.php.net/preg_replace_callback">preg_replace_callback</a>('/
\[                     # look for an opening bracket collapse # followed by the word `collapse`
(\ collapsed)?         # followed by (optionally) a space and the word `collapsed` (captured)
(?:\ style=([^\] ]*))? # followed by (optionally) a space and a style, consisting of any # characters except a close bracket (captured)
(?:\ title=([^\]]*))?  # followed by (optionally) a space and a title, consisting of any # characters except a close bracket (captured)
\]                     # followed by a closing bracket (.+?)
# then capture as few characters as possible until \[\/collapse\]
# a closing "tag", which is a slash followed by `collapse` in brackets
#and then after the regex delimiter, we'll turn on 3 regex options
#s so dot matches all characters, m to match embedded newlines
#x so we can do free spacing and add these wonderful comments
/smx', "_collapse_text_replace_callback", $text);
return $text;
}

We’ll pause a second to review that regex. What this means is that editors can do all sorts of things from the simple

[collapse] hello world [/collapse]

to the complete

[collapse collapsed style=yellow title=big news]
Hello World [/collapse]

The result is passed to your callback function, _collapse_text_replace_callback as an array. Element 0 is the full match. So

function _collapse_text_replace_callback($matches) {
global $base_url; $collapsed = ($matches[1] == ' collapsed');
$style = <a href="http://www.php.net/trim">trim</a>($matches[2]); $title = <a href="http://www.php.net/trim">trim</a>($matches[3]);
$interior = $matches[4];
//the authors of this module do lots of cool stuff in here, check it out.
return drupal_render($form);
}

So in the simple use case, the first element doesn’t contain collapsed so that’s false so do x. In the more complicated use, it does so do y. Likewise, the more complex use strings for $style, and $title.

Galleria 1.2 Module

Written by

I just posted a first pass at updating the Galleria module http://drupal.org/node/802206 for Drupal to use the new Galleria 1.2 code. If you’re a Galleria user, have a look. I’m not sure that it makes any sense to continue it as a module since it’s so easy to implement it in your Drupal Theme and all the magic happens in your Galleria Theme now.