YouTube Video Ky3R5ZScwhI  ## Metadata - Author: [[YouTube]] - Full Title: YouTube Video Ky3R5ZScwhI - Category: #articles - Document Tags: [[development]] [[h1]] [[testing]] [[troubleshooting]] [[xref]] - Summary: YouTube Video Ky3R5ZScwhI - URL: https://www.youtube.com/watch?v=Ky3R5ZScwhI Speaker 1: Okay, everything seems live. Speaker 1: I remember to share all my socials. Speaker 1: So that's always good. Speaker 1: Just close some things down here. Speaker 1: That I need, that I don't need. Speaker 1: That I didn't, that. Speaker 1: It's charging so I need to plug it in. Speaker 1: Okay, have water, can stream. Speaker 1: So this week or this month should I say I am testing out WordPress 6.9. Speaker 1: WordPress, Rc1 I think is coming out today. Speaker 1: but I think there was a beta 4 so I just want to... let's go or hang on... Speaker 1: there'll be a beta 4 post somewhere Speaker 1: there we go Speaker 1: Maybe we'll update that. Speaker 1: Okay, let's run that update. Speaker 1: So if you caught my stream last week or you watched the recording, Speaker 1: One of the annoying things about what I tested last week is that all of that tempered management Speaker 1: stuff has been removed in 6.9. It wasn't quite ready yet, which is fine, but it was a little Speaker 1: bit annoying that I spent a whole stream last week testing and then it reverted. Speaker 1: Anyway, we'll be coming to 7.0 so we can retest it then. Hopefully I'll fix some of those issues Speaker 1: we picked up but yeah it was a little bit a little bit frustrating that that happened anyway. Speaker 1: Let's see if the update is done. Okay update is done so let's check that. Speaker 1: 6.9.0.4. Cool. Alrighty. So the thing that I want to test today, and this is actually more Speaker 1: of an exploration myself, because I haven't actually fiddled with this at all, Speaker 1: is the data forms and data views functionality. So the major updates to data views and data form Speaker 1: includes new field types and new fields operators. I have no idea what that means. Speaker 1: But basically, data views and data form is this new Speaker 1: JavaScript package that allows you to build essentially admin pages. Speaker 1: I've got some links here that I want to open up. Speaker 1: There we go. Speaker 1: There's the package. Speaker 1: So it offers three React components and a few utilities Speaker 1: to work with a list of data. Speaker 1: So rendering a data set using different types of layouts, Speaker 1: table, grid list, data for use pickets, Speaker 1: or render the data set, optimize the selection Speaker 1: of picking of items, and data form Speaker 1: to edit items of the data sets. Speaker 1: So essentially, it's what powers the site editor. Speaker 1: So my understanding is that this is all powered by data views Speaker 1: and data form. Speaker 1: So there's a list of things you can navigate through. Speaker 1: You can do things like show them in a grid, Speaker 1: show them in a table, show them in a list. Speaker 1: I don't know how much of this, Speaker 1: this is probably not part of data views, Speaker 1: maybe this is data form, I don't know. Speaker 1: But I'm interested in seeing what it does, how it works. Speaker 1: I haven't played with it myself a lot. Speaker 1: turn this volume down a little bit. So I honestly have no idea what to expect. Speaker 1: I wish I could... Speaker 1: Trying to adjust the properties of Speaker 1: one of these volumes and I can't go by individual increments and it annoys me. Speaker 1: Okay, so I'll just leave it there. Speaker 1: So fortunately for me, one of my colleagues, Juanma, has created this data form examples Speaker 1: repository. Speaker 1: So the first thing I'm going to do is install that, see what that does and check it out. Speaker 1: music is way too fiving for the stream. So I'm going to install this and have a look at the code Speaker 1: and see what it does and play with it, kind of try to understand how it works. And then, Speaker 1: depending on how much time is left, what I might like to try and do is build my own kind of admin Speaker 1: page. I don't know, I'll see if I get that far. So let's take this code and install it. Speaker 1: (soft music) Speaker 1: I wish. Speaker 1: I wonder if there's a way you can tell NPM to always install packages from locally cached versions first. Speaker 1: Just to speed up this whole process. Speaker 1: Because I feel like I work with WordPress scripts a lot, and so all of the latest versions of the code will be somewhere in my cache, I assume. Speaker 1: And so it's like only check for updated versions from the internet once a week maybe? Speaker 1: I don't know. Speaker 1: Because I guess what this is doing now is checking for updated versions of all the packages Speaker 1: and then pulling them down. Speaker 1: I wonder if any other look can see if there's a way to do that. Speaker 1: That's interesting. Speaker 1: Oh you can go into the install prefer off line. I should really try that in future. Speaker 1: Okay, let's do it against them now. Speaker 1: But, uh... Speaker 1: It's interesting. Speaker 1: Okay, let's load something new today. Speaker 1: Alright, well this is done, so that's fine. Speaker 1: Oh yeah. Speaker 1: So that should be good to go. Let's go and have a look at what we've got. Speaker 1: Again with the Vibe music. What mellow music? I like mellow music for my streams. Okay, Speaker 1: so there's an admin page. See what he's doing here. Okay, so here we go. So he's basically, Speaker 1: Okay, so it's putting in how much things. Speaker 1: It's a bunch of different dashboards, that's kind of cool. Speaker 1: And you can switch grid, list, table, that's really cool. Speaker 1: Got all this, so probably all of this stuff is built in. Speaker 1: I guess when you view details that would... Speaker 1: I wonder which part is the phone... Speaker 1: I wonder how much all of this is built in. Speaker 1: Oh it's actually, you can put it in the app, it's pretty cool. Speaker 1: I wonder who's doing that for. Speaker 1: Okay anyway, let's kind of look at the crowd. Speaker 1: Um... Speaker 1: Alright, again with the Fibre music. Speaker 1: Um, okay. Speaker 1: Plug in... Speaker 1: And the admin menu... Speaker 1: so I'm pretty sure forward adds a subring page, add a visa for subringing Speaker 1: oh I didn't see that Speaker 1: oh here's the form, okay so create ranges of form that you can add elements to, okay Speaker 1: different layouts Speaker 1: Okay. Speaker 1: Right. Speaker 1: Create some root elements. Speaker 2: Okay, let's push it forward. Speaker 1: Then he hooks up on... Speaker 1: Specific examples. Speaker 1: All the assets. Speaker 1: And then, I can use the scripts. Speaker 1: Okay. Speaker 1: I can use the styles. That's one index and one styles. Speaker 1: Let's take a look at the source. So the source has index.js. Speaker 1: This is an app component. Speaker 1: Let's create another app. Speaker 1: Let's create this dashboard manager and use dashboard manager. Speaker 1: It looks like there's some defaults starting that happens. Speaker 1: You have to import those yourself. Speaker 2: Here's all the examples. Speaker 1: So, let's get in those elements. Speaker 1: either there's a news route or dead format Speaker 2: okay, if there's a route element Speaker 1: And then render components, posting it to current page. Speaker 2: Okay, so I guess the "C Speaker 2: I guess that's the old text. Speaker 1: There's the dashboard manager. Speaker 1: Move to terms and examples. Speaker 1: This. Speaker 1: I'm guessing this VStack stuff is all very specific to the package. Speaker 1: and Speaker 1: it's Speaker 1: No. Speaker 1: This is Speaker 1: Okay. Speaker 1: It's a loud component that arranges Speaker 1: Charlie into the vertical line. Speaker 1: Okay. Speaker 1: Okay. Speaker 1: and Speaker 1: This is the kind of stuff that many sort of traditional work footsteps struggle with. Speaker 1: Even I'm struggling to read all the yarns. Speaker 1: This is very sort of more modern JavaScript Reacty type things. Speaker 2: So you can see the data themes. Speaker 2: I've got other form which I see. Speaker 1: So there's all the different dashboards. Speaker 2: It's the select control, because that makes sense. Speaker 2: Current dashboard. Speaker 2: First, I will select it. Speaker 1: So, that will be for example photos dashboard or whatever. Speaker 1: So, photos dashboard, let's see. Speaker 1: Dashboard photos. Speaker 1: Okay. Speaker 1: There's a lot to learn here if you don't know what you're doing. Speaker 1: So I wonder what the easiest way is to create a simple data view. Speaker 1: Then if I can create a simple data view, which lists the advantage of elements there. Speaker 1: Oh, that's the example that was used. Speaker 1: Huh. Speaker 2: So here's the config. Speaker 1: This is the data view. Speaker 1: Some actions. Speaker 1: There's some config. Speaker 1: It has some data. Speaker 1: It looks like you can just pass it to the data view and it'll just work. Speaker 1: That's kind of cool. Speaker 1: I wonder if that will just work. Speaker 1: Like if I just copy this and render it as a start. Speaker 1: That might be a good place to start. Speaker 1: I think that's what Kwanma has done. Speaker 1: He's taken that and kind of built on top of it. Speaker 1: So let's just see here. Speaker 1: So here we have two data views, data fields, view config. Speaker 1: Yeah, so he's added all this other cool stuff. Speaker 1: But essentially it's just returning the data views element with the right data. Speaker 1: So let's do that. Let's... Speaker 1: Okay, so the R image is there. That's cool. Speaker 1: So let's just see if we can get the simple data view implemented in a base plugin. Speaker 1: Hey, Anne! Speaker 1: Thanks for joining. I'm gonna try and learn how to use data views today. I don't know if I'm gonna fail miserably or not. Speaker 1: I really need some kind of notification when people add in the chat. Speaker 1: I'm so busy looking at the code I get lost. Speaker 1: Okay, so I think that's going to be the plan today. Speaker 1: Take this example, stick it in a simple plugin, get it to render. Speaker 1: I feel like that's doable today. Speaker 1: I might have more time to fit a little bit, Speaker 1: but I feel like that's a good place to start. Speaker 1: So let's do that. Speaker 1: I'm going to be relying heavily on Juanma's example code. Speaker 1: It looks like it's just a case of using Speaker 1: WordPress scripts as a dev dependency and data views Speaker 1: for now as a dependency. So I'm going to set those up. Speaker 1: And I just want to get this basic example working in a in a plugin and then Speaker 1: I'll see how I go from there. I always find the best way to learn something new that I'm Speaker 1: completely lost. That is to start with simple examples. So that's that's going to be the plan Speaker 1: for today. I really wasted 23 minutes getting this far. So let's see. Okay, let's start by creating Speaker 1: a new plugin let's call it data views demo for whatever I want to the better word Speaker 1: Okay, let's implement it. Speaker 2: Package name, that's fine, description, sample, plugin, things in the data, things. Speaker 2: demo plugin using the example page it used Speaker 2: And then side the link. Speaker 2: Where was that? Speaker 1: Okay, entry point is fine, just the one I don't care about, the key I don't care about, the key I don't care about. Speaker 1: I'll just put my name down because that's Pichu. Speaker 1: GPL 2.0.0.0.0.0.0.0 Speaker 1: So I'm just gonna do that. Speaker 1: (soft music) Speaker 1: And there. Speaker 1: (soft music) Speaker 1: Do that. Speaker 1: (soft music) Speaker 1: I don't care. Speaker 1: It's my code and I'll do it if I want to. Speaker 1: (soft music) Speaker 1: Camera view. Speaker 1: I'm so sorry. Speaker 1: I tend to forget about that. Speaker 1: We'll move it over. Speaker 1: Here we go. Speaker 1: (soft music) Speaker 1: It's all the downsides of streaming. Speaker 1: camera's got to go somewhere. Sorry, I apologize. I was literally just running npm init and then Speaker 1: turn all the answers there. I will stick this code in a GitHub repository later and if you Speaker 1: want to check it out, so don't stress. Okay, don't stress it, that's the way I said it. Speaker 1: If you want to check it out, so yeah, we'll be there. I try to compare this to Juan Marz. He Speaker 1: I can move that to Speaker 1: He has build and start but I'll add those in a second Speaker 1: As long as the rest is pretty much the same, so that's fine Speaker 1: Then I need to require Speaker 1: Wordpress scripts Speaker 1: What did I just do? Speaker 1: So Speaker 1: It's in store I think. No, it's required. Speaker 1: I've been working with Composer all week. I forgot how to use NPM. Is it required? Speaker 2: No. Hang on. NPM. Speaker 2: NPM install. Speaker 1: NPM install? Install I think. NPM install. No, there we go. Speaker 1: (laughs) Speaker 1: NPM install at with scripts. Speaker 1: And I think it's to do require Speaker 1: Dev, I think. Speaker 1: No, oh. Speaker 1: Ah, I've just been using, save Dev. Speaker 1: Blast. Speaker 1: It just cancels. Speaker 1: get my composer and NPM configurations confused. I wish I honestly wish that the NPM folks Speaker 1: and the composer folks had made everything the same. I mean it was just composer, require, Speaker 1: blah, NPM require, blah. It kind of is. So NPM for me is a little bit easier to kind Speaker 1: because I came from using composer when I entered the WordPress space. Speaker 1: So I was using composer to manage PHP dependencies a lot. Speaker 1: One of the very first times I used composer was... Speaker 1: I want to say 2010 or 2011. Speaker 1: I think it was before Ethan was born. He was born in 2012. Speaker 1: So I think it was around about that time. So we're talking 15, 14 years ago. Speaker 1: And so I used Composer to install a PHP package to use in the project I was working on. Speaker 1: And so I understood how that worked. Speaker 1: You know, it's basically taking some code and sticking it in a separate place and then you're using it instead of having to include it yourself. Speaker 1: So when I started using NPM, the concepts were kind of similar to me. Speaker 1: But essentially what you're doing is you're installing some JavaScript code in your application, importing it and then using it. Speaker 1: But if you're not used to that, if you're used to including everything yourself manually, then it can feel a little bit like magic. Speaker 1: Okay, so that is script installed. It's installed as a dev dependency, which is great. So I want Speaker 1: using 3270 to 1MOS using 360, 3600, that's fine. So then I need to require or install Speaker 1: DataViews. So let's go and install WordPress DataViews. Maybe not. Oh, it's one word. Speaker 1: It's my internet slow. Speaker 1: Let's take this time. Speaker 1: Okay, that didn't install. Speaker 1: Oh, there it is. Speaker 1: So, data views as dependency, word-rescripts as a data dependency. Speaker 1: That's great. Speaker 1: There's my node modules. Speaker 1: all the other nonsense that gets installed alongside it. Speaker 1: Down here somewhere there'll be a WordPress folder. Speaker 1: Where is it? Speaker 2: There it is. Speaker 2: There it is. Speaker 1: So now I can just use import and do whatever I need to do. Speaker 1: That is the one thing that's interesting about Speaker 1: JavaScript packages versus composer packages is composer packages tend to be very isolated. Speaker 1: They don't often rely on other packages. They do sometimes rely on other packages, but the packages they rely on are often isolated as well. Speaker 1: So you'll have like one or two layers of nesting. Speaker 1: JavaScript packages rely on multiple other packages from all over the place. Speaker 1: So you get a lot more different packages installed when you install one thing, which is interesting. Speaker 1: Let's have a look at this information and how big this is. Speaker 1: Let's see from here. Speaker 2: This is the wrong one. Speaker 2: "Testing WP-Content plugins." Speaker 1: It's like big node modules. Speaker 1: I can't see the size anyway. Speaker 1: Calculating size. Speaker 1: That's hilarious. Speaker 1: It doesn't even know how big it is. Speaker 1: OK, anyway. Speaker 1: All right. Speaker 1: So that's got the basics of that installed. Speaker 1: Let us start by copying some of Juanma's code Speaker 1: to get the basic page up and running. Speaker 1: lets first create a php file to have code of pd2 Speaker 1: example Speaker 1: code by just give it a Speaker 1: I just want to do these examples Speaker 1: version okay let's just do the good old if not the fine app spot exit good look at Speaker 1: suggesting a menu page so I think that's probably because I've got the Speaker 1: other plugin open so it's got some context that's great Speaker 1: manage options, day to day example, day to day example, main page that's fine cool Speaker 1: Thank you co-pilot you give me some stuff to work with here Speaker 1: That's fine okay now what Cromite does have Speaker 1: in his main page Speaker 1: Is he has h1 and then a dev with this id? Speaker 1: So I think that's what we're going to want to do Speaker 1: So there's the H1. Speaker 1: I wonder if putting it inside of a wrap Speaker 1: makes any kind of difference. Speaker 1: Interesting to check it out in the loader. Speaker 1: So what I'm going to do, Speaker 1: so I'm gonna stick this div below my stuff, Speaker 1: and then I can use that. Speaker 1: Okay. Speaker 1: That'll give us the div root to work with. Speaker 1: Let's call it data view example root, Speaker 1: just because that's the name of my plugin. Speaker 1: Oh, I actually called it data views. Speaker 1: Didn't see that. Speaker 1: So I called it data views example. Speaker 1: Okay, and then we're gonna have to start creating some codes. Speaker 1: So... Speaker 1: I need to install the script so it's installable and start just for the sake of Speaker 1: keeping it simple Speaker 1: Now if I look at Juanma's example in his source it just has a basic index.js Speaker 1: I could probably put everything in there, so that's what I'm going to do just to keep it simple for now Speaker 1: So let's go to new directory source Speaker 1: It's going new, JavaScript file, index.js. Speaker 1: I'm not going to worry about styling right now. Speaker 1: Actually, I might need to. Speaker 1: Well, let's see what happens. Speaker 1: And then I'm going to have to do this dumb ready stuff Speaker 1: and then set up the app. Speaker 1: Might not need the app stuff. Speaker 1: I might just be able to, Speaker 1: I wonder what would happen if I just rendered the data. Speaker 1: We'll see. Okay, so let's import this. Speaker 1: That's fine. Speaker 2: And then let's grab this. Speaker 1: Okay, and then this is the root element that we want to work with. Speaker 1: So it will be that one. Speaker 1: Okay. Speaker 1: And then I'm just gonna go if, Speaker 1: date of his route, do some stuff. Speaker 1: And then, what he has is the whole app Speaker 1: with the current page stuff. Speaker 1: What I wanna do is I just wanna render Speaker 1: the example from here. Speaker 1: So, can I just copy this whole thing? Speaker 1: Yeah, there we go. Speaker 1: So we'll copy that. Speaker 1: And I'm gonna stick this in a separate file. Speaker 1: So I'm gonna say, JavaScript file, Speaker 1: and I'm gonna say data view. Speaker 1: Just checking phone for any important messages. Speaker 1: And then I'm gonna just jam all of this. Speaker 1: Now that's not gonna actually do anything Speaker 1: because I need to actually return that. Speaker 1: So I'm gonna cheat outrogously. Speaker 1: So I'll look here. Speaker 1: I suppose I could do this app story. Speaker 1: Yeah, let's do that. Speaker 2: Let's rename that to app. Speaker 1: And at the top here, we'll do who. Speaker 1: Baywick me. Speaker 1: I'll figure this out. Speaker 1: Stumbling my way through. Speaker 1: Okay, so I don't need all this current page stuff. Speaker 1: I just need to return data. Speaker 1: I could just do this in the index, I suppose. Speaker 1: Maybe that's an easy way to do it. Speaker 1: I look awful, but yeah, actually I'm going to do that. Speaker 1: So I could literally just render it here. Speaker 1: This should work. Speaker 1: No, not that one. Speaker 1: Okay, that should just work. Speaker 1: looks awful it's a whole bunch of codes you got to scroll through but essentially it's Speaker 1: creating the route and then rendering the data view. Speaker 1: The only thing I need to do now is import data views from whatever so if I go to data Speaker 1: Views examples. Speaker 1: I'm going to have to import... Speaker 1: It'll be whichever component. Speaker 1: This is a photo dashboard for example. Speaker 1: Oh, yeah. Speaker 1: Tryna hand down there. Speaker 1: Is to read the database. Speaker 1: If you are lost, don't stress. Speaker 1: I'll run through what I'm doing in a second. Speaker 1: Um... Speaker 1: No, that was the wrong one. Speaker 1: No, it's not that one. Speaker 1: No. Which one am I weakening? This one. Speaker 1: Here we go. Speaker 1: Too many files open. Speaker 1: Don't need that. Speaker 1: Okay, just check if we have any other issues here. This should be good. Speaker 1: I'm going to need HStack stuff as well. Speaker 1: Okay, let's just do this. Speaker 1: I don't need the app. I probably don't need this anymore. Speaker 1: We don't need this anymore. Speaker 1: I can stay there. Speaker 1: I don't need my package address. Speaker 1: We don't need that right now. Speaker 1: We don't need that right now. Speaker 1: Okay. Speaker 1: So what I'm essentially doing, Speaker 1: if I don't confuse myself in the process, Speaker 1: is I'm using the dumb ready Speaker 1: of my job, Speaker 1: which will essentially fire these things when DOM is ready. Then I'm creating a Speaker 1: variable which is essentially the div. And then I'm setting up this root Speaker 1: variable which calls the create\_root function and I'm passing element to it Speaker 1: And then I'm using that root variable to render the data view. Speaker 1: To render the data view I need to import the data views package. Speaker 1: At least I need to import the component from the data views package. Speaker 1: And then it looks like I also need to do things like import SVG path and all these things. Speaker 1: Or I could just use, I mean I could use icons for example here. Speaker 1: see what else there is Speaker 1: So this is using HStack Speaker 1: This is using React Speaker 1: Some of this stuff is going to start giving me errors Speaker 1: Let's see if I can figure out these imports myself. Speaker 1: Okay, let's see. Speaker 1: Okay, thanks, Anne. Speaker 1: Okay, so import React from React. Speaker 1: import hdc.hvg.parts from components. This is code completion suggesting these things Speaker 1: for me. I hope it works. I have no idea if it will. Speaker 1: hdc doesn't seem to be an option. Let's see in... Speaker 1: what most code if he has... Speaker 1: I think he was using hdc somewhere. Speaker 1: Let's see if we can dig into that. Speaker 1: So it's experimental hstack as hstack. Speaker 1: Okay, that's our problem. Speaker 1: SVG seems to work. Speaker 1: Path seems to work. Speaker 1: I think just works. It's been a while since I've done this. Speaker 1: But I think that will fix all the imports. Speaker 1: Let's see. Speaker 1: Let's run a bolt. Speaker 1: NPM, bolt. Speaker 1: OK. Speaker 1: It's bolted everything. Speaker 1: Now I'm going to need to enqueue the JavaScript. Speaker 1: So let's do that and see what happens. Speaker 1: Let's go back to here. Speaker 2: Let's go grab this. Speaker 1: Okay. Speaker 1: Okay, so the allowed page, I need to check. Speaker 1: I can never remember what these things are. Speaker 1: So let me just turn that off. Speaker 1: It's going to be... Speaker 1: This one, I think. This is chicken. Speaker 1: Plug-ins... Speaker 1: Let's deactivate that. Speaker 1: Let's re-activate that. Speaker 1: Should work. There's the thing. Speaker 1: Okay, so let's do a quick check here. Speaker 1: Okay, let's open up my little debug logger. Speaker 1: Let us point it towards 6.9 tester. Speaker 2: Okay, that's good. So now if we refresh the page. Speaker 1: Okay, so that's what that is. Speaker 1: (mumbles) Speaker 1: I should only need to do this inner ray thing because I'm just doing one. Speaker 1: As you're now so I can say, if... Speaker 1: not equals oxyphex, okay, happiness. Speaker 1: And this will all be the same, that will all be the same, and that will all be the same. Speaker 1: We'll say "data views example script" Speaker 1: That's all fine. Speaker 1: I don't need a style sheet yet so I'm just going to comment this out. Speaker 1: Okay, that should do something. Speaker 1: So let's go back to the index and let's just console log, just to be sure. Speaker 1: Let's see what happens. Let me just run the dev server so we can hot reload this while Speaker 1: testing fire up the old DevTools Speaker 1: let's see what happens Speaker 1: Now why is it taking so long? Speaker 1: Did I break it? Speaker 1: Okay, we're getting errors. Speaker 1: Um... Speaker 1: Okay, the code is loaded, which is good. Speaker 1: Uh... Speaker 1: I wonder where the error is? Speaker 1: Okay, I have a feeling... Speaker 1: I'm going to take out this whole data view thing here. Speaker 1: I think that's the problem. Speaker 1: There's some errors in there somewhere. Speaker 1: So let's just... Speaker 1: let's just render some... Speaker 1: something. Speaker 1: That should work. Speaker 1: Okay, so that does work. Speaker 1: So that code works. Okay, cool. Speaker 1: So there's definitely a problem in our data view somewhere. Speaker 1: So usually what I do when this happens Speaker 1: out. But I reckon it could be the problem. So let's take out the actions. Let's take Speaker 1: out the render modal because that requires additional things. Speaker 1: So let's leave that action there. Let's actually just take out the actions inside. Speaker 1: We can add actions there. Okay, so there's the config, there's some data. Data is just Speaker 1: So that looks good. Speaker 1: So maybe we can just get that part to work. Speaker 1: People play artscafe fields. Speaker 1: I have no idea what these do. Speaker 1: Can I just use text here? Speaker 2: I'm just going to use this. Speaker 2: Let's take out all this stuff. Speaker 2: Let's take out all that. Speaker 1: What I want to do is get this thing to render today. Speaker 1: It's like the smallest step I can take. Speaker 1: The SV icon stuff we can figure out later. Speaker 1: Okay, let's see if it likes that better. Speaker 1: I'll just do this extra step but I don't really... Speaker 1: Let's take out the SVG stuff from the path stuff. Speaker 1: I think you're supposed to be using icons there anyway. Speaker 1: Which WordPress does offer. Speaker 1: And I don't think we need this anymore either. Speaker 1: So let's see what that does. Speaker 1: Okay, it's pulled successfully. Speaker 1: Let's see if we can get it to render. Speaker 1: Hey! It rendered something! Speaker 1: Okay, that's cool. Speaker 1: Now, I wonder if the styling is not happening Speaker 1: because we're not importing the styles. Speaker 1: So let's do that and see what that does. Speaker 1: So, when I was just importing these styles. Speaker 1: So let's see if that does something. Speaker 1: Let's go to style.sdl. Speaker 1: and it just import those Speaker 1: and then I wonder if all this other stuff is necessary Speaker 1: I don't know Speaker 1: it might, so let's do that Speaker 1: and let's just see what that does Speaker 1: okay that's built, let's see what we've got Speaker 1: okay that doesn't seem to do anything Speaker 1: so there does seem to be some styling needed Speaker 1: so what I'm going to do is I'm going to start with the background Speaker 1: Just to get the white background to see what that does. Speaker 1: And it's data view, data view is example root. Speaker 1: Data view is example root. Speaker 2: I think that should work. Speaker 1: I wonder if it's because I've got it in a wrap. Speaker 1: Because Khrima doesn't have an error. Speaker 1: So let me... Speaker 1: It shouldn't do. Speaker 1: It shouldn't make a difference. Speaker 1: I don't actually have it in a web. Speaker 1: I've got the other thing in a web. Speaker 1: I wonder if it's just because he's Speaker 1: got a bit of styling than I do. Speaker 2: So I can see what it's generating. Speaker 1: So there's the data use example root. Speaker 1: So that should be fine. Speaker 1: I wonder, oh, it's because I'm an idiot. Speaker 1: I didn't in cue the style sheet, dummy. Speaker 1: So data view, example styles. Speaker 1: There we go. That should fix it. Speaker 1: Duped. Speaker 1: No, that still hasn't. Speaker 1: Oh, oh, oh. Speaker 1: Why is it not building the station? Speaker 1: What if I need to tell it from it? What if I need to include it so? Speaker 3: No. Speaker 2: Strange. Speaker 1: I wonder if that's because of the version of DataViews I'm using. Speaker 1: I noticed Juanma is using the next version, so I'll give whatever the latest and greatest Speaker 1: is, so let's try that. Speaker 1: See if that makes it a bit... I think it should though, because WordPress scripts manages the... Speaker 2: the building process. Speaker 2: Style.scs.style.scs. Speaker 1: One of these is webpack country. Speaker 1: Let's try that. Speaker 1: That should start. Speaker 3: No. Speaker 2: Why is my stash a done? Speaker 2: sad job Speaker 1: Composer should make a difference, it's all PHP/CS stuff Speaker 1: Okay let's try the next story, I don't think it's going to make a difference but let's try it Speaker 2: Let's see if it's going to store in there. Speaker 2: Right, I'm going to do this. Speaker 1: Red marjones. Speaker 1: That's going to take a while. Speaker 2: Let's try to get it stored again. Speaker 1: Alright, let's leave the package box. Speaker 1: the Speaker 1: As far as I know, this should just work. Speaker 1: Okay, let's delete the bold directory. Speaker 1: Sometimes I sometimes notice that if the bold directory is there, Speaker 1: then it kind of freaks out. Speaker 1: So let's delete the bold directory and it's... Speaker 1: Should have... Speaker 1: I should have done that with the previous version of Data Views, Speaker 1: but anyway. Speaker 1: Okay, bold. Speaker 1: I have no idea why this is working. Speaker 1: the different version of WordPress scripts. Speaker 1: I find that hard to believe that's the problem, but let's try. Speaker 1: Let's see. I'll use the exact same versions of what I was using. Speaker 1: Okay, on the plus side, this stuff is at least doing something. Speaker 1: Okay, it's not actually updating the list. Speaker 1: I'll probably have to fix that somehow. Speaker 1: But it's showing all the settings and things, which I'm pretty chuffed. Speaker 1: So the core functionality is kind of working the way it should. Speaker 1: It doesn't look like pagination is working or any of those things. Speaker 1: I can probably try and figure out how they work. Maybe that should be the next step is to figure out how these things work Speaker 1: At least get them to do something get the icons working, but at least the core sort of Speaker 1: Functionality is loading which is kind of cool Speaker 1: So Speaker 1: curious to figure out why the style sheet's not loading. Speaker 1: I have no understanding of why the style sheet is not working. Speaker 1: Maybe it needs the prettier config? Speaker 1: Let's try that. Speaker 1: Let's see if that makes a difference. Speaker 1: No, that wasn't it. Speaker 1: I don't think it's lint stuff Speaker 1: because that would be for linting Speaker 1: I mean, we can copy it over Speaker 1: I don't see what I'm doing that is Speaker 1: (soft music) Speaker 2: This course is Speaker 1: Okay, it's kind of frustrating but I'm going to stop there now, Speaker 1: without at least because I don't understand why it's not working. Speaker 1: I'm going to upload it to GitHub and I'm going to ask my colleague Juan Speaker 1: Mart to help me with why. Speaker 1: On the plus side, I do like the fact that the DataView is working, more or less. Speaker 1: I think I feel comfortable to not dig into that Speaker 1: code and kind of trying to figure out what it does. Speaker 1: I just want to do one last search in here. Speaker 1: This is in QNF. Oh, so I don't see... Speaker 1: I do one last situation here for it, it Speaker 1: I figured that's what it was. Speaker 1: Okay, so let's do that. Speaker 1: Probably here. Speaker 1: Now let's try that. Speaker 1: Okay, that looks like something happened. Speaker 1: Yes. Speaker 1: - Yay. Speaker 1: I got the style sheet working. Speaker 1: Okay, so this is probably because I'm missing images and things that took all the nonsense out. Speaker 1: It's looking a lot better though at least. Speaker 1: Okay, so I'm quite happy with that. Speaker 1: I wonder if this is an issue. Speaker 1: Following entry point combined assets, I'd exceed the recommended. Speaker 1: impact performance by using import or Speaker 1: require and show so those loads some Speaker 1: parts of the application. Speaker 1: I think this is just the way that I've Speaker 1: built it. It would probably be easier to Speaker 1: take this and split it off into different Speaker 1: things I don't know but for now that's Speaker 1: what I'm so I guess now what we can do is Speaker 1: we can look into all of these actions Speaker 1: that are set up. So you've got a data object, we could pass data to these fields. Speaker 1: I don't know if there's a fields, so there's data. So there's the config, there's the data. Speaker 1: And the data we could pull from somewhere. If we want to do this default layout, so there's Speaker 1: fields so it's image image title so the guy Speaker 1: yeah so it's image title date date time Speaker 1: one of that stuff, sorting, kit item, kit clickable, change view, so there's all these Speaker 1: actions that exist when certain things happen that you can hook into. Speaker 1: I still don't understand any of this, I probably need to spend a lot more time on figuring this Speaker 1: this out and understanding how this works. Speaker 1: I'm probably not going to carry on testing this in the live stream next week because Speaker 1: next week I want to spend a bit of time on interactivity API maybe Speaker 1: or the block binding stuff or the HTML API because I've only got how many weeks left Speaker 1: two more weeks left in November to test all this stuff. Well I don't want to test it all Speaker 1: but I'm not trying to test some of it. So we'll see. So for now I'm just gonna stick this in a Speaker 1: GitHub repository somewhere and then I'll come back to it when I get a chance. I'm glad I got it Speaker 1: working. More or less. Didn't really write any code. Just copy pasted some stuff. Renew some stuff. Speaker 1: but that's a very simple implementation of a data view. Speaker 1: Cool, let's look at the center repo somewhere. Speaker 1: Anybody wants to have a look at the sponsors? Speaker 1: and says Speaker 1: look at his knees I get it Speaker 1: no I'm not about it Speaker 1: okay so let's grab this red card Speaker 1: Okay, I need to create a sketch ignore. Speaker 1: And it's add. Speaker 2: And it's that. Speaker 3: \*Met Speaker 3: and Speaker 1: Okay, so there it is. There's the code that I worked on today. I'm probably going to continue Speaker 1: playing with this plugin just to use these things and understand how they work. I'd love to figure out Speaker 1: getting the image right, getting the little checkbox story right, getting this right, Speaker 1: getting it right so it actually changes these things. I'm going to have to both dive into Speaker 1: more code to get that figured out. Speaker 1: I don't see those examples in here anymore so I'm going to have to set those up or something. Speaker 1: So yeah, I think I'm just going to get used to how DataViews works. And then if I have Speaker 1: time later, I'll get onto DataForms. But that's it for me for today, folks. I hope that if Speaker 1: you've been watching this, you've enjoyed me fumble around. If you're watching this Speaker 1: on YouTube, give me a like and a subscribe. Otherwise, I'll see you next week, where Speaker 1: way I'll be testing out something. Maybe I'll maybe I'll work with the block Speaker 1: bindings next week because I feel like those are a little bit more testable by Speaker 1: somebody who has minimal information about these things. But I'll see how that Speaker 1: goes. I might try and do a little bit of... Speaker 1: Yeah, this is really just date block and image block. Speaker 1: Anyway, I'll see you guys next time. Speaker 1: Alright, that's me for today. Bye., YouTube Video Ky3R5ZScwhI, YouTube, 01kac4erga421c7mvwky9zh30v.