@taupecat @erikteichmann @getpantheon To stick to the theme of your Twitter handle, it’s the cat’s pajamas

@taupecat @erikteichmann @getpantheon This localwp.com/

@WordCampLanc @erikteichmann Another core difference is instead of actually pulling in a stylesheet you’re bringing in inline styles when that block is loaded.

#WCLANC

@WordCampLanc @erikteichmann What is the core difference between doing editor styles in classic editor versus Gutenberg editor?

tinyMCE was a walled garden. You could put any styles within that iframe and do whatever you want. Gutenberg is more open. It takes more care and forethought.

#WCLANC

@WordCampLanc @erikteichmann “What about Google fonts or any custom fonts?”

“You can enqueue them just like any other CSS file. Gutenberg will wrap the styles in an editor-styles wrapper and then you can use it.”

#WCLANC

@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