1. Gutenberg

3. ABrighterWeb.com

4. The Meetup

5. The Facebook Group

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

10. 2018.atlanta.wordcamp.org

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!

15. A standard
WordPress Post
template

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

22. The Paradigm Shift

23. Current
WordPress
Editor

24. Project Gutenberg

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

75. It’s changing quickly

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?

80. Plugin Compatibility

81. https://github.com/danielbachhuber/gutenberg-plugin-compatibility

82. Learn more about
Gutenberg

86. Learning to code for
Gutenberg

87. Gutenberg Development
Resources

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

96. Basic Block Architecture

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

99. @richard_tabor
@GutenKit
richtabor.com
gutenkit.com

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?