Meetup: The big change coming to WordPress in 2018 - Gutenberg
0 likes176 views
The document outlines several upcoming WordPress meetups and discusses the benefits of the Gutenberg project, emphasizing its modular, block-based approach to content creation. It asserts that this shift will improve the publishing experience by allowing more flexible and responsive designs. Additionally, it provides detailed insights into the functionalities and accessibility features of the Gutenberg editor, alongside various resources for further learning.
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?