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
• 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?
content - goodbye post meta! (with exceptions) • Gutenberg uses attributes as settings on each block Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg Basics
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)
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)
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
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)
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)
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
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)
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)
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
susumutomita
mu_zaru
kuro_kurorrr
yuukis
fast_doctor
takathemax
gob
suneo3476
medley
kateinoigakukun
hanon52_
ike002jp
trallard
chrisshort
denniskardys
akosma
pedronauck
holman
reverentgeek
deanohume
bkeepers
3n
aleyda
ammeep
