Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Preparing for Gutenberg

498 views

Published on

WordPress Philly Meetup, April 19, 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Preparing for Gutenberg

  1. 1. PREPARING FOR GUTENBERG A SEMI-METHODICAL APPROACH
  2. 2. BEFORE YOU START READ THESE THREE TIPS 7PREPARING FOR GUTENBERG
  3. 3. BEFORE YOU START Understand what Gutenberg does. 8PREPARING FOR GUTENBERG Watch State of the Word 2017 https://wordpress.tv/2017/12/04/matt- mullenweg-state-of-the-word-2017/ Gutenberg demo starts around 35:00.
  4. 4. BEFORE YOU START Know who is hosting your website. 9PREPARING FOR GUTENBERG If your host manages the code and performs plugin and theme updates for you (e.g., WordPress.com), they should already be preparing for Gutenberg.
  5. 5. BEFORE YOU START Update all the things! 10PREPARING FOR GUTENBERG Gutenberg itself, and plugin and theme preparedness for it, are changing so rapidly that you can’t make an accurate assessment of readiness if your site is out of date.
  6. 6. GETTING STARTED SET UP FOR TESTING 11PREPARING FOR GUTENBERG
  7. 7. GETTING STARTED Create a spreadsheet and list your plugins. 12PREPARING FOR GUTENBERG Does your theme have plugin features such as custom post types? Put them on the list. If you have plugins in the mu-plugins directory, include those, too.
  8. 8. PREPARING FOR GUTENBERG 13
  9. 9. GETTING STARTED Begin filling in the spreadsheet. 14PREPARING FOR GUTENBERG Start with plugins you can eliminate. Items under Tools, Settings and Users probably won’t interact with Gutenberg. Neither do multisite administration tools.
  10. 10. PREPARING FOR GUTENBERG 15
  11. 11. GETTING STARTED Fill in which plugins create custom post types. 16PREPARING FOR GUTENBERG Events, FAQs, directory entries, portfolios and testimonials are examples of custom post types. Forms, sliders and image galleries and albums may also be custom types (but not always).
  12. 12. GETTING STARTED Shortcut: query the database for post types. 17PREPARING FOR GUTENBERG SELECT post_type FROM wp_posts GROUP BY post_type
  13. 13. GETTING STARTED A more thorough approach: check the code. 18PREPARING FOR GUTENBERG Do a search of your WP installation for register_post_type.
  14. 14. GETTING STARTED Next, note the plugins that add meta boxes. 19PREPARING FOR GUTENBERG Some add meta boxes only for their custom post type. Others add them to only certain types — and still others to all standard types.
  15. 15. GETTING STARTED You can search the code for them. 20PREPARING FOR GUTENBERG Do a search of your WP installation for add_meta_box.
  16. 16. GETTING STARTED Post meta keys may also be found by query. 21PREPARING FOR GUTENBERG SELECT meta_key FROM wp_postmeta GROUP BY meta_key
  17. 17. GETTING STARTED Now, note down the TinyMCE customizations. 22PREPARING FOR GUTENBERG Some plugins add icons to TinyMCE. Others add buttons above the editor.
  18. 18. GETTING STARTED The Shortcake plugin is one example. 23PREPARING FOR GUTENBERG
  19. 19. GETTING STARTED Shortcake provides a shortcode interface. 24PREPARING FOR GUTENBERG
  20. 20. GETTING STARTED It may be helpful to track shortcodes, too. 25PREPARING FOR GUTENBERG Do a search of your WordPress code for register_shortcode.
  21. 21. PREPARING FOR GUTENBERG 26
  22. 22. TEST GUTENBERG RECORD THE FINDINGS 27PREPARING FOR GUTENBERG
  23. 23. TEST GUTENBERG Install and activate the Gutenberg plugin. 28PREPARING FOR GUTENBERG While Gutenberg shouldn’t do anything catastrophic to your website, it would be better not to test on your production site if you have an alternative.
  24. 24. TEST GUTENBERG Check the front end of your site. 29PREPARING FOR GUTENBERG Is anything displaying differently? The more complicated the layout, the more likely it is that it needs to be reviewed.
  25. 25. TEST GUTENBERG On the back end, check custom post types. 30PREPARING FOR GUTENBERG When you click the Edit link or add a new entry, does it open by default to Gutenberg or the classic editor? (Should it open to Gutenberg or a custom UI?)
  26. 26. TEST GUTENBERG Then check the meta boxes. 31PREPARING FOR GUTENBERG Can you find all of the meta boxes? Are they displaying correctly? Do they work properly?
  27. 27. TEST GUTENBERG Look for the TinyMCE buttons and icons. 32PREPARING FOR GUTENBERG Any custom buttons and icons will almost certainly be missing, as will any other TinyMCE customization.
  28. 28. TEST GUTENBERG Finally, check any other dependencies. 33PREPARING FOR GUTENBERG Does everything still work in classic editor? Were there any other customizations that may be impacted?
  29. 29. PREPARING FOR GUTENBERG 34
  30. 30. CONVERT PAGES NOTE WHAT HAPPENS 35PREPARING FOR GUTENBERG
  31. 31. CONVERT PAGES Convert some of your content to Gutenberg. 36PREPARING FOR GUTENBERG Make a copy of the page or post (or other content type) and convert the duplicate to Gutenberg blocks. You may delete the page once you see what happens.
  32. 32. TROUBLESHOOT WEIGH YOUR OPTIONS 37PREPARING FOR GUTENBERG
  33. 33. TROUBLESHOOT Did you find a lot of issues to resolve? 38PREPARING FOR GUTENBERG One immediate but partial solution is to download and install the Classic Editor plugin, which will restore the editor you’re familiar with.
  34. 34. TROUBLESHOOT This will not hide Gutenberg in the back end. 39PREPARING FOR GUTENBERG Instead, you will have both Edit and Edit (Classic) links. There will be an Add New and Add New (Classic). You’ll probably need some custom CSS and code to keep users out of Gutenberg.
  35. 35. TROUBLESHOOT Research the plugins (or theme) with issues. 40PREPARING FOR GUTENBERG Check their support forums for other threads about Gutenberg compatibility. See if there’s a solution available, a timeline for resolution or other useful information.
  36. 36. TROUBLESHOOT If it’s a content conversion problem: 41PREPARING FOR GUTENBERG If no plugin-driven content, such as shortcodes, is involved, then it’s something you should report to the Gutenberg developers.
  37. 37. TROUBLESHOOT If you can’t edit a custom type in Gutenberg: 42PREPARING FOR GUTENBERG For Gutenberg to “find” custom post types, the function that registers them must add them to REST. The code is: ‘show_in_rest’ => true
  38. 38. TROUBLESHOOT If a meta box has gone missing: 43PREPARING FOR GUTENBERG The function that adds the meta box may be checking the value of a variable $context that doesn’t work the same way in Gutenberg. Example: if ( 'advanced' === $context ) {
  39. 39. TROUBLESHOOT If a meta box is displaying incorrectly: 44PREPARING FOR GUTENBERG This most likely indicates something in the meta box output is miscoded. It may be a JavaScript issue. Change around the order of the meta boxes to be sure which is the problem.
  40. 40. TROUBLESHOOT If you need Shortcake back: 45PREPARING FOR GUTENBERG Google “Shortcake shim” and you’ll find a plugin on Github for rendering any shortcodes registered with the Shortcake API as Gutenberg blocks.
  41. 41. TROUBLESHOOT If you need TinyMCE icons or buttons back: 46PREPARING FOR GUTENBERG There is no easy answer. You will need to refer to support forums or contact the developers.
  42. 42. TROUBLESHOOT If finding a solution fails: 47PREPARING FOR GUTENBERG You may be left in a situation where you need to remove or replace a plugin on short notice. Start checking now for potential pitfalls to avoid a crisis.
  43. 43. TROUBLESHOOT Hacking a plugin or theme is not a good idea. 48PREPARING FOR GUTENBERG Unfortunately, with Gutenberg itself still developing and many plugins not fully compatible, you may be faced with decisions about putting in temporary fixes so your site remains functional.
  44. 44. TROUBLESHOOT This might be good time to cull old content. 49PREPARING FOR GUTENBERG The conversion to Gutenberg will be speedier and less stressful if you’re not spending time on content you no longer need. This is a good time to retire it.
  45. 45. PREPARING FOR GUTENBERG 50 THANK YOU! AND GUTEN LUCK Susan Walker @SusanWroteThis susanwrotethis@gmail.com

×