46
Building Better WordPress Interfaces with the REST API K. Adam White | @kadamwhite | bocoup.com

Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Building Better WordPress Interfaces with the REST APIK. Adam White | @kadamwhite | bocoup.com

Page 2: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Building Better WordPress Interfaces with the REST APIK. Adam White | @kadamwhite | bocoup.com

Page 3: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

?

Page 4: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Choice

Page 5: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

– wordpress.org/about

WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes, WordPress is limited only by your imagination. (And tech chops.)

What You Can Use WordPress For

Page 6: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

– wordpress.org/about/philosophy

When making decisions [the non-technical majority] are the users we consider first… Every time you give a user an option, you are asking them to make a decision. When a user doesn’t care or understand the option this ultimately leads to frustration… It’s our duty as developers to make smart design decisions and avoid putting the weight of technical choices on our end users.

Decisions, not Options

Page 7: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 8: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

• Application Programming Interface

• User Interface

• API Client Library Interface

Three Levels of Interface

Page 9: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 10: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 12: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

“A Node CMS, with best-in-class editorial workflow”

Page 13: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 14: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Aside: “GhostPress” github.com/kadamwhite/ghostpress

Page 15: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 16: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Authoring Interface

Page 17: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 18: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

http://www.lexichrome.com

Page 19: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Allison Parrish, Entropic Text Editor, 2008 http://www.decontextualize.com/projects/nite/

Page 20: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

https://github.com/jcjohnson/torch-rnn

Page 21: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Bo

nu

s H

ea

dli

ne

s Facebook Camera Tech: Use to Bring Watch

Clean Apple Cars Vaunting Bees

This Giant Surfic Battery Could Steal War, Break Instagram

How the Web?

Star Wars Already Has Every Sand

Turning Great Will Drive Action Video

The Aircar of Netflix May Americanner With $19K

The Play of Thrones: Army Hackers

Check out “Machine Learning for Artists”: http://ml4a.github.io

Page 22: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 23: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 24: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Icons from the Noun Project: Satellite by misirlou; Sputnik by Mourad Mokrane; Satellite by Dan Hetteix

I recommend Exploring (Semantic) Space with (Literal) Robots,, Allison Parrish, Eyeo 2015

Page 25: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Learn JS Deeply(but pick your battles)

Page 26: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

npm install wordpress-rest-api

var WP = require( ‘wordpress-rest-api’ );

Page 27: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Code Interface

Page 28: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

From:

/wp-json/wp/v2/posts?filter[author_name]=kadam &filter[tag]=art &filter[year]=2014 &search=Chelsea

to:

var query = site.posts() .author( 'kadam' ) .tags( ‘art' ) .year( 2014 ) .search( 'Chelsea' );

Page 29: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

site.posts() .get() .then( posts => posts.forEach( post => { console.log( post.title.rendered ); }) );

site.posts() .create({ title: 'Your Post Title', content: 'Your post content', status: 'publish' }) // "response" will hold the `id` of the new post .then( response => console.log( response.id ) )

Page 30: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

site.posts() site.pages() site.media() site.types() site.statuses()

site.taxonomies() site.categories() site.tags() site.users() site.comments()

var site = new WP({ endpoint: ‘http://yoursite.com/wp-json' });

Page 31: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

/wp/v2/posts /wp/v2/posts/(?P<id>[\\d]+) /wp/v2/posts/(?P<parent>[\\d]+)/revisions /wp/v2/posts/(?P<parent>[\\d]+)/revisions/(?P<id>[\\d]+) /wp/v2/posts/(?P<parent_id>[\\d]+)/meta /wp/v2/posts/(?P<parent_id>[\\d]+)/meta/(?P<id>[\\d]+)

Page 32: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Route List => Tree Structure• posts

• (?P<id>[\\d]+) • revisions

• (?P<id>[\\d]+) • meta

• (?P<id>[\\d]+)

Page 33: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Tree Structure => Setter Methods

• posts() • id( id )

• revisions( rId ) • meta( rId )

Page 34: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

site.posts() site.pages() site.media() site.types() site.statuses()

site.taxonomies() site.categories() site.tags() site.users() site.comments()

var site = new WP({ endpoint: ‘http://yoursite.com/wp-json' });

Page 35: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

// Custom Route handling var site = WP.site( ‘my-url.com/wp-json' );

site.myCustomResource = site.registerRoute( ‘myplugin/v1’, ‘/author/(?P<id>\\d+)’ );

site.myCustomResource().id( 7 ); // => myplugin/v1/author/7

Page 36: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

// Autodiscovery var apiPromise = WP.discover( urlStr );

apiPromise.then(function( client ) { client.posts().then( worksAsNormal ); client.namespace( ‘myplugin/v1’ ) .mycustomresource().id( 7 ) .then( nowAlsoSupported );

Page 37: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

// Bootstrapping var client = WP.site( urlStr, routesObj );

client.posts().then( worksAsNormal ); client.namespace( ‘myplugin/v1’ ) .mycustomresource().id( 7 ) .then( nowAlsoSupported );

Page 38: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

[email protected] today & dedicated to WCEU

Page 39: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

▶C o - m a i n t a i n e r w a n t e d f o r JavaScript client for an up-and-coming REST API. Hazardous merge strategy, no wages, bitter cold, long months of complete darkness. Honor and recognition in case of success. (maybe.)

HELP WANTED

Page 40: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

…WordPress is limited only by your imagination.

(And tech chops.)

– wordpress.org/about

Page 41: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 42: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 43: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 44: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 45: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting
Page 46: Building Better WordPress Interfaces with the REST …kadamwhite.github.io/talks/2016/wceu-interfaces/KAW-WCEU...adlines Facebook Camera Tech: Use to Bring Watch Clean Apple Cars Vaunting

Thank Younpmjs.org/package/wordpress-rest-api

K. Adam White: @kadamwhite

Slides: http://talks.kadamwhite.com/wceu (pdf)

Bocoup: http://bocoup.com, @bocoup