About this talk
In this talk, Ted Bowman, a member of the Drupal applications team at Acquia, explores the features of Drupal Canvas, a visual page builder designed for creating and managing content types in the Drupal CMS. He discusses how canvas allows site builders to create templates and components with ease, highlighting its capabilities for content templating, such as connecting data fields to visual elements without initial data configuration. The session demonstrates building a mock TV show website, covering the creation of content types and templates for shows, episodes, and characters, as well as the use of a migration module and API integration. Ted emphasizes the flexibility of Drupal Canvas in enabling rapid prototyping and the efficiency it brings to managing complex content structures. Additionally, he touches upon future developments, including multilingual support and enhanced editing capabilities.
Full transcript
All right. >> So, now on to the non-exclusive content. >> Okay. So, I'm Ted Bowman. Uh, I'm part of the Drupal applications team at Aquia. Uh, Tedbo and Drupal.org backend developer site builder. Um, so I'm not a front-end developer. So uh this for the site building case you know I'm I do stand behind what I'm saying but I'm also sharing the components that are part of it
and I don't you know don't the the component.yaml files will be great but do not follow like the CSS and the markup that's claude's fault. So everything else I stand behind. Okay, so previously I worked on automatic updates now in Drupal CMS, layout builder, rest and settings tray. Actually layout builder is also in Drupal CMS for navigation. Um and currently I'm working on canvas. Uh these are
the slides and um also at the slides will be uh links to the demo site which will have the migration not the actual site but the ability to migrate all the content types and the uh the data from the TV site that we're going to be using and then the theme with the components in it. The only thing that is not available right now is the videos
because I realized I could not upload the screencasts over uh Wi-Fi in my hotel room. But I will upload those later and they'll be in a um they'll be in a linked um uh Google Drive folder which is already linked but empty but we'll have maybe when you look we'll have it there. So what is Drupal Canvas? Um probably who who has used Drupal canvas before? Who
has seen a presentation on Drupal Canvas before? Okay, so generally people know what it is. Great. Um, visual page builder, in browser code, component editor, page building, AI assistant, vibe coding, component assistant, and content templator. I'm going to be focusing really on the visual page building, and the content templating. Um, I gave my session description I don't know when it was like in the fall and you
know canvas is in flux. So I may not cover everything exactly that was in there but um I'm covering most of the stuff. Um so it's a page builder. It's new canvas uh content type entity content entity type. it's not fieldable in the UI and you build without further configuration like you install canvas and if you have a canvas compatible theme which component with components or if
you've made JavaScript components you can just sort of start right away. Um the code component editor which I'm not um covering but uh you can see my um co-worker balance session from yesterday. It's a live code editor with syntax highlighting for JavaScript and JSX real-time preview and supports modern React and React patterns. Um content templating so you can design the look of content type pages replaces manage
display and you can connect data after. The idea is like you can make the way it looks and then you could make the content actual fields later if you wanted to or you could have the fields there and then connect them. But uh as long as you have an empty content type, you can template how it's going to look first. And now you can control all view
modes. That's explanation because that's as of last week. So full content, teaser, search, new ones that you make. Um single directory components, they're stored in a single directory. Uh Drupal subsystem. They need a component YAML file and twig file, JSS, CSS, and asset files. I'm not going over how to make uh components in this session, but basically all the stuff that I'm using is uh code components.
Um so in our case, it's sorry to say code components, I meant SDC's. uh input values are provided via the UI for props and slots are basically drop zones where you can put other components and you can put other SDC's or other code components blocks or any other component type that a contrib module might I'm not sure if anybody's doing it yet but other modules could provide
different component types um so STC canvas use case props and slots are not slots are not necessary so an example of a SDC that might not have any props or slots would be like a company logo where you don't really need to change anything or an SDC where you only want to show a picture of a capabra like this one here. Okay, so an example SDC is
a number basically as a prop type of a number and it displays that prop uh has three files and this is the component.yaml. It basically says, "Hey, I need a number." Um, it needs to be the type of number and then we display it just with very simple twig and then very simple CSS. Um, I swear this is probably the last code you'll see in my presentation.
Okay, so STC versus JavaScript components. From a site builder's perspective, it doesn't really matter. like when they're dragging stuff onto a page or a template, they don't need to know and they're not actually told if it's an SDC or a JavaScript component or a block or some other future component type. They both have props and props and slots and this the UI is the same for setting
the props and slots, placing the components and editing the props, etc. Okay, so today's demo is going to be core plus canvas. I don't in my uh my theme and then my migrate module. So couple things more. Okay. So the demo site is going to be using this API called t TV maze API and it's going to have shows, episodes and casts. And this is uh the
TV show is the main thing. Um these are the fields and then episodes will have a field entity reference to meant to check my time. Okay. Um field it entity reference to the show. Uh cast member will also have an entity reference to the show. The show will have an entity reference to the genre uh taxonomy term and also to the TV network. Okay. So we're going
to start off. This is not a live demo session but this is sort of live video recordings that I will narrate and then um like I said the only thing not only on my laptop is the video. So if there's a disaster I will do a live demo on somebody else's laptop. Okay. So we're going to create the homepage. Uh I if for anybody in here who
actually has not seen canvas, I do want to demo like one thing live because I realize I I didn't explain it at all or at least from the beginning is if I go to the site uh never mind. I was yeah how you get to canvas is there's if you only install Canvas and you don't have Drupal CMS, there's going to be a link in the toolbar.
If you don't have the toolbar, then you will have to know the URL, which I'm not going to tell you. So, use Drupal CMS or install the toolbar. Okay? So, that's how you get to the UI. So, I just I wanted to say that because it, you know, is a very different UI than Drupal. So, if I, you know, just sort of start with this, you might
think, oh, is this, what is this? It's not Drupal. So, I think that's a good thing. Okay. So, we're going to start building a page. is we're going to create a new page and we're going to call it TVBV which is the um the imaginary website about TV. And so we have an empty page and we're going to just start dragging components. Um so I've made a
hero component for my page and or for my in my theme and we're going to add media. So I've already added media items to the site and we're going to use this as a background image. So the hero component that I have here has three modes like background, image first or image second. I'm going to put background here. And I have a slot that depending on the
mode of the hero is going to be in different places. But in our case when we're using the background, the slot where I can drag components is actually on top of the image. And then I have props in the actual hero that determine where that slot is going to sit on the component. So for our case, I want the the actual slot to be in the upper
right window or upper right part of the background where I have this sort of clear space. And so I'm going to copy in the text of the that I want to show the entertainment hive, which is sort of the theme of our imaginary site. And then I'm going to play around with the props of the actual hero component to basically move the slot into different places. And
then I'm going to change the size of the header component to get it to the size that I want. And eventually you will be able to see it. I promise. And I'm going to switch the size of the component so it shifts over to the right. And again, if you look at the CSS for this probably, I'm sorry, but you know, it works. Okay, so I'm going
to put a text component on here, which is going to match for formatted text on a Drupal FE or sorry, getting ahead. We're not doing templating yet. So, I'm going to paste in static content about our site for the text. And then I'm going to put a button component on here, which is I'm going to go link. In the future, I would link to a different part
of our site. Um, and I think we're going to say join the hive. Got to jump through that part. Um, with a little B emoji cuz we want to be fun. I can mess around with the size of the button. So, what we have here is one component with a slot that we then drag three components into. And again, besides the theme, basically I can install Drupal
and I can just start working right away. I guess I had to upload the media items, but pretty much. So now I added the component again, the hero, and this time we're going to use image first and we're going to we have a image about the hive brain and we are going to I think copy items in. We can copy components via control c and controlv into
different places on the page. Um, I guess I'll do that later. I think I'm going to add a text A heading. I wanted a heading. So again, this one it's the same component. It's just different configuration, but I have one slot that I can put components into. So I'm going to update the title here to be I think join the hive mind. And then I'm going to
change the heading size. And now I also am going to want another text component. So I put that on here. So I'm going to go a little bit faster here. We see our text. Great. Uh I think I'm going to fiddle around with the image because I have sizing on here. I'm not going to get it quite right because of my CSS skills. Okay. So the other
thing I want to show here is now I'm going to controll Z and CtrlV for the whole hero itself. So I basically copy now all the components into a new se into a a new instance that it's going to copy. And now I can basically start to make this hero component look a little bit different by switching the image to the other side. And then of course
I'm going to go through and I'm going to update all of the text here. So the component is the section is different. So now I have different text, different image. Um, so I started I basically made the hero once and now I could copy and paste it multiple times to sort of not have to do so that grunt work again. So I think I'm going to want
a button on here. And again, I think in this case, I'm just going to copy and paste the button from the first component. And then I'm going to rename it. And I think I'm going to accidentally hit controlV a couple times and get the button in the wrong place. So I have three buttons there accidentally, but I can just easily drag and drop it to the other
component. No problem. I can delete the extra one that I don't actually need. So this is sort of the very basic of our homepage. We'll we'll add a little bit more later, but basically we have three hero components each with uh a slot where we put other components all static content right now. So not connected to like nodes in any way. Okay. So I think that is
the end of this one. We think what do you think? Looks great, right? You would come to the site. Yeah, you would come to the Okay. So let's go to the next slide. So, we're going to add a view um to this to this site to this homepage. So, I've actually I don't know if I show making a view. We'll see. Okay. So, I made a view
earlier called show teasers. And this is basically a view that list teasers. And this is our shows. You know, we imported stuff about our actual TV show information. We have TV shows that I happen to like. It doesn't look great now. So, right now the teasers are not controlled by Drupal canvas. So, not, you know, not looking super great, but we'll fix that. Um, so this is
just basic view. I think I didn't have to actually change anything besides going through this screen. I made a view of show types and showing teasers and I showed five of them. And after I get to the next screen, I just save it. No more configuration. So if you're afraid of views then this question. >> Okay. I any better? >> Okay. All right. Let me know if
I drift away from the mic. Okay. Yeah. So basic view and I really didn't have to do anything. So this teaser that you're seeing there is controlled by manage display. So it doesn't look great that part, but we'll fix it soon with canvas. Okay, so content templates. Um, in core you have manage display and if you don't install another contrib module, this is sort of how you
determine what is everything is going to look like. You can control the order of the fields. You can control the field formatterers and their settings. Um, and also you can create extra view modes. So you have full teaser with the standard profile search related ones but then you can create new ones yourself. Um this is where you would create new ones. Uh so canvas templates override the
view modes and right now you can do full teaser and all the rest. And so this is the full view of a node on my site before I do anything. Basically after I imported the content types not, you know, doesn't look great. Um, so all right, we're going to create a show template. All right, so I go over on the right and there's a little icon for
templates and then I'm going to add a new template. Oh, I realize this part of the screen is small. So I'm going to say add a template for TV show and full content. And now it's same as the page. I just have an empty canvas. And so one point I want to make here is I could basically make this like I made a page and I could
not not connect it to any fields. And potentially you might want to do that if you don't actually know what type of fields you want on here. Now, maybe you just want to make a template of what the show will look like and you'll show it to the client and you'll show the client be like, "Oh," and the client be like, "Actually, we don't need anything about
the uh network or we need more information about a show and their crew." And so, basically, you can make it look the way you want it and then figure out the data later if you wanted to. In my case, I made the content types Okay. So, we're going to drag components on the same as we did before, but every prop on a temp, not every prop, but
every prop that has a matching field type is going to have a little linker icon up there. If I click that, it's going to show me the available fields for that prop. So, in this case, there is a show image. And so, I connected it to the show image. So, I can switch shows and automatically it's going to switch to different images and the different title. Um,
I'm going to mess with the ratio again. Again, I did not get this. Yeah, great. That part. Great. So, switch. Now I can see. Okay, I can see the full image of any particular show. So, now I'm going to add some I'm going to drag this to the bottom. And now I'm going to link the text via that little linker icon to the summary uh field on
the show. I could link it to the description of the term. Not going to do that. And I can change the text size if I wanted to. All right. That's the very basics of connecting templates to fields. You have a little anchor icon. Canvas knows which fields will match to which props. Uh, so linking to props, you saw that, you know, I had very limited options because
I only had one image field that would match an image prop and I had the ability to link to the summary field because that's a formatted text field or I can link to an entity reference that also has the matching field type on it. So I could have put network uh which also had a summary field on it. I think there's only like one level right now
of connection. And I can't go if the network also had a reference to something else. I couldn't go 3D. Okay. So linking to props, they much match the field like the prop type must match the field type. It must be if it's a required prop, it must be a required field. So you know you always have a value and it must match the cardality. So if you
have a multialue prop, which hopefully we'll have in a week or two is the ability to do that well. Um, it must be a multialue field. Okay, so the TV show fields, this is what I have. I have a two dates for like ended in premiere. We have the official site, which is a link field. We have a rating field, which is a number, and a show
image field and a status field for like if it's currently running or not. Okay, so we're going to add more components to our template. And we're going to add a button label. And I'm going to speed this up because this is kind of basically we're doing the same thing we did before where we're adding it and we're linking for some reason that stops it. Okay. So in
this case, the label here for the button is going to be static, but the actual link is going to be dynamic depending on the site. I'm going to change the button size. Oh, freaking Oh, I don't know what happened there. I think it was a video edit problem. Sorry. Okay. So, now I want to add a a two column basically little layout. So, I'm going to put
that and I can drag the existing components. And this is just a component that has two slots that I can drop drop stuff into. So, now I'm going to add here. I'm going to add a little component that I call label value. And basically, you have a label and then a value that you want to put. So, I want to I'm put premiere here as the label.
And then I want to connect it to the date of the premiere. But I can't see the date here because this is a string field and a string prop and the date is a date. So, what I'm going to do actually is I'm going to add another component that has a label and then a slot. So, basically, I can put anything in the slot and then I'm
going to have a date component that's going to match the date What? Okay. So, I'm going to call that Premiere. And now I'm going to go over to the right and I'm going to say, okay, give me the date component. And this is a very simple component just like number except it has the date format. And I could choose a static date, but I'm going to link
the date field of the date that the show premiered. So now we have a little bit of overlap. So I'm going to change the prop to be or the column sizing to be different. I'm going to add another label value component, in this case network, and I'm going to link it to the network entity reference name for the And then I'm going to link it to the
term page. I think that is all for the show. I'm going to switch to look and see. Okay, for a different show, it's going to look different. Great. Cool. All right. So now we are going to go to publish the template. So basically any changes that I make on in the templates are not going to immediately um affect the site until I publish them. So I could
have multiple templates changes first. See what it looks like in the editor. And the editor does use your theme and then I'm going to publish then all the changes would go live at once. Okay. So, basically, I'm going to look at this look at the template and then I'm going to look at the live site and confirm my changes are not there yet. Still have the manage
display. Look, and I'm going to go to publish. I have one change. It's going to say, "Hey, you can publish a template." And voila, I reload it. Yay. Great. Looks better. Looks like what we saw in the editor. Um, I'm going to look go to other TV shows to make it look make sure uh similar. Okay, great. So, it looks like the other ones. I did realize
that I missed a step in the video on the page for the homepage. I also needed to I did also publish that. I just forgot to put that part in the video. Okay, let's go to I want to fix the homepage now. So the homepage, we had the the components that looked okay and then we dragged in a view and the view just showed old school teasers
which didn't look great. So we want to fix that. Um so we're going to add a teaser view to make that look better. So the first thing we need to do, we want to fix this thing at the bottom here is we want to add a teaser So, we're going to go over to teasers and we're going to or templates. We're going to add for the show
content type. We're going to select the teaser view mode. And again, we start with a completely empty um canvas so to speak. I coined a phrase there. Okay. And if we look here, what I want to do is actually when we looked at the homepage, I like I like that hero for the I like the hero that I configured for the homepage for the teaser. Obviously, I
want the content to be dynamic, but I'm going to make a pattern here. So, I'm basically going to call this pattern image hero image left. I'm dyslexic, so I'm really glad I got that right. Um, so I'm going to add it to my pattern library. So now in addition, when I go back to the template and I could add this to pages, if I go up to
where I was adding components, there's a patterns tab and I can drag that on here and now I have the um basically what I had on the homepage and then I can start to link that to uh my dynamic field content. So, one thing to mention about this is patterns are not once you drag a pattern onto the page, it is not linked to the pattern. So,
actually, you can't update patterns. But even if you could, they're not they're not linked. So, if you deleted the pattern later, it wouldn't delete from your template site. So, it's just a way to sort of have preconfigured components you can drag on your page. So here we basically I dragged I had the components that I wanted and I'm changing them by now drag uh linking them to
the dynamic fields of the show. So we have the image, we have the title and we have the uh we're linking it to the show and then we have a summary field on the show. So I think it looks better. Does it look better than manage display? Okay. Even with my CSS skills, it's still mine and claws. It does look better than manage display. Okay. So, we
generally like it how how have it how we like. So, now if I go to the homepage in the editor, it does pick up the changes. So, now I can see that the homepage does look better. Like again, this is not live on the site yet. If I went to the homepage on the site, it would still look not so great. But in the editor, I can
see. And so, now I'm going to publish my template. I think. Yes, I'm going to publish my And now I'm going to go to the live I I did not publish the homepage change. So I'm going to go back to Drupal Canvas and I'm going to go here and I'm going to set it as homepage and I'm going to publish just the change to make this my
So configuration update and the only configuration update we have now in canvas is setting the homepage but in the future we might have more. So now when I look at the homepage it's my site my page that I built and then the teasers that I built for the show there. So cool. You could not do that in Drupal so easily I think a couple years ago. So,
all right. Now, we did the view mode there. So, a little bug here. You might have noticed that when I was viewing the teaser, I had the title in two places. So, we have a bug where when you're showing when you're editing the teaser on the page, we don't want to show the o global regions. So, you get an idea. Okay, this is just a teaser. So,
the title should not have been there, but it's not going to affect your live site. It's just a little annoyance. Okay, so let's look at the progress of our site so far. Okay, so we have the homepage. If we clicked a site on the homepage, we go to the show page. Each show page is going to look the same format but different. We can go to the
network page. And the network page automatically is going to pick up our teasers for the show because by Drupal 4 is just network uh taxonomy pages just show teasers. So, it's going to automatically look better. And if we go to the official site, actually stopped it before the page loaded because I don't want to show like HBO site and let's just copyright things. But basically, we have
the link to go out to the official site. Okay. So, that's the progress of our site so far. All right. So, now we're going to add episode templates. So, we want to list the episodes on the show page or the newest episodes onto the show page. So, I'm going to Oh, yeah. I did this really fast because basically we're doing the same thing we did for the
show page, so I don't really want to take up our time doing it. Basically doing the same thing. We had templates for nodes, full content, and teaser. Now, for episodes, we're going to have full content and teasers. Um, I think the only thing I did different here is I did a bunch of sort of copying pasting again. I started with the hero from the home. Oh, and
I started with a pattern in this case. Um, okay. So, I'm going back and forth. I actually, one thing you can do, one thing I was I guess happened on this one is I I went to the full content template. I control seed some stuff that I had set up and then I control V onto the teaser. So you can go between pa like pages and it's
not just on a single page where you can control crl +v you can go like between two templates you can go between two pages one thing you cannot do but I don't think we stop you from doing it is if you take from a template which has linked fields and then copy paste that somewhere else where the fields don't actually make sense I think right now you
would get an error in the future we would stop you from doing that put an edge case we didn't catch. so now we want to add the cast member member component. So this is a component that we made the stuff that I showed you before was like individual components that really have nothing to do with the TV site. We built it to look like the TV site,
but all the individual components were not really TV related. But now this one is going to be a cast member teaser SDC that we're going to make specifically as one whole thing. So it's not going to be sort of atomic design. It's definitely not like an excuse to add my dog's picture to the site. Okay. All right. So we're going to make the cast member teaser view
mode. Okay. So we're going to make a template for cast member. And in this case, we're going to do the teaser. I don't think I do the full view mode for te for cast member in this demonstration. Um, and again, we have a blank slate, but now I'm going to search in components for cast. And so I have a cast member. Um, and this is Gracie playing
lassie. So we have default values here for all of your examples, for all fields you want to have examples. But now I'm going to link it to the actual values. So it changed from Gracie to Jeremy Strong as Kendall Roy. Um so in this case you know like linking it is super easy. Obviously the STC might have taken a little more work but I don't have to
drag and drop components. So basically you can think of designer instead of me as a site builder they don't want me to have to like make it look perfect. They're pushing a perfect SDC or perfect as much as I can get it onto the page. Um, and then I would link the fields as a site Okay. All right. So now I have a template here for teaser
cast member. Um, so now we're going to add the cast member view. So we can put the view of all or a limited number of cast members Okay. So again, this is going to be a actually it's going to be a little bit more complicated. Did we show the EP? We did the episode view already, right? >> I think I I the only thing I I think
we'll show it here. I think I glazed over the contextual filter here. Okay. So, we're going to add the cast member as teasers. And the important part of all of our views here, the part that's not like super simple is we have to go over to contextual filters and we're going to we want to filter by the ID of the TV show field on the cast member.
Same for episodes. Um, so I'm going to select that and it shows up in TV episode and cast member. And then the other thing I'm going to do is I'm going to, this is sort of the really important part is I want a default value for that contextual filter, which is the content ID from the path that we're currently on. So when we look at a show
uh if the the system path is node/ node ID which would be in this case a show ID. So I'm going to say okay when you drag this view onto the page for cast members only show cast members for this particular site for this particular show. Okay. So I add the contextual filter and I think I show testing it within the views UI if I know a
um okay so one thing here is like oh this is not the teaser that I just created the beautiful teaser of the cast member. So I forgot to publish it. So I'm going to go here. I'm going to publish the change. And now when I go back to the view, when I update the preview, it's going to automatically pick up our new cast members. Um, so I
put a note ID in there for which was the the show here. And that's why I saw cast members for I think succession there. Um, so the other thing we're going to do here is we're going to go to back to the show full template, full view template, and I'm going to add my new view that I just made for cast members. I'm going to drag it
on. And now I see the cast members, but I don't want them single file here. So this is just a views thing where I'm going to say I want this to be a responsive grid. I feel like I went back from the mic and nobody actually mentioned it. So, all right. So, I'm going to just set some minimum widths for the grid do again a preview of
the contextual filter. So, I'm going to show all the I think that's the pit. I'm going to save it. Now, I'm going to go back to canvas. and reloads this page. It's automatically going to pick up Well, it didn't I had to reload the page and it picks up the new cast member view. Okay. So, the last thing I'm going to demonstrate before questions is we're going
to take over the page regions that would usually be in the block layout I'm going to go to appearance of my theme. And if I go to settings, so all I think all themes, I don't know if we checked some sort of compatibility. Uh I'm going to check exported regions and I'm going to take over all the regions. I'm going to save. And so now when I
go to Drupal canvas, if I look at just uh the page that we had previously made, um I'm going to see over on the right. I'm sure I'll get there soon. What did I not do? Not sure why I went there the first time. Okay, I was editing this with QuickTime cuz iMovie was not updatable on my site on my computer. Okay, so if I go here,
I'm going to move. Yeah, this is what I'm going to do. So that hero, it's like the entertainment hive that I had made for the homepage. I'm going to move this to a region. In this case, I'm going to move it to um the footer region. I think you cannot drag and drop between uh like the main between regions. So, this is the content region right now.
And the idea behind that is we don't want people we want people to actually know that they're dragging it to a g global region. it's going to be on all pages of your site because it's not, you know, we don't want people accidentally thinking they're putting something on just this page and having it show up and but it's actually going to show up everywhere. So, we wanted
this to be like a conscious choice like you're putting this in a global region. Okay. So, we're moving it to the footer and now I scroll down and it is in the footer here. So I think I'm going to publish just this change. So I go here and I'm going to publish. So actually I want to publish two changes. I'm going to publish the region which now
is going to add it. So it's actually on the site everywhere. And I'm going to publish the page because if I didn't publish the page it would be in both places because I moved it out of the page into the footer region. So I need to publish both changes. So continue on. The play button does not work in full screen for some reason. Actually exiting full screen
does not work for some reason. Okay. Okay. So now I'm going to go back to the site. And now on my homepage at the bottom I see this footer the hero that we had made previously. And if I go to a once we get down there, it's also there. So everywhere on the site, it would be there. Um, so we're going to go back to Trupal Canvas.
I'm going to sort of show what editing regions is like. So if we go to a particular page, the homepage, then if I go to the layers menu over here where I can see all my components, I can also see now all the regions. So, if I click on a particular region, so I'm going to go down to the bottom footer bottom. If I double click then
it's going to gray out the rest. It's going to show me, okay, this is the footer area that you're now currently editing. And so, this is just like the main sort of canvas area. I can drag um stuff on there. So, I'm going to I made a view called episodes list. And this is just a view that shows the titles of the episodes. And then I'm going
to make a that says I'm guessing newest episodes. We'll see if I remember what I put. Ah, so the color is wrong. So I'm going to switch the header to the secondary color. Okay. So I want to change that title there to newest episodes. And then I think yeah just checking how it looks. I assume that I will publish the changes. So now in the footer area
we have uh the that sort of hero and then we have I forgot to link the images for the episodes to the actual episode pages. So I the buttons show up. Okay. So this is a this is the full content page of a celebration. This is not one that I really pulled out of an episode. So I think that is the demo with 10 10 minutes left.
Um so questions. Yes. >> Does all of this uh export? >> Yeah. So well the pages are not the >> Oh yeah. So the question was is all of this config exportable right? Yeah. Okay. So the pages are content entities so they are not exportable like but now core has default content so you could put them in a recipe but the templates themselves are uh in the
far back. >> Yeah. So the questions is there permissions? So the permissions that we have are the sort of regular permissions for pages like create, edit, administer I think and then permissions for can you access the JavaScript component editor permissions for publishing but to publish something you have to have the ability to update it. So I if I have if I want to publish pages I have
to be able to edit the page and for same for regions and same for templates but you could have somebody say that can publish only templates can't publish pages can't access the JavaScript editor there is not permissions currently around individual like components um so yeah is that answer the question um up front there >> can you export unpublish changes >> can you export unpublish changes. No, >>
it's only when it's published. >> Yeah. So, we use an autosave for everything before it. So, basically, none of the content changes, none of the config changes before they're published. Do they um yeah, do they actually live in config? Um the autosave is not on your browser, though. Like, if you picked it up from another browser, somebody else picked it up, it would be there. Um, in
the future, well, I have no idea when this would be on the road map. There is talk of workspaces integration and in that case, we could actually make saves in a workspace and those would be exportable. >> Um, for the when you're building a component, yeah, for the responsivity, uh, how does that work? Can you do different sizes? Is it is that just overall? >> Yeah. So,
I didn't demonstrate queries or anything like >> Yeah, you could. Oh, yeah. The question it was the >> responsivity. >> Yeah. The responsivity of the components. So basically it depends on your CSS. Yeah. Yeah. >> It's not something that's in the UI you would use. >> No but that's >> it does have and I didn't show this but um this is I think this is my canvas
site. Okay. So I don't think I showed this but if I look at the um editor in the preview here is oh yeah this is a particular pa p oh that's a template if I look at pages and I actually just noticed this today we don't have preview for templates but I think that's just an oversight. So if I look here, I can preview and then ignore
this menu here. Uh I can look at it in different widths. So that's desktop. I guess that didn't change. U mobile. So I can see how it looks. So yeah, it's my responsibility to write the CSS to make it responsive, but I can see in the editor whether it is or not. Yeah. Uh from Ithaca. I'm from Ithaca. Okay. Uh you mentioned multicardality as something that's like
coming soon. >> This is something I've tried to do. So um do you know how that's going to work in general? Like say you have >> you have I use paragraphs a lot. I know that's kind of a whole separate ball of facts. Yeah. >> how is do you know anything about how that's going to work? >> I do know because if me and my teammates were
not here, it' probably be done, right? Um so the question was how is multicardality going to work? So in an SDC or a code component, you're going to mark something as having multiple values either unlimited or or a certain amount. So if you do that, then it will only match with fields that also match that same cardality. Is that I'm actually not positive if it's unlimited maybe
you'd be able to match a field that has two, right? Because that should still match. But don't quote me on that. Um but yeah, you would basically only be able to match the same cardality of Yeah. Uh okay. Um nobody else from that table. >> Um in canvas when you're when you're making something with the Wizzywig editor, there's limited text formatting for the Wizzywig. >> Yes. Does
your other node type for use content templates also have to use that limited wizzywig format? I can't remember. Oh, yeah. The question was text formats with templates. I actually don't remember how that works. I imagine it has to match. I think the I think the allowed tags have to match, but I'm not positive. So, sorry. Uh, back there. >> Uh, so say you wanted to like display
your show. Yeah. Different template for a live series versus a series that's ended. Is that capable? >> Yes, it is capable. >> Oh, so the question is, is it possible that you could show a different template based off a condition? So, it is not possible with just canvas. But I would have loved to spend more time demoing this. Theoretically, you could do that with views. So you
could make a multiple multiple full teaser modes that you would call something else. Multiple few full templates. You could have a view that displays basically different templates at different URLs. And you could have that you could do it with views magic. Basically, I'm I'm almost positive it would be like advanced view stuff, but not that advanced, but you could definitely configure that. I definitely I haven't done
it, but I'm like 90% confident that you could do it if you spent an hour with fuse. Um, back back there you work with Drupal's core translation. we would Yeah. So that so the question is does this work with Drupal's core translation? Um no right now it is not multilingual. That is definitely on the road map. Um there's what would they call symmetrical and asymmetrical translation. Symmetrical
is same layout different content like so on a different language you can't actually move components around. Asymmetrical would be totally different components on different languages. The first thing on the road map is symmetrical translation where the idea is that um you would have the uh you basically the same layout for all languages but you could change it. it I think it would work for templates actually right
now if you saw a page well so somewhat work. So if you went to a page in a different language, the linked fields, they would show up in the correct language. The thing that would not change, and you saw in my templates, is I put headings on there that were not linked to anything. Those would not change. So if I said latest episodes in a heading, that
would not change. Uh but potentially the actual teasers coming back from the view, they would show the right ones. So it's sort of right now it's a mixture. First thing on the road map is symmetrical translations. Okay. In the plaid shirt. >> Could you talk a little bit about the road map in terms of like the timing of the next? >> So the two things that I'm
working on is next or my team is working on is uh translation and then actually I'm not positive one next thing. I'm not gonna say what the next >> yeah translation I think is what is planned to be the next thing. But there was a video yesterday or not video it will be a video soon but there was a presentation yesterday by Larry and it was like
next step for Drupal canvas. I didn't actually see that so I should know but I if I had gone yeah >> drupal-canvas.com >> Whoa. That's the road drupal.canvas.com canvas.com. >> Don't make me type. >> As long as it doesn't have an X. My X key is not working. Not working. Well, >> what? Okay. So, yes, multialue props, uh, AI tooling, entity reference support. That'll be great. Uh,
multilingual translations, image style stuff. That's great. Advanced content workflows. Oh, workspaces. That means workspaces probably. Uh, editing CSS, CMS content in Canvas. So, basically being able to edit a node in there. Um, restricted slots. So, you could, I guess, only put certain components in certain slots. uh additional media types documents remote video SSR >> server side rendering SDC's are rendered server side this would be for job
for code components uh list builder and then form builder so wow a road map what a thing >> have you done usability testing on this UX >> yes not sorry The question was, have there been usability testing on this UX? >> As far as I know, yeah, like it was built by a bunch of designers that UX testing and then like sources going through that. >> Yeah.
So, the part of the answer was yes. You know, the front end was made by designers with UX feedback. Uh, we have a product called Aqua Source built on top of it. um we're doing UX testing on that and like the canvas UI is very similar in in our uh SAS product. Um, the other thing I think really to note is like when we were first developing
this, like we had a back-end team and a front-end team and the front-end team could make features that weren't necessarily connected to the back end yet, but as different than a lot of Drupal development, our the backend team was not telling the front-end team what to do. The front-end team was making stuff the way they wanted it to look and then they were telling the backend team
like hey we need to make this work. So it is a front-end designed now single page app that was made by front-end developers not you know not being told like hey this is our backend this is how it has to work so we were working separately and definitely in the beginning and so I think that is um shout out to like the my co-workers and the people
from the community who helped with that part I think is very different from a lot of stuff that is done in Drupal and I think it shows Um yeah follow about accessibility >> accessibility it is accessible I I don't I I wasn't a part of that as the back end but yeah I think there was accessibility testing uh these two and then that's it I guess >>
we have a lot of stakeholders that really want this they really want real time editing but I've been telling them it's going to be two years I mean it's clearly under active development. It's a big investment like this. Did you agree that two years to go to enterprise totally? >> Uh no, I don't know like enterprises. Oh, so the question was is it like two years to
get out to use it in enterprise. So I ran into people at the Syracuse University. I'm going to shout out to them. Yeah, they have 35 live sites right now on Canvas and hoping to what do you say 90 soon? >> What? End of the year. >> End of the year. So people are using this in live and they are early adopters for sure but um it's
not like you know walking. >> Yeah. So it is definitely not is usable now for sure. John >> I was wondering about concurrent editing two editors open the same page at the same time what you expect. we lock that out. We I mean you can edit the same page on the at the same time but it is very limited as far as like needing to ref like
oh somebody made a change refresh. Um it's not like permission blocked but we intentionally uh because I think mostly from my concern from like UX concerns because you could you know delete a whole container that somebody else is working with inside. So for right now yeah it's mostly not supported. I think that is time. Is that time right? >> Plus four. >> Plus four. Great. All right.
Thank you a lot for coming.
