NC State's "Shortcake"-Powered Design Strategy
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Brian DeConinck
OIT Design
Slides: go.ncsu.edu/shortcake-wcraleigh
·
·
Slides: go.ncsu.edu/shortcake-wcraleigh
Brian DeConinck
OIT Design
·
·
A major university looks like this...
+
A major university actually operates like this...
Map of the Holy Roman Empire in 1618, Wikimedia
Work in higher ed? Have a lot of higher ed clients?
Check out wpcampus.org!
WordPress is Perfect for Higher Ed
Centrally-Managed Multisites
College- or Unit-Level
Multisites
Ad hoc collection of
Single-Site Installs + Small Multisites
Student, Faculty & Staff Blogs
Departments, Research Groups, etc.
OIT
ORIED
DASA
OFA
HR
Engr.
Ed.
Sci.
Some of these sites...
Dedicated IT or communications staff
Local staff can handle most needs
OIT
ORIED
DASA
OFA
HR
Engr.
Ed.
Sci.
Most of these sites...
Admin assistants, grad students
"Run the website" added to long list of other job responsibilities
Student, Faculty & Staff Blogs
Departments, Research Groups, etc.
The central IT office supports all of these sites directly or indirectly with...
But it's okay!
This system mostly works!
On a daily basis, most of our users...
How do you make one of these in the Visual Editor?
Our users expect a flexible and robust page-building experience.
The Visual Editor on its own doesn't give them that.
There are three main focuses this year: the REST API, the editor, and the customizer...
The editor will endeavour to create a new page and post building experience...
So a user says,
"I need a page that
looks like this!"
What are our answers?
... but we can do better than that, right?
I stole these visuals from Jen Simmons.
Go watch her talk about this stuff!
The Only Two Types of Websites That Exist
Page-building plugins require:
Most of these sites...
Admin assistants, grad students
"Run the website" added to long list of other job responsibilities
Student, Faculty & Staff Blogs
Departments, Research Groups, etc.
Content from
Visual Editor
Set this in the Theme Options
Grid of "sidebar" widgets
And then they ask you to add another template to the theme!
THIS IS NOT SUSTAINABLE!
ACF
ACF
ACF
... or, if you use
Advanced Custom Fields
Advanced Custom Fields is great, but...
I mean, sure, it's fine. But let's be more ambitious!
What if I told you we could have...
If you don't know what I'm talking about:
Shortcodes + Shortcake
Shortcodes
Part of WordPress
since version 2.5
WP sees your shortcode and replaces it with a pre-defined block of HTML
function major_link_shortcode($atts, $content = null) {
extract(shortcode_atts(array(
'url' => null,
), $atts));
return sprintf(
'<a href="%s" class="major-link">%s <img
src="arrow.svg" aria-hidden="true" />',
esc_url( $attrs['url'] ),
$content
);
}
function register_shortcode(){
add_shortcode('major-link', 'major_link_shortcode');
}
add_action('init', 'register_shortcode');[major-link url="https://www.ncsu.edu/"]Visit the NC State Homepage[/major-link]Example:
Shortcake
"Feature Plugin"
= candidate for WP core
Now you can register a simple user interface for inserting shortcodes!
Shortcake
"Feature Plugin"
= candidate for WP core
Now you can register a simple user interface for inserting shortcodes!
shortcode_ui_register_for_shortcode(
'major-link',
array(
'label' => 'Major Link',
'listItemImage' => 'dashicons-arrow-right-alt',
'inner_content' => array(
'label' => 'Link Text',
'description' => 'Enter the text that will
be clicked on.',
),
'attrs' => array(
array(
'label' => 'URL',
'attr' => 'url',
'type' => 'url',
'description' => 'Enter your destination
URL.',
)
)
)
);But you don't have to take my word for it!
1. Install and activate
Shortcake: wordpress.org/plugins/shortcode-ui
2. Install and activate the
Major Link plugin:
go.ncsu.edu/major-link
3. Click "Insert Post Element"
and add a Major Link
4. Transparent Aluminum
Not "Just Another Plugin"
If Shortcake stopped working tomorrow...
A theme is a collection of templates.
canvas for building posts and pages!
Hillsborough
OIT Design's main WordPress theme
Generic NC State-branded theme
Our theme provides...
NC State Shortcodes
Shortcake-powered shortcode toolbox
Pattern library of NC State-branded page elements
Modeled after the
Shortcake Bakery plugin
Our plugin provides...
Theme Agnostic
Works on any* campus theme!
Things You Should Try!
They're still just shortcodes.
It's still just the Visual Editor.
There are three main focuses this year: the REST API, the editor, and the customizer...
The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
A lot more activity!!!
A lot less activity...
:)
:(
But what happens to shortcodes?
What happens to Shortcake?
editor.blocks.register('my-fancy-block', {
type: 'simple',
title: 'My fancy block',
icon: 'my-fancy-icon',
toolbar: [
{
icon: 'align-left',
tooltip: 'Align left',
action: function (api) {
api.dom().className = 'align-left';
}
},
{
icon: 'align-right',
tooltip: 'Align right',
action: function (api) {
api.dom().className = 'align-right';
}
}
],
insert: function (api, callback) {
var element = document.createElement('div');
element.innerHTML = 'My fancy block';
callback(element);
},
remove: function (api) {
// Unregister custom events etc
},
load: function (api) {
return api.dom();
},
save: function (api) {
return api.dom();
}
});
But Shortcake is still really exciting!
Big changes to WordPress take time.
(See: REST API)
Shortcake-powered shortcodes
will teach you how to think about
content in a block-based editor.
You can do some really cool stuff with Shortcake!
Jen Simmons wants us to try things like this:
Recap
