@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • I’m a Senior Developer/co-founder at 11 online • Started Block Party (https://wpblock.party) this year • I first tried WordPress in 2004, started using it more in 2006, started really developing for WordPress in 2013 • These days I work mostly in React.js on the front end and either python (Flask) or PHP (Lumen) on the backend. I also do some Android dev and, of course, WordPress. I started using React.js over 2 years ago. About me - Eric Debelak
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • New WordPress editor as of...? • A What You See Is What You Get (WYSIWYG) Experience • Content paradigm is BLOCKS! • Comes with simple blocks, but you can build custom blocks • Written in React.js - https://reactjs.org/ What is Gutenberg?
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • When you register a block, you have an editor method and a save method • The save method takes the block attributes and saves as html in the post/ page content area Basics (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • The attributes are saved as JSON in html comments unless they are attached to an html element Basics (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • On the editor side, Gutenberg reads the attributes for each block, and then sets the editor method with those attributes • The editor method then allows users to interact with the block and change the attributes • The front end of the site just shows the html saved in the content Basics (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Gutenberg allows for templating as well - https://wordpress.org/ gutenberg/handbook/templates/ • Add in attributes and defaults • And you can lock the templates Templates
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • setAttributes - function to change a blocks attributes • isSelected - see if the user has selected your block • Editor components: • Plain Text, Rich Text, Media Upload, Color Palette, Dropdown, Inner Blocks, Select Control, Toggle Control, and more. • Complete list - https://github.com/WordPress/gutenberg/tree/master/ components and https://github.com/WordPress/gutenberg/tree/master/ blocks What’s built in
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Need some help with your edit methods? • Node Package Manager - npm - https://www.npmjs.com/ • npm has 650,000 packages. • Very useful for extending default functionality. Adding More
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • Goals: • Allow users to input as many statistics as they wish • Have a simple count up animation Simple Statistics
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies: • Use an array of statistics to allow flexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Goals: • Allow users to input as many statistics as they wish • Have a simple count up animation • Strategies: • Use an array of statistics to allow flexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-weather-block • Goals • Allow the users to globally save the Open Weather api key • Allow users to set their temperature units per weather block • Allow users to set the city per weather block Simple Weather Block
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies • Use server side rendering so we don’t expose our api key • Save the api key on the wp_options table so all blocks have access to it • Use the inspector controls for the temperature unit • Use a React Component for the edit method so we have access to local state and the React Component lifecycle Simple Weather Block (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Goals • Allow the users to globally save the Open Weather api key • Allow users to set their temperature units per weather block • Allow users to set the city per weather block • Strategies • Use server side rendering so we don’t expose our api key • Save the api key on the wp_options table so all blocks have access to it • Use the inspector controls for the temperature unit • Use a React Component for the edit method so we have access to local state and the React Component lifecycle Simple Weather Block (continued)
@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Validation - Gutenberg revalidates both the html and the attributes, so you need default attributes for everything • Arrays don’t allow for declaration of sub attributes • setAttributes has no callback! • Using out of the box components do not always look like the front end of the site will (PlainText, RichText) • Inner Blocks are really useful, but you can only use one per block Gotchas
ericdebelak
ffjlabo
khmer495
akatsuki174
utgwkk
konokenj
pocke
kdubois
ivargrimstad
munetoshi
treastrain
maimux2x
ryu_hu03
panda_program
scottboms
kneath
bluesmoon
jakevdp
deanohume
lynnandtonic
edds
hatefulcrawdad
marktimemedia
malarkey
morganepeng