5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY

5 年後還是新手
WordPress Plugin 開發大冒險

The Levels - Agenda
- 故事背景
Background
- 新手村
Why, and how to start your own plugin?
- 打怪
Here comes the users
- 打大佬
Gutenberg, Modern Admin UI, Security

Background - About me
Fullstack developer; Game Developer
Tech lead, Liker Land
Be open source!

Background - Our plugin and products
LikeCoin:
blockchain for content creators and
publishing
LikerLand:
Writing NFTs and bookstore
Web3Press:
Web3 plugin for WordPress users

Introduction - Why make a plugin?
Site owners:
- Enable and disable plugin easily
- Track the actual changes all in one place
- WordPress upgrade doesn’t break your change
Developer:
- Share your code and functionalities
Business:
- Sell your product!

Overview - How to make a plugin?
Plugin Handbook - 新手指南
https://developer.wordpress.org/plugins/
- Hooks
- Change the post content on publish “content”
- Add a Google Analyics in your site header “hook_header”
- APIs
- Post your post to https://matters.town as a draft
- Send your url to Internet Archive for snapshot

Overview - Code Setup
WordPress runs on:
Basic (oldschool) setup
- PHP - Pages, Logic, where hook happen
- Javascript - Browser interactions, update UI and calls
API
- CSS - Style your UI
Protip: Start with a boiler plate
- wp scaffold plugin
- https://github.com/devinvinson/WordPress-Plugin-Boil
erplate

Overview - Code best pratices
https://developer.wordpress.org/plugins/plugin-basics/best-practices/
e.g. WordPress PHP codes are all in one global namespace
If you function has a 公廁名 then it will either overwrite someone else’s stuff,
or get overwritten.
Prefix your functions (likecoin_foo) vs Objects (still has to be unique in class
name)

Overview - License
- WordPress is GPLv2
- Infective open source license
- Pick anything GPLv2 compatible, say
GPLv2
- Remember to add file headers!
- https://developer.wordpress.org/plugin
s/plugin-basics/including-a-software-lic
ense/

Overview - Done? Ship it!
- GPLv2 compatible
- Code must be human
readable, or come with
source map/source code
- Plugin slug approved by
wordpress.org
- Push version to SVN
- Profit!
You can always view code of
any plugin on wordpress.org
SVN

Hey I use PHP 5.2 and your
site breaks
https://github.com/likecoin/likecoin-wordpress/pull/28

Hey I use PHP (insert legacy version here)
- WordPress can run on PHP 5.2 - 8.0
- https://make.wordpress.org/core/handboo
k/references/php-compatibility-and-wordp
ress-versions/
- Newer syntax won’t work on sites with
newer PHP
- Dev: Always prefer older syntax
- Define minimum support PHP version in
your plugin
- Site owner: Try to upgrade PHP!

Hey can it also be in
Spanish
This one is from discord

Hey can it also has a (insert language here) version?
Internationalization problem - i18n
Meet translate.wordpress.org

Meet translate.wordpress.org
Keys are the original string
Anyone can propose translation for any string and locale

How do I make sure my strings show up?
PHP:
__( 'Hello, dear user!', 'plugin-slug’ );
Javascript:
Legacy: wp_localize_script() and pass string from PHP
Modern: @wordpress/i18n
https://codex.wordpress.org/I18n_for_WordPress_Developers

Polyglot team, i.e. You don’t own your i18n!
- Making the plugin does not automatically makes you a approved translator
- Try get approved as PTE for your plugin, per locale basis
https://make.wordpress.org/polyglots/handbook/plugin-theme-authors-guide/pte-re
quest/

How You can help
- Help translate WordPress Core
- Help translate any plugin you use/like

Q: Hey I use AMP, your
iframe broken

Hey I use AMP, …
- Many sites enable AMP for SEO
- AMP plugin https://wordpress.org/plugins/amp/
- When AMP is active, not only style get simplified, e.g.
iframe get sandboxed
- In our case, add attribute we need from
https://developer.mozilla.org/en-US/docs/Web/HTML/
Element/iframe#sandbox
- In PHP, test for AMP mode using
is_amp_endpoint() / amp_is_request()
- Always test the AMP version!

Hey I want to use
shortcode!

Hey I want to use shortcode!
What is shortcode?
[likecoin]
In fact easy to support parameter too
[likecoin liker-id=ckxpress]
Turns out it is simple to implement in “content” filter with
add_shortcode()
Hard to document though!

Hey your plugin throw JS
error after upgrade!

Hey your plugin upgrade does not upgrade
- Generally a hard to debug issue
- In this particular case, Javascript was cached
- Most sites has some kind of CDN cache for all js, css files
- Oldschool way
$ver = plugin version in wp_enqueue_script() and wp_enqueue_style()
- Modern way:
@wordpress/script build and index.asset.php
Here are only two hard things in Computer Science: cache invalidation and
naming things

Hey your stuff doesn’t show
properly in my theme

Hey your stuff doesn’t show properly in my theme
- Normally this one is very hard
- All the themes with different DOM and
CSS => can’t fit all
- Turns out just wrapping our iframe in
<figure> does wonder
- This is due to blocks are mostly
wrapped with <p> or <figure>, modern
themes are designed to handle them
properly

Gutenberg
- Block based editor
- Full site editing
- Released as default in WordPress 5.0
- Now the old editor is a plugin called
“Classic Editor”
What does that mean for plugin?
- Editor sidebar support
- Block support

Editor Sidebar - metabox is now outdated

Editor Sidebar - metabox is now outdated
Metabox in its simplest form, is just extra fields in HTML <form>
- Submit post => Submit fields in metabox => Updates data with post
Sidebar is a complex web app
- On publish, Gutenberg does a XHR instead of refresh
- Your sidebar is expected to listen to events and does XHR too
- Maybe also multitab JavaScript based navigation, like a full blown SPA
- In fact it is a React SPA!

Blocks - shortcode is now outdated
Remember shortcode [likecoin liker-id=ckxpress]?
How about a UI to list all shortcodes, configure their parameters, and maybe also
a preview?

Blocks - shortcode is now outdated
- Add your own blocks for site
- block.json defines all the metadata
- edit.js and save.js defines different behaviour, in
editor vs in actual post view
- Make variants for blocks that has common attributes
https://developer.wordpress.org/block-editor/

@wordpress/data
Modern admin UI and its data

- PHP renders HTML
- PHP GET => Fill data with HTML
- What about JavaScript? Write another AJAX API in PHP
- Write AJAX API => Need to check admin yourself
- So two set of codes for same thing
PHP: data are written directly into HTML (We call that SSR nowadays)
Javascript + AJAX API: data are fetched with XHR and updated by
JavaScript (Hydration!)
- This sound suspiciously like “reinventing my own next.js/nuxt.js for every form
input”...
Before @wordpress/data

After @wordpress/data
Redux-like syntax abstract all the API calls and authentication behind a selector
const isCurrentPostPublished = select('core/editor').isCurrentPostPublished()
const postDate = select('core/editor').getEditedPostAttribute('modified_gmt')
Cool!
But… in no where are the available data fields clearly documented!

Security!
How many CVE are from plugin instead of core?

Why a plugin breach affect the whole site?
- WordPress code runs in a global space
- No effective isolation between plugins, or actually, everything
- Horrible in security sense
i.e.
You can write a plugin to change any user/admin data
You can write a plugin to change data used by other plugin
- Actually thats how plugin for plugins work
e.g. woocommence, woocommence plugins, woocommence plugins pro
version, which is a paid plugin for woocommence plugin

How can plugin developer prevent this?
- Sanitize all input and output
Why both? Don’t trust any data to be safe
sanitize_*, esacpe_*
洗手洗手洗手
- Use WordPress provided function instead of PHP or writing
your own
wp_remote_get()
- Wordpress coding standard linter warns all unsantized output
https://developer.wordpress.org/plugins/security/

How can site owner prevent this?
Disable unneeded plugin
- Disabling plugin disable many of its hook and API, reducing attack surfaces
Uninstall unneeded plugin
- Plugin can hook on install, uninstall and upgrade
Try to understand what data and option are created by your plugin, and does it
clean them up after uninstall?
- WordPress does not record these on install, devs can be lazy or don’t even
know they should clean up data

There’s more…
Like 200 more things about
- Really silly APIs
- Subtle non-documented functions
- Stupid mistakes we made (mostly this)
… that I can talk about, but let’s not dig too
deep into this here.

Hey it’s Q&A
Now it’s your chance to contribute content to this slide!

5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY

More Related Content

Similar to 5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY (20)

More from William Chong (15)

Recently uploaded (20)

5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY