field_guide_2023.pdf

Transcript

1. FIELD GUIDE to modern WordPress The independent theme developer’s
2. @marktimemedia I Design & Build DIGITAL INTERFACES HI, I’M MICHELLE. Rockstar at saying stuff. Adorable badass. Carefully curated spontaneity. Meticulously organized chaos. The Anxious Alicorn.
3. @marktimemedia THE HERO’S JOURNEY In which our hero embraces a disruption, faces challenges, and comes out changed
4. @marktimemedia 12 STAGES OF TRANSFORMATION IN 3 ACTS 1 2 3 4 5 6 7 8 9 10 11 12 The Ordinary World Call of Adventure Refusal of the Call Tests, Allies, Enemies Crossing the First Threshold Meeting the Mentor Approach the Innermost Cave The Ordeal The Reward The Long Road Back Resurrection (Final Battle) Return with the Elixir DEPARTURE RETURN INITIATION Departure: Leaving the Ordinary World Initiation: The trials & tribulations of the Special World Return: Journey back to the Ordinary World
5. THE ORDINARY WORLD The life of the independent theme developer
6. @marktimemedia The independent theme developer ROLES Client Service Creation & Building Support & Consulting HR, Finance, Sales, Marketing, Janitorial… ROLES Design Consulting Development Support Marketing Finance Family Hobbies
7. @marktimemedia The independent theme developer Fine-tuned workflows Custom suite of tools Knows what to do Able to get help SKILLS Plugins Custom Fields HTML CSS PHP Page Builders Dev Tools JS
8. CALL TO ADVENTURE The release of a new suite of tools BLOCK EDITOR WP 5.0 (DEC 2018) FULL SITE EDITING WP 5.8 (JULY 2021)
9. @marktimemedia The lure of adventure WYSIWYG interface Powerful content layout tools More options Faster page builds Easily register global styles More unified theming framework AS A SERVICE PROVIDER: AS A DEVELOPER
10. @marktimemedia Do you want to begin? YES NO
11. REFUSAL OF THE CALL Resistance to adopting new tooling and workflows
12. @marktimemedia The resistance to adventure Glitchy interactions Missing features More support requests Too many options Inconsistent documentation New development tools & language Missing or obscured functionality Constant changes AS A SERVICE PROVIDER: AS A DEVELOPER
13. @marktimemedia The impossible journey No one is supporting/paying us to …learn an entire new programming language …learn and debug all of these new build tools …keep up with all of the changes
14. MEETING THE MENTOR Finding the help you need to move forward
15. @marktimemedia Find support social & slack communities tutorials & talks developer.wordpress.org learn.wordpress.org/ fullsiteediting.com wordpress.tv RESOURCES Manage expectations changes, support, & updates learn new skills during paid projects take the journey at your own pace
16. @marktimemedia Do you want to begin? YES NO
17. CROSSING THE THRESHOLD Get your bearings in the new editor interface
18. @marktimemedia Setting Up Camp Use preferred local development tool or developer.wordpress.org /playground/
19. @marktimemedia Navigate The Post Editor Block & Pattern Inserter Tools Document Overview View & Preview Settings Screen Options
20. @marktimemedia Navigate The Post Editor Block Settings Block Toolbar
21. @marktimemedia Navigate The Post Editor Block, Pattern, & Media Inserter
22. @marktimemedia Navigate The Post Editor List & Outline Views
23. @marktimemedia Create & Copy Blocks Within The Editor Visual Editor vs Code Editor
24. @marktimemedia Create & Copy Blocks Within The Editor Block locking
25. @marktimemedia Navigate the FSE Editor View, Edit & Create Templates View & Edit Styles View, Edit & Create Patterns (6.3+) Navigation & Pages (6.3+)
26. @marktimemedia Navigate The FSE Editor Create, edit, and manage templates
27. @marktimemedia Navigate The FSE Editor Synced & Unsynced Patterns (Template Parts)
28. @marktimemedia Navigate The FSE Editor Styles & Variations
29. @marktimemedia Understand the new interface from a client perspective Understand the options available to us as a developer Time to set up a test environment and use the editor Time Level BENEFITS Change Level OBSTACLES
30. TESTS, ALLIES, ENEMIES Adapting your PHP/Classic Theme
31. @marktimemedia add_theme_support Block Tools Core Block Patterns Editor Color/Gradient Palettes Editor Text Size Palettes Alignment Custom Color/Gradients Spacing Responsive Embeds Editor Styles Custom Units Line Height developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/
32. @marktimemedia Theme.json In Traditional Themes Settings Styles Templates – only used in FSE Template Parts – only used in FSE developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
33. @marktimemedia Theme.json Settings enable/disable of features theme presets (color/spacing/fonts/sizing/etc) block-level controls preset & custom variables fullsiteediting.com/lessons/remove-settings- in-theme-json/
34. @marktimemedia Theme.json + CSS theme.json generated variable format • --wp--preset--{category}--{slug} • --wp--custom--{nested}--{object-keys} variables/settings automatically loaded in both editor and frontend enqueue_block_assets adds custom scripts and stylesheets to the editor and frontend
35. @marktimemedia theme.json variables appearance of elements, blocks, and variations fullsiteediting.com/lessons/global-styles/ JSON GENERATED CSS
36. @marktimemedia theme.json variables any custom variables you need JSON GENERATED CSS
37. @marktimemedia theme.json styles default global styles & block styles can be a value or reference other styles
38. @marktimemedia More info: converting classic to block developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/ fullsiteediting.com/lessons/adding-full-site-editing-features-to-classic-themes/
39. @marktimemedia Opens up the block editor to client & developer use Provide branding control via theme styles and default controls (limiting options) Setting up theme.json Reworking CSS to use variables Time Level BENEFITS Change Level OBSTACLES
40. APPROACH THE INNERMOST CAVE Block Editor development (without Javascript)
41. @marktimemedia Block Patterns PHP PHP (BLOCK MARKUP)
42. @marktimemedia Block Styles PHP CSS
43. @marktimemedia Block Templates & Block Locking developer.wordpress.org/block-editor/ reference-guides/block-api/block-templates/
44. @marktimemedia PHP Custom Block Tools
45. @marktimemedia Additional customization options (bespoke needs) Additional controls and guided brand options (locking it down) Time to set up Learning new functions Block template PHP syntax Time Level BENEFITS Change Level OBSTACLES
46. THE ORDEAL Building a Full Site Editing (FSE) theme
47. @marktimemedia Block Grammar fullsiteediting.com/lessons/block-grammar-basics/ wordpress.org/plugins/create-block-theme/
48. @marktimemedia Block Themes https://fullsiteediting.com/lessons/creating-block-based-themes/
49. @marktimemedia Templates & Template Parts developer.wordpress.org/news/2023/06/upgrading-the-site- editing-experience-with-custom-template-part-areas/ fullsiteediting.com/how-to-lock-blocks-and-templates/ fullsiteediting.com/lessons/templates-and-template-parts
50. @marktimemedia PHP Templates In FSE fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/
51. @marktimemedia Fully take advantage of Full Site Editing Full rebuild or replacement Learning new and uncommon syntax Lack of error reporting (WSOD) Time Level BENEFITS Change Level OBSTACLES
52. THE REWARD Becoming a FSE developer
53. THE (LONG) ROAD BACK Block Editor development (with Javascript)
54. @marktimemedia Block styles developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/ JS PHP
55. @marktimemedia Block variations JS
56. @marktimemedia Transpiled Javascript ES5 vs ES6/ESNext & JSX WP Scripts developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/ / boldermail.com/reactjs-and-gutenberg-concepts-and- tools-to-getting-started-with-the-new-block-editor
57. @marktimemedia Custom UI developer.wordpress.org/news/2023/07/beyond-block-styles-part-1- using-the-wordpress-scripts-package-with-themes/
58. @marktimemedia Custom controls and options more seamlessly integrated with UI Familiarity with CLI Setting up build tools Package and dependency management JS syntax Time Level BENEFITS Change Level OBSTACLES
59. RESURRECTION (FINAL BATTLE) Building Custom Blocks
60. @marktimemedia Custom Blocks developer.wordpress.org/news/2023/02/static- vs-dynamic-blocks-whats-the-difference/ When variations, patterns, and styles aren’t enough New functionality or more intuitive client UI
61. @marktimemedia Static Blocks Content and markup are created and saved to the post in the editor developer.wordpress.org/block-editor/how-to-guides/block-tutorial/ writing-your-first-block-type/
62. @marktimemedia Dynamic Blocks Content and markup are rendered on the server May be dependent on changes or updates in other parts of the site Can still have styles/options developer.wordpress.org/block-editor/how-to-guides/block-tutorial/ creating-dynamic-blocks/
63. @marktimemedia Fully custom functionality Fully custom UI Lack of documentation (“wild west”) Setting up build tools Package and dependency management React syntax Time Level BENEFITS Change Level OBSTACLES
64. RETURN WITH THE ELIXIR A larger suite of tools
65. THE HERO You are a hero every step of the way 1 2 3 4 5 6 7 8 9 10 11 12 The Ordinary World Call of Adventure Refusal of the Call Tests, Allies, Enemies Crossing the First Threshold Meeting the Mentor Approach the Innermost Cave The Ordeal The Reward The Long Road Back Resurrection (Final Battle) Return with the Elixir
66. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp Hunt michelle@marktimemedia.com @marktimemedia mynameismichelle.com bit.ly/2023-wp-themes 𝕏