@WordCampLanc @erikteichmann Slides are available at eriktdesign.com/styling-blocks/

#WCLANC

@WordCampLanc @erikteichmann mutationObersvers in JavaScript == when something changes, do something.

@erikteichmann

#WCLANC

@WordCampLanc @erikteichmann By giving context in the editor it will become more apparent to person editing the page that a white image behind white text isn’t going to work and they shouldn’t publish the page like that.

#WCLANC

@WordCampLanc @erikteichmann Some advanced styling you can do: When you add a featured image, update the header of the editor using that featured image as a background image.

#WCLANC

@WordCampLanc @erikteichmann “When I’m looking for best practices, I look to default themes like twentynineteen to see how things are done” – @erikteichmann

#WCLANC

@WordCampLanc @erikteichmann Now with Gutenberg adding a stylesheet allows for conflicting styles between blocks. We need some more specific targeting.

#WCLANC

@WordCampLanc @erikteichmann What we used to do with the classic editor: Use add_editor_style() and boom we’re done.

developer.wordpress.org/referenc…

#WCLANC

@WordCampLanc @erikteichmann “Clients hate surprises. They want to know what they’re going to get before they hit publish” @erikteichmann

#WCLANC

@WordCampLanc @erikteichmann Gutenberg is beginning to address trusting that your editor looks like your website.

#WCLANC

@WordCampLanc @erikteichmann Does your editor look just like the frontend of your website?

(No one raises their hand)

#WCLANC

@WordCampLanc @erikteichmann WYSIWYG (what you see if what you get)? More like WYS is? WYG (what you see, is it, what you get?)

#WCLANC

@WordCampLanc @erikteichmann A lot of developers use a default WordPress theme to go along with the “cobbler’s children have no shoes” expression.

#WCLANC

@WordCampLanc @erikteichmann We’re building things that are getting more and more complicated and we’re not providing enough feedback in the backend to show what the frontend is going to look like!

#WCLANC

@WordCampLanc @erikteichmann Why put work into styling the backend?

Because every client asks “What is it [the content] actually going to look like?”

#WCLANC

@WordCampLanc @erikteichmann Poll:
Who here would call themselves a theme editor? (about half of the room)

Who here has used the Gutenberg editor? (a lot less)

Who has developed a block? (not much)

#WCLANC

@WordCampLanc @erikteichmann As themes have changed are styles have gotten more complex. The first default theme had ~ 600 lines of CSS. The default twentynineteen theme has over 6,000 lines of CSS.

#WCLANC

Enjoying @WordCampLanc #wclanc ? Come join us in Bethlehem Aug. 17 for @WCLVPA! Call for speakers and sponsors is open now! 2019.lehighvalley.wordcamp.org/

@WordCampLanc @paulbarthmaier In my own view I think block filters are important because they enable flexibility for developers to customize blocks to meet their needs without having to redo the whole block. Actions and filters are key to making WordPress more flexible.

#WCLANC

@WordCampLanc @paulbarthmaier “Why are block filters important for the user editor interface?”

“I dunno, I’m a developer” – @_pbrocks

#WCLANC

@WordCampLanc @paulbarthmaier PHP Block example from @GaryPendergast gist.github.com/pento/cf38fd73ce…

#WCLANC