 Hi guys My name is my name is David Newn I'm a full-time developer to you, but by night I play MacGyver you can see you can see me at the karaoke bar in in Torrance at Max karaoke belching out 80 songs and today I'm gonna tell you about a journey some of the journeys I've taken and some of the things I've made with Gutenberg, you know Gutenberg is a powerful tool and I'm gonna tell you how to play with it. This is MacGyver plays with blocks All right, all right, so MacGyver plays with blocks. So who here is familiar with the Gutenberg blocks? cool Who here likes using Gutenberg blocks? That's more than I expected. So we're in a good place All right, so, you know This guy's great. This guy's my hero. I can I can tell You know, this is who I'm chong chong today, you know MacGyver MacGyver embodies, you know, it's a little bit about me a little bit of bios MacGyver really really That's what I look up to because oftentimes you know, you know, I've been Defective CTO of a few a few companies and like, you know having to lead a bunch of crazy projects and I think if you have us in the room have been there before where you're just like You're given this project and you need to combine this thing with that thing and with this thing So you only have like, you know by violence a PHP and like a Sunday to do it and you're thinking Hmm. How do I do this? Well? You know, I was a I was a Laps where I press developer myself and then until I found my way with Gutenberg Gutenberg and Gutenberg has a lot of has many excellent features That love and it's really great. It really lends itself to making a lot of new tools There's me with different with like worse hair back then Talking about talking in the work at Riverside about, you know, I'm rendering Gutenberg content native experiences I don't know who the other guy is So over there me and then we talked about, you know, hooking up Gutenberg to VR and fax machines I have a little video for we'll play. Yeah spoilers. All right So videos and slideshow is always a perilous journey I'm not sure if it'll work. All right You so we don't get sued. All right. So we have Gutenberg Before you saw the CTI now we have Gutenberg and a fax machine Now now we're faxing to Gutenberg and Gutenberg texting And here's a wapoo and Then here's some of some more people. All right But anyways, I'm greenberg. So there I'm demonstrating is a greenberg and power a lot of different things besides just like, you know WordPress web web posts Ah, it's perilous Thank you. Well, I escaped to I escaped too hard All right, good boys great. Okay, we can all agree there So we can't be mad new editor Gutenberg the new editor. Okay. Hey Gutenberg you have blocks which are discrete units of content you can go and rearrange around and the best part about that is in the classic editor the only real mode you can think about a post as this is a big blob of HTML but I can think of your posts as as a series of blocks of stock of blocks that you can move together really easily instead of, you know, just having Just having one big blob of text. So Harrison Jenga blocks Jenga blocks. There's a rumor that someone made Jenga blocks flavor Gutenberg block somewhere Yeah, I don't know where to buy them, but if someone knows, please tell the audience later All right But today we're gonna talk about, you know, making some crazy blocks So here we're gonna talk about using blocks to power Native mobile content, you know, it's typically what you would see a typically use case and then we're gonna use Gutenberg blocks to authorize interactive content like quizzes which is quizzes is a legitimate form of of news now and Also a little extra using Gutenberg into a Vita production pipeline, which you know, it's it's if you've ever been on social media You see those, you know square videos that says business insider. You won't believe how this world has changed It's like a flying like plane or whatever and they're all awful except when they're about food and they're great And you know when they're about food, they're great I love them and then I was wondering and it's something I wondered myself as like How can you automate this because you know, it's very cookie cutter, right? And apparently a lot of people have spent a lot of thought into this. So, you know, I thought this would be very apropos all right, so Later on today, you can go to snackable app and it's it's it's a great site It's mainly about junk food and a diver. So, you know, a browser at your leisure after this talk and Also coming soon Coming soon, there will be a snackable app Android app in the play store. So please click it. I'll look forward to that Anyways, let's talk about that app MacGyver means a junk food scrape So When I was building the site like about that app, I did have some guiding principles first First one of the things was I did not want, you know You know, I've mentioned already like the classic editor classic editor had all all your posts as like one big HTML blob and You know who here in the room is a developer? Okay, so You know and we've all been before you know You scrape up a bunch of HTML soup and then you think it's gonna be a straightforward, you know I'd select there to grab like this part of the elements in this big list and turns out Like 15 edge cases you didn't account for and parsing that data is very difficult, right? Well when when I first saw Gutenberg out one of the things I thought was like wait I don't have to define my posts in terms of like, you know, big text blobs, right? I can just use these blogs and then interpret those blocks as The structured hierarchical content where I can where I can then in turn, you know, interpret that later on So, you know, I made a little diagram for this I'm going to break blocks. It's like this. It's like thing on the left and then this is how, you know I I feel about the classic editor, you know, because this is the kind of output you get And you know, you know when you're building an application and using like, you know WordPress is like fundamental to your to your content strategy it's like Which would you rather work with, you know a bunch of a bunch of blocks or just crumbled up receipts, you know You are correct All right, so Exactly, so that that is That is you have one data source came in on the left and then you can project it in many ways in different forms All right Another thing is in second law app all the data in the posts is Strictly just content meaning that I'm not using any of the column layouts I'm not using any of the any of like the presentation layouts because because in that scheme is like all of that should be done on The theme side on the theme side on the theme side on the client side What would be your native client a game client or all whatever is ingesting it? So that way that if you need to make changes to how things are laid out or You need to make big changes to multiple big sweeping changes to your data like your content They're not mixed together and it'll be a lot easier to reason about And I'm sure we've all been there before where you have a bunch of like Presentational divs you go in the code editor in the class editor and you put in a bunch of you know cheeky divs everywhere And it works great. It works great for like, you know a year ago And then when you go back and because your clients or whoever, you know watch you look at it You're like What did I do again? You know we've all been there before so Having a discipline where you think of your content strictly as data We really you know remove that burden from you. It's a little bit more work upfront, but you know, it's a lot easier down the road so I think about as you know, the difference is if you were disciplined and you think of your There's content spread for your presentation layer Think of it as a Swiss Army knife. Whereas, you know, if you Bundled all in at once, you know, you get this guy this guy works great You know for a first few months and then it breaks all right, and then one thing one thing I love is and I always type on is a content authoring user experiences paramount Who here you has ever used short codes before? And who has ever used short codes to embed rich widgets or like no data or whatever inside your post, right? and whoever and and like, you know, I'm gonna show you something that We've all we've already all poly experience before you know eventually when you when you work with a post, right when we're supposed and you want to do something I want to do something a little more complicated when they have like rich because everyone wants that rich nice media experience The pierce solution like you know, what's the good post your cards together, right? But you know, we actually look at it and I'll put you end up with something like this and then this is a little scared look at right and and I don't care if if you know if you're someone who you prefer if someone who prefers like to edit the code themselves and I like for this kind of things because I See, you know 15 places right here where I can make mistakes We can make mistakes and you know short codes can be very fundamental based on how they're implemented and you know you put like a wrong wrong Bar somewhere and all of a sudden your post is broken. You know, you have phone calls before in the morning, right? so Now this is not optimal Content-edited experience, right? It's it's too many too many places to make mistakes and you know, it's hard to reason about when you're Going through an editing content, which you which is not good because especially with like, you know Very creative demanding job like entering often content. You want as little cognitive wall as possible So then What we're going to show a look at later is this so this is a little plug-and-die route for authoring quizzes You have a sidebar right here where you define your topics and you can use blocks on the left to Off your questions and Other nice things for example It the plug-in right now Requires you that you make all options equally possible and That's great because this because that's a rule that's enforced inside the editor So you don't have a situation where it was like, okay the intern the intern You know food bar to question and the whole thing breaks because you know the mac doesn't work out And also like when you look at it you see where it really clearly That okay here's question block. Here's a question block. Here's a question block now the thing about this is is that instead of having Having just a custom plug-in or custom UI interface for editing just quiz content, right? Because it's a good block Gutenberg blocks. You can also do things like Embed and insert other block other good books by blocks installed in your site So you can do things like, you know, it's no reason why you can put an image at the top Put some copy paragraph box blow each question Or like, you know, what we're gonna do later is put a big five picture of a diver at the bottom But you know, I think you know, I Think and don't add me and this is a bet a much better editing experience than just editing shortcuts all right content types so in Snackable there are Three content types the content types the article normal posts One thing I found about Gutenberg recently is which is a really cool feature is you can restrict what kind of blocks The Gutenberg editor is allowed to use which is great because sometimes, you know when you When your client wants to give you the tools asked for the tools to work in the site which is which you know sounds great in theory because This that's ideally less work for you But then you realize you left some less indoors unlocked and you know, they do something bad It's all broken But you know typical repress post and the outputs the Gutenberg block output is Is a pretty partial pretty easy reason about which means They can be interpreted really easily by the main devices There we go. Let's wait The extra for the quizzes so in this game we have quizzes as a separate post type because really When you think about the kind of are because you know when you're going to consume a quiz There's something interact it's an interactive content where you have your Reader or consumer actually participating in the content and like interacting with it But as opposed to more passive right and it makes sense to have that separation But for all intents and purposes is a normal post you can use post blocks like your typical Post creation blocks like paragraph and mention all that with it as mentioned earlier You have Controls in the plug-in and check them plugins to make sure the quiz is still valid Which you know, we all make mistakes and we want to make sure that You know, we were we have our bags looked after and also their generation so Taking that quiz to get a we can Spit it out to WordPress and spread it out to your native client and then trip out data as a quiz But you know why not go a step further and make those fun videos for the asking questions and bunch of drunken statements, you know But the ones that ask what time do I come in the morning? so In a bit I'm gonna ask some for some audience participation. We're gonna make a quiz and then we're gonna turn into a video All right, and the one thing I want to cap us off with is is using thinking of WordPress this way. It's not just strictly for presentation, but as a way to just, you know manage your content, right and I said something to manage your content is and You know having this point to make sure all the content is separated from all the little presentation logic It allows your data to be consumed by you know a bunch of other devices and experiences that you might you might have earlier I talked about how Me and my friend up there Leo we used Greenberg to power text messages fax machines VR VR and I think There's a TTY in there, but we also Can you can use it for other things like you know video generation and I'm sure if if one when present individual want to you know bring up to a toast Into a toaster, but the reason why this is possible is because the data is very is clean Structured and and easy to interpret in a format. That's I can be consumed by and understood by many many different devices so You know There's no reason why you can't have your WordPress Content I have an endpoint in the rest API go and have it be consumed by service function or a service function that runs a job to generate PDFs or no books or pamphlets or whatever or You know like any games like if you're a game developer you want to have You want to have all your content in a separate place because games are really complex so you want to be able to You know have the authoring team offer all the content And that means like characters lore images and all that right while all the game engineers Worry about work on the client and then you know if we have a clean contract into clean API between the two You know, that's what makes you know big games possible I think it's possible because otherwise, you know if you have sufficient where Very yes someone. Hey, so I tried parsing the HTML again. It broke You know those are conversations no less want to have All right, that's what we got so The source code will be available here, but I'm not sure if I made it public yet, so I'll just do that really quick check All right So while I so while I check this does anyone have any questions for the demo? Well, let's see This is this is embarrassing Hey, so we have all the WordPress code here settings Danger zone Thank you. We're on the same page friend All right cool do do do do this is called Thank you. Okay Right We call it the danger zone for a reason dude, dude dude, dude, dude All right, all right double check cool, all the card will be available at GitHub comm slash mackable apps All right, so let's go to the let's go to some demos All right, so let's show the quiz All right Sergio Pop quiz You know what pocket is? Yes. All right, cool So he's been since me a bit bad time. So I have a question. What time do you wake up in the morning? That's a good answer What kind of burger do you like your choices are in and out five guys MVP in islands What is your favorite Gutenberg block paragraph image column or quiz? Good answer, I can't find my crissie here we go. What kind of pierrot do you like? Yeah So so so Leo could you explain what a pierrot is? So imagine Yes, imagine a dank yosa Beef you are a vanilla hockey All right So let's go let's go in the back end and see see how this works. I'm not logged in Damn it. All right, dude. Do you do you do it? Hmm Right, oh There's more. Hmm. What is my password? I Think this is it Exactly, all right All right, so let's go in here Let's read it again. Make sure All right, cool at the post All right, so here's a big picture of pocky What time do I come in the morning? So each of the questions are blocks, right? Each of the questions are blocks and You know Instead of just doing what I did before why I showed before with the short codes We're in the classic editor and you're doing a bunch of like weird brackets everywhere and doing choice one for attributes and all that and you know having to do a bunch of fiddly bits in order to Compose your contents All that's done for you in the Goodberg editor in these nice blocks blocks and you know, you can include permission elements like include Results at the bottom So if you really want to so now let's change it Let's go here and move to the bottom Go to the middle library Pick some cool ranch Doritos Update it and view the post And you can see we have an image block up here and we have an image block at the bottom and The quiz still works So I'm pick some random options Don't pocky. So how so with the rules of the quiz how it works is each Each answer to each questions is is associated with a With a Topic so and what it does is it takes them a maximum of Each of each of the topics and then that's the topics you get based on the answer and What's cool is is the good Greenberg API? The API, you know, it's a bit of a bit of a pain in the neck, but let's get past it. You can do cool things like this If I add a block if I add a topic here It shows up for all the questions. So lots of what's in the flavor pocky There is a run pocky Well, what time would it what time would a rum drinker wake up in the morning? 4 p.m. Is a good one what can I bear burger with a run pock run pocky eater? like Burger King a run a run pocky is favorite Greenberg block YouTube in bed block nice Favorite pure oak flavor bacon All right So then let's insert a block below the image perg up lock Find out what pocky you are Are you vanilla vanilla AF? I guess a vernacular Are you hella rum? All right update Did we break a client site? No, we're good. Okay, so if I select all the last options Oh, we just made a shit deliver run pocky Okay, run pocky wakes up at 4 p.m. It's Burger King likes a YouTube in bed block and likes bacon prerogs run pocky all right so That's all cool and all but I also said there would be There'd be video, so let's go look at that so originally I was going to introduce Introduce video generation and pointing to something to like a video editor that won't rename remain unnamed that cost thousands of dollars But I think I was like no, that's no that's a little and that's like you know not not I'm a very MacGyver thing to do so we're gonna I'm sharing example using all open source for us software and You can take this today With a little bit of MacGyvering in fact a lot a lot of MacGyvering With a lot of MacGyvering and you'll be able to instantiate this and Have your own video content by pipeline with the code you see on the repo so I'm going so I'm using this thing called I've been using a Python notebook to generate this if you don't know about the great because it lets you have code along with pros and Your notes of you know, you write doc self-documentating code and it's great for one of those things where you do You're messing with much of code and you're not quite sure what you're doing like I was all right And also for those in the back or wherever where you can't see it very well. Let me know second the zoom in All right We good. Yeah, cool All right So here we have this is a public endpoint every can read. It's read only. I hope so here is the uri for the quiz that we were working on and if our and will do is go through and print some blocks about it print some information about it So it'll put the title and then this is what the blocks look like So This is this is um somewhat human readable, but But you know, we're not we're not the ones gonna they're gonna be consuming of this The programs the programs and things we build are going to consume this and this is much far easier to consume than just like you know a bunch of Like this big ball they should all that you like poke out with jQuery But anyways, anyways content you can so you can see like you can see like the 4 p.m. Here is something we added at it Right, and then we can go through and with our clients with our client edits Interpret this content into wherever we wrote where we want All right, so there's a little sanity check because we want to make sure our stuff works first, you know All right, so here's a text-based Interpretation of the quiz you wrote so you know if you're old school you can just Send this to your own printer All right, so So I'll have stories and I can tell you the happiness part for you just it so Here I want to make sure all our quizzes show up so all our Rampock options are there cool All right, so I'm using this library called movie pie, which is a nice convenient wrapper around f of mpeg Because right f of mpeg on on its own is a soul of crushing activity in this nice light life This nice light library, you know abstract side which makes it which makes a lot easier so I have this nice nice little function that makes a caption makes a caption and I have this Function right here is Python function right here that takes it and displays the video I'm having trouble with the caching time. I'd have to fill the explorer for a bit and let's change the text to Hello Word camp Santa Clarita And the scratchers fingers hmm. I'm a jerk. So let us Look at this and hope it's not cashed. Cool. It's a little small. Let's make the font size bigger Do do do do cool. All right, that's a little too big but you get the point so So what's great about this is is that you can take this and deploy it Deploy it like if when they put something like this take videos and templates done by your design team or your video production team and then ask him to Put empty spaces for your text and then you can write a program like this and deploy it on say Say like a easy to instance or land an instance and on-demand just generate these videos Right and it's great. It's great to have this kind of thing because you can do it for like say building proofs Like if you ever have to like do a quick edit for proof with bunch of video, you know It's also a soul crushing activity sometimes But you know back if you attended Sergio talks Sergio's talk earlier, you know, these these are Kind of things like those things to do again and again where you want to automate, right? So I think that the point take away of this is no if there are soul crushing activities You do on a daily basis try to automate them All right So we have our data and we have a way to make video. Let's try to combine them So here is a bunch of logic goes through and make some stuff and it iterates through it iterates through all the Choices and then on the post there is the topics are saved as many data on the post Post and what it does it goes through and combines them all in a way that we can interpret later I'm not gonna go into this unless you really want to ask me But but just just know like what this code does it just goes through and combines all data together So we can go through and generate our clips That's if it works It's going through it one by one generating clips takes time and Now that the clips are on memory Let's make sure they're there cool As in doubt we're good. All right, and then let's generate the video All right, I don't trust the cash so I'm just gonna you know take take my destiny to my own hands. All right So it's very big text We could spend five hours trying to Trying to make the text all nice and neat, but you know You don't have time for that, but what I will do is superimpose MacGyver's face on the background image So We're gonna go to our media library Find this nice picture MacGyver And save image as I don't remember where I put my stuff It's good. This is rooting television people snackable Video Mackie Mackie Mac dot jpeg Save cool Much time we got all right And then we're gonna open up a Certain image editor No, no it runs off of 4k I wish I were though actually Let us Actually, you know, I'll be a little bit more interesting if I do this Mac dot jpeg So what it does is is I originally was gonna crop and do nice things with it, but you know, we want the raw experience So I'm gonna go. Oh god. All right I have a time limit guys. The bomb's going off. All right. All right, cool All right, I am generating content right here generating content right here and then I am I am going through making sure it's correct. All right Now that now that I have the now that have the all the clips of memory I'm going to set them all together concounting the videos together like how you would in a sequence in any video editor All right, no errors and then we will go in here and refresh Something happened. Oh no, it's too small. All right. I'm gonna go back And change what we did. Oh, this is the one Okay. All right, so I cut the wrong wire, but no one died yet. So All right All right All right, okay. We saw the first one video. I will open the not to be named text of photo editor All right, we're gonna find my way back. Cool. Go here And then we got nice nice multiply cool say for web All right, you know because you know, that's how MacGyver does right? All right, let's go back We're going to go to the data make our subclips Make sure they're memory. I'm really scared right now. I think my laptop. Oh my god Oh, no, oh, no, there is I don't want to hear it. Yeah, we got it All right, we got it cool All right, we got 10 minutes ish questions Yes Yeah, and again all the source code If you want if you want to look at it and put the inspected They're all on my laptop died. Well Yeah, so So all all the code is available on GitHub if I inspected The is code in a bunch of languages Unfortunately, we have time to demo the mobile app of the mobile the but the mobile app It's written up there Is it's up there if one look at it to and it's someone kind of experience of web on the web you'll be able to like take the quiz also and It's the repair of this little dance. I didn't I didn't put any documentation up yet. So see me but Possibly So movie movie pie is a So maybe pie all it is is a method to to construct videos Like with ffmpeg so it's akin to asking if like, you know Why can't open shot or like or like the kitty video editor upload to YouTube right cuz that's not really its job Yes, exactly So if if one was to enter president's visual one could have this pipeline crazy pipeline where you where you take your Posts take your posts and then plug into some like, you know workflow thing It's really complicated it costs lots of money and then you pick that and And then how to do the approval process where where you have five people that it and then it and then just have That the content go through the same method for producing video and then after that proof it and then and then Whatever treatment you want to do is it and I'll play to it. What are video sources to but that? But the idea is is you have to encode so you can describe you can actually build those things Inscribing instead of just having to have five plug-ins or whatever try to coordinate together So so what you're saying is if I I'm an enterprise in publisher, I work for a company called snap feed Yes, we're based in Los Angeles Yes Mm-hmm, and so you're saying is I can make mean content in Gutenberg that then appears in video form That then syndicates out my content everywhere. Correct But also all the coast gpl. So, you know, just you know So I can say thank you for propane accessories. I could be propane feed exactly All right any more questions All right, any more questions yes So right now It's a lot of my guy ring But perhaps some other in the enterprising individual in this room does that MacGyvering and Publishes that MacGyvering open source and then shares that with you Yeah, exactly All right, any more questions You have several options So so the question was so so how to make a kind of questionnaire where where you say if you do this then the second block appears okay, so That is very possible with the Gutenberg API Very possible. So, you know, I can like Bitch and complain about the Gutenberg API for days That's a straight by anything can bitch by anything, but it's very powerful and those are the kind of features Features that's really meant for where you have like the ability to describe very describe logically logically process like that in your content However, it does and how run it in order to create that experience You have to get really familiar with react and the redux AP redux, which is what the Gutenberg API lucky pay uses but once you get once you get get that down then Then creating that experience will be relatively straightforward, but you know, it's still a lot of work to do All right, there's one question over here So this is a way of life because this this laptop right here is ridiculously expensive and has like a Xeon and like an Nvidia Quadro in it and It's also way too like 10 pounds, but one thing I always do is for it to plug it in And you know when you when you live that life you live that life, right? All right, how are you doing on time? Oh Right exactly, okay So I'm a competing enterprising publisher with my stackable feed comm And I'm really trying to get some competitive advantage. What else could I use the Gutenberg API data to do? Hmm well You can use to make it any experience where you need your content you want to make rich content and You want that content to behave in a certain way in certain way because you can verify the correctness of that content in the editor So, you know, that's what what it's really powerful about Gutenberg editor is is you know, it's clunky It's weird. It's weird bug sometimes, but but the future is the hope is You can have all these nice APIs where you can go through and make more powerful editing tools like for example What if you have a plug-in where you know Apparently people really care if you spell wordpress correctly with a capital P What if you plug in right in that your editor where it'll automatically change all your paragraph knows to spell wordpress correctly? Or you make sure make sure that your image images are a certain size It's not the editor and you have visual feedback for well whether that's true or not Or frankly, you know If I if I don't have to write no short code for us my life, I'll be more content On it than anything because you know short codes are awful. Sorry. All right. Any other questions? I think I got I think I got this from Taobao It was in sketchy packaging, but but if you want it Joe he want this wig you can have it Yeah, I mean I mean I shaved my head In order to wear this wig so you know You know it's a solicitation, right? All right. Cool No questions Yep, or practically you said you learned the Gutenberg API throughout this project and a couple of projects he worked on Cold coming into this how long did it take you to pick up Gutenberg? Was it a worthy experience and are you looking forward to using it for the future or are you kind of skeptical? Okay, so it took me about so okay So it took me about like a week to learn Gutenberg API But that's because I already had react and read experience So most of my my experiences with the API was was finding the ambiguous documentation But it's still working in progress and people were working on it But about the time the documentation for Gutenberg API block API wasn't very good But after working working with because like I'm someone So I was allowed I was allowed for a press developer and I came in right when Gutenberg started happening and people started liking uh saying the world was gonna end um So as someone who despises the classic editor, I you know, we'll embrace our Gutenberg future already Any other questions If at least 15 people DM me on twitter asking for that specifically then yes Right I mean, I mean it'll be there, you know, I'll look at it and then but I'll ask for the 15 total DMs All right, I think uh bring on time All right, so I will be wandering outside after this look for this Look for this and if you want a if you want a Demo of the mobile side or like, you know, like walk through to the code. I'm more than happy to by the way Thank you for coming to my talk