Meetup: The big change coming to WordPress in 2018 - Gutenberg
1 like•443 views
The document discusses various aspects of the Gutenberg editor in WordPress, highlighting its modular approach to content creation using blocks rather than traditional templates. It outlines upcoming meetups and tutorials related to WordPress, the paradigm shift brought by Gutenberg, and improvements being made to enhance user experience. Additionally, it provides resources and links for further learning about Gutenberg's features and functionalities.
Meetup: The big change coming to WordPress in 2018 - Gutenberg
- 1. Gutenberg
- 4. The Meetup
- 6. Tutorials
- 7. Catch our weekly Podcast
- 9. Feb 21: North Fulton WordPress Meetup: When Shortcodes Don’t Work (Micah Wood) Feb 1: A Brighter Web: Developers: Customizing the WordPress Admin Feb 13: Marietta WordPress Meetup: Overcoming Your Fear of Sales (April Wier) Feb 15: A Brighter Web: All Users: Fresh ideas to get your SEO improved and rank higher in Google Upcoming Meetups
- 11. Thank You to Our Sponsor
- 12. Gutenberg
- 13. The Gutenberg Whys For block’s sake! Atlanta WordPress Meetup - 25 Jan 2018 Evan Mullins - https://circlecube.com/does-wordpress
- 14. Reasons Gutenberg is coming: ● Better publishing. ● Modern experience. ● Stay Relevant. ● Compete better with other publishing experiences: Wix, squarespace & medium. ● Block level editing. ● Blocks for all the things: first content, then sidebars, widgets & shortcodes, etc. ● It’s modular!
- 16. The Page Mindset
- 17. TEMPLATE BLOAT
- 18. Design Web Pages or Templates Have you ever done an estimate for a site with X unique templates? Been excited about the flexibility of building unique templates as needed? Build 13 different templates, then have to make each of 13 templates responsive? Scope creep? Realize that templates are a bit restrictive and end up with files like template-7b_3.php or template-no-sidebar-secondary-sidebar.php
- 19. TOO HEAVY
- 20. Work Smarter
- 21. The Paradigm
- 25. Andy Clarke, Walls Come Tumbling Down 2009
- 26. Stephen Hay, Responsive Design Workflow (2012)
- 27. Blocks, not pages The traditional way to handle complexity in programming is to break large complex things into smaller well-formed “modules”. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions. This proved to be true working on the Microsoft.com homepage. Dave Rupert, Responsive Deliverables (2013)
- 28. Christopher Butler Newfangled Web The Way You Design Content is About to Change (2014)
- 29. As many of us move away from designing pages toward designing systems, one concept keeps cropping up: modularity. We often hear about the benefits of a modular approach; modules are scalable, replaceable, reusable, easy to test, quick to put together— “They’re just like LEGO!” Alla Kholmatova - The Language of Modular Design (2015)
- 31. Brad Frost - Atomic Design (2013)
- 32. How Block Content Works Rather than one open content area — in which you could put text and images using a WYSIWYG — or a template that has predetermined text and media “buckets,” modular content allows you to add any content — text or media — in blocks. It supports building pages ad-hoc, adding text and media as you need it in a variety of combinations. After you’ve stacked a bunch of these content blocks, you can re-sort them any way you like. It’s basically content Legos. Charlotte Jackson, From Pages to Patterns (2015)
- 34. Going from designs to modules. Journey of a Module
- 35. ● https://wordpress.org/gutenberg/ ● https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/ ● https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/ ● https://wordpress.org/gutenberg/handbook/language/ ● https://github.com/WordPress/gutenberg Gutenberg Resources Modular Resources ● https://www.newfangled.com/web-design-has-changed-have-you/ ● http://web.archive.org/web/20140717024257/http://www.newfangled.com/the_way_you_design_web_content_is_about_to_change ● http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ ● http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/ ● https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone ● https://alistapart.com/article/language-of-modular-design ● http://daverupert.com/2013/04/responsive-deliverables/ ● http://atomicdesign.bradfrost.com/
- 36. The basics of using Gutenberg
- 76. Replace publish dropdown menu with a sidebar panel. Expand latest post blocks with more querying options — order by and category. Allow dragging multiple images to create a gallery. Improve markdown pasting (allows lists to be interpreted). Allow pasting copied images directly. Pasting within lists and headings. Improve handling of inline spans. Allow copying a single block. Make sure inline pasting mechanism does not take place if pasting shortcodes. Preserve alignment classes during raw transformations (like pasting an old WordPress post). Support shortcode synonyms. Allow continued writing when pressing down arrow at the end of a post. Mobile design: move block controls to the bottom of a block. Allow deleting reusable blocks globally. Display description and type on the sidebar. (Also replace BlockDescription component with a property.) New table of contents and document counts design. Add button to copy the full document quickly. Expand inserter to three columns and a wider container. Allow using down-arrow keys directly to navigate when searching a block in the inserter. Deselect images in Gallery block when losing focus. Include post title in document outline feature. Rework display of notices and address various issues with overlaps. Added keyboard shortcut to toggle editor mode. Also displays the relevant keyboard combination next to the menu item. Improve deleting empty paragraphs when backspacing into a block that has no merge function (example, deleting a paragraph after an image). Improve the way scroll-position is updated when moving a block. Show block transformations in ellipsis menu. Add drag and drop support for cover image. Allow transforming operations between Heading and Cover Image blocks. Add focus outline for blocks that don’t have focusable fields. Allow both navigation orientations in NavigableContainer. Improve the behavior of focusing embed blocks. Unify UI of audio and video blocks. Show message on the inserter when no blocks are found. Show message when no saved blocks are available. Do not show the publish panel when updating / scheduling / submitting a post. Update quote style in front-end. Convert text columns to a div using grid layout. Update button block CSS and add class to link. Allow text in Button block to wrap. Prevent useOnce blocks from being inserted using the convenient blocks shortcut menu. Show correct symbol (⌘ or Ctrl) depending on system context. Rename “insert” to “add” in the UI. Clear block selection when opening sibling or bottom inserter. Always show the insertion point when the inserter is opened. Increase padding on “more options” block toggle. Rename “Classic Text” to “Classic”. Improve display of dotted outline around reusable blocks. Updated messages around reusable blocks interactions. Align both the quote and the citation in the visual editor. Exit edit mode when unfocusing a reusable block. Set floated image width (when unresized) in % value. Add withState higher-order component. Initial introduction of wp.data module. Restrict the state access to the module registering the reducer only. Refactor PostSchedule to make Calendar and Clock available as reusable components. Allow overwriting colors (defaults and theme provided) when consuming ColorPalette component. Switch orientation of popover component only if there is more space for the new position. New ImagePlaceholder reusable component that handles upload buttons and draggable areas for the block author. Add speak message when a category is added. Announce notices to assertive technologies with speak. Add aria-labels to Code and HTML blocks. Warn if multiple h1 headings are being used. Add speak message and make “block settings” button label dynamic. Make excerpt functionality more accessible. Add various headings around editor areas for screen-readers. Improve accessibility of menu items in the main ellipsis menu. Add missing tooltips to icon buttons. Render toolbar always by the block on mobile. Improve performance of responsive calculations using matchMedia. Avoid shifts around toolbar and scrolling issues on mobile. Improve how the fixed-to-block toolbar looks on mobile. Change how the fixed position toolbars behave, making them sticky. Prevent Mobile Safari from zooming the entire page when you open the inserter. Initial explorations to migrate to server-registered blocks as part of raising awareness of available blocks. Move supportHTML property into the general “support” object. Replace getLatestPosts usage with withAPIData HOC. Convert all filters for components to behave like HOCs (withFilters). Replace flowRight usage with compose for HOCs. Apply filters without function wrappers. Display a hint that files need to be built. Add WordPress JSDoc ESLint configuration. Update licenses in package.json & composer.json to adhere to SPDX v3.0 specification. Add tests to cover REQUEST_POST_UPDATE_SUCCESS effect. Add tests for color palette component. Add tests for Editable.getSettings and adaptFormatter. Use newly published jest-console package in test setup. Update info about test fixtures generation. Also style footer in quote blocks to ensure backwards compatibility. Add a PHPUnit Docker Container. Fix wrong “return to editor” link when comparing revisions. Fix error when pressing enter from a heading block. Fix error with merging lists into paragraphs. Fix revisions button target area. Remove duplicated styles. Fix z-index rebase issues. Fix tag name warning ordering in validation. Fix text encoding of titles in url-input. Fix endless loop in reusable blocks code. Fix edit button in Audio block using invalid buttonProps attribute. Fix block creation with falsey default attribute. Fix radio control checked property. Fix styling issues of blocks when they are used as part of a reusable block. Fix list wrapping issues. Fix problem when converting shortcodes due to sorting. Fix issue with time-picker not working. Fix hide advanced settings interaction in block menu. Fix issue with url input on images. Fix style regression in textual placeholder on cover image. Fix return type hint in gutenberg_get_rest_link(). Fix bug when changing number of Latests Posts rapidly was leading to some numbers being defunct. Fix isInputField check and add tests. Fix unsetting block alignment flagging block as invalid. Fix CSS bleed from admin-specific gallery styles. Fix image handlers at the top from being unclickable. Fix unexpected keyboard navigations behaviour on some nodes. Fix inserter position for floated blocks. Fix bug on empty cover image placeholder used on a saved block. Fix errors when adding duplicate categories. Fix broken custom color bubble in ColorPalette. Improve Tags/Categories response size by limiting the requested fields. Limit requested fields in category feature of “latest posts”. Request only required post fields in latest posts. Replace getCategories usage with withAPIData component. Don’t show fields that are not used in media modal when adding a featured image. Polish inserter tabs so the focus style isn’t clipped. Make inspector controls available when categories are loading. Improve overlay over meta-boxes during save operations. Hide excerpts panel if not supported by the CPT. Hide Taxonomies panel if no taxonomy is available for the current CPT. Hide several other panels when the CPT doesn’t support them. Use _.includes to find available taxonomies. Mitigates non-schema-conforming taxonomy registrations. Defer applying filters for component until it is about to be mounted. Prevent “Add New” dropdown from overriding other plugin functionality. Improve paragraph block description. Refactor to simplify block toolbar rendering. Add missing aligment classes to cover image. Add parent page dropdown to page attributes panel. Allow pressing ENTER to change Reusable Block name. Disable HTML mode for reusable blocks. Add support for the “advanced” meta-box location. Make sure super admins can publish in any site of the network. Rename theme support for wide images to align-wide. Move selectors and actions files to the store folder. Center arrows of popovers relative to their parent. Use fainter disabled state. Add breakpoint grid to latest posts block and update color of date. Move logic for auto-generating the block class name to BlockEdit. Respect the “enter_title_here” hook. Prevent meta-box hooks from running multiple times. Don’t set font-family on pullquotes. Remove superfluous parentheses from include statements. Remove redundant CSS property updates. Use “columns-x” class only for grid layout in latest posts. Use flatMap for mapping toolbar controls for a small performance gain. Introduce jest matchers for console object. Updated various npm packages; update Jest. Update node-sass. Update WordPress packages. Switch TinyMCE to unpkg. Reorganize handbook docs navigation. Added FAQ section for meta-boxes compatibility. Added initial “templates” document. Add documentation about dynamic blocks. Updated “outreach” docs. Improve block-controls document.
- 77. Theme layouts
- 79. Will it break my site?
- 86. Learning to code for Gutenberg
- 88. Official Gutenberg Block Examples github.com/WordPress/gutenberg-examples Official Gutenberg Block Examples
- 89. Official Gutenberg Block Examples github.com/ahmadawais/gutenberg-boilerplate The Gutenberg Boilerplate
- 90. Official Gutenberg Block Examples wordpress.org/gutenberg/handbook The Gutenberg Handbook
- 91. 4 Block Types
- 92. Official Gutenberg Block ExamplesStatic Content Blocks
- 93. Official Gutenberg Block ExamplesDynamic Content Blocks
- 94. Official Gutenberg Block ExamplesEditable Content Blocks github.com/thatplugincompany/gutenkit-spacer-block
- 95. Official Gutenberg Block ExamplesLayout Blocks github.com/thatplugincompany/gutenkit-spacer-block
- 97. Block Functions Edit Function Save Function The structure of your block in the context of the Gutenberg editor. The structure of the saved block that appears on the front-end. Block Functions
- 98. Block Attributes 1. Provide structured data for blocks 2. Similar to shortcode attributes Block Attributes
- 100. Gutenberg.courses
- 102. Looking ahead
- 103. How will Gutenberg affect my business? staffing • selling • pricing
- 104. How will Gutenberg affect my current sites and clients? updates • training
- 105. Q & A Questions about what we just covered, or other problems?