Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Drupal Canvas unleashed: The future of Drupal is here | Drupal Association | YouTubeToText
YouTube Transcript: Drupal Canvas unleashed: The future of Drupal is here
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
Drupal Canvas is a new platform aiming to modernize Drupal development by embracing a component-based architecture, enabling faster, more flexible, and accessible site building for both technical and non-technical users.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
All right, I think you're ready to get
started. Hope you're all excited about
Drupal Canvas because we are really
excited to show you what we've been
building the last uh 15 months. Um, I
know you've seen plenty of demos in
Dre's notes. This is going to be a
little bit different than what we've
done before. We have less than 20 slides
total. We're going to spend the rest of
the time on doing live demos on canvas. So
So
expect to have you know some exciting u
times and you know how life demos are.
>> Yeah, we all know what that means. Uh
there's a chance that we will need to
fix some stuff on the fly but we will
manage that uh between the two of us. Uh
before that uh let's get into some quick
introductions. Welcome everyone. My name
is Ben Ki. I a software engineer. Uh
I've been on the canvas team at Aquia
since last August and I led the
development of the JavaScript code
components in canvas which you will hear
about today. And I'm Libmani. I'm a
senior product manager at Aquia. I have
been a product lead for the Drupal
canvas project and I oversee a couple
other products at Aquia as well.
>> All right, we said live demos. So
>> let's actually get off the presentation
just to to begin. Right.
>> We we want to show you a design in Figma
that we pre-built or parts of it we
pre-built. Uh but before we show you how
we built it and why we built it that
way, we thought it was a good idea to
discuss a little bit how how we would
approach this build traditionally with Drupal.
Drupal.
So at the top what you see there that
looks like a block. It's that looks like
a one-off. It's a hero type of element.
We can make a decision about it later,
but what do you think? Maybe just call
it a block now, like a block.
>> I don't know how are you going to
implement this uh destination content
page with that, but uh
>> yeah, of course. So So there are already
some similarities. They're not exactly
the same, but they are similar. Okay. So
we'll we'll come back to that later. How
about those top destinations? That looks
like kind of a listing type of element.
>> Yeah. Although when I talked with the
the client, they said that they want to
be able to customize these, you know,
based on seasonal needs and they want to
do some campaigns on the homepage as
well where they just sort of curate uh
destinations to have. I was first
thinking of taxonomy term, for example,
to pull in a tag in here, but then I
realized that they needed something a
little bit more customized.
>> I was thinking views first because it
looks like a list. So why not use a a
view for that? But then what about the
description above? Do do you know if
that needs to be editable? Yeah, it
definitely needs to be editable. We can
see they have multiple different kinds
of lists in here, >> right?
>> right?
>> They need to be able to create. So,
yeah, you might not be a good idea
because of that. >> Yeah.
>> Yeah.
>> So, this is a conversation I bet many of
you have heard or participated in or
facilitated before and it looks quite
familiar. It's quite common. Um, and
it's interesting to start discussing
something like this. But um you know we
immediately went from design to figuring
out what does the content model look
like without actually thinking about how
are we going to implement this design.
And this is sort of a fundamental issue
that Drupal has struggled with for a
very long time because of Drupal is a
very sort of uh theme and theming uh
customization modeled uh system where
you built markup in your modules and and
sort of in your site builds and then
themes customize that later on.
Basically, we had to start with the back
end because imagine that we built
something in a certain way and then it
turns out, oh, we actually want to
replace that with a view. Now, we're in
a completely different situation because
the template is different, the markup is
going to change, everything changes,
then you might as well just start over
the theming process for that particular
area. So, it is really what theming
means. There is some kind of markup.
It's led by the back end. Then it ends
up in the browser somehow and then the
theming process starts and we try to
make it look like the design if we can.
Although sometimes it happens that it's
just way too hard and and have you been
in that situation?
>> Yeah. Where you had to update the
designs that the client left based on
you know what you can do. But what if
there was a way to actually solve this problem?
problem?
>> Right. So in the previous slide uh I I
saw tightly decoupled sorry tightly
coupled that was a friedian slip. So do
we go decoupled then is that the
solution I mean decoupled has been a
solution that people have been really
successful with for the last 10 years to
solve this problem but actually sort of
brings up another problem which is that
it can be really expensive to build
decoupled projects. The challenge is
that you don't always need all of the
complexity that decouple provides.
Sometimes it's it's warranted but not
always. And then clients are asking why
is this you know website build that we
did did why is it suddenly two millions
to build this? Okay so what do we do
then? Well that's where we go back into
the sort of road map that we've actually
implemented. Uh so Dre actually this is
a slide from Dre notes from a couple
years ago at Pittsburgh. uh he announced
in pitchburg um a new feature in Drupal
core single directory components
>> which as the name suggests you put
everything in a single directory and by
everything I mean your template markup
your styling code and your JavaScript
logic if you need any and they are
exposed as low-level APIs throughout
your system but how about the user
interface yeah single directory
components are great to have that
standardized way of defining, you know,
how to represent components, but you
need more than just um components. You
actually need to be able to use them.
And how you using components today uh
bridge Drupal canvas is you actually
have to figure out yourself how you map
your components. Like you might be able
to use for example the node template to
pull in a single directory component and
then use it in there. But that's not
great for you know the marketing team.
like they're not going to go edit your
note node template to use the the single
directory component. So you needed
something a little bit more and that's
where Drupal canvas comes in and it
connects the components with the use
cases that the marketing team and
development team has for those
components. There there are some
solutions that exist for uh the
contribution for for you know trying to
solve this problem. The challenge is
that they're still sort of very sort of
built on top of the existing uh Drupal
user experience and sort of assumptions
and and because of that uh doesn't fully
realize the need for a marketing team to
be able to su successfully utilize these
tools and that's where Drupal canvas now
then connects the dots. So how do we
make that happen in canvas? We have
talked about single directory components
already. That's one of the component
type the component source that you can
use in canvas. Blocks are the other one.
They have existed for decades. And while
single dire directory components are
great for um static UI output, building
static UI output, you have the blocks
that allow you to run PHP code which
allows you to run dynamic logic. And the
best thing about that is that you can
combine that with SDCs because you can
create an SDC single directory component
to be the output of your block. So you
get both things. Yeah, but it's still
the experience of creating that is it
requires you to know PHP. It requires
you to sort of figure out how to use
Drupal's systems. And that's where we
have this new concept that you've maybe
heard about JavaScript code components.
>> Yeah. So basically the idea with
JavaScript code components is that you
don't need to know any Drupal. Whereas
with blocks and single director
components, they are literally Drupal's
inventions which is fantastic. But we
want to attract another type of audience
which is what we hope to do with
JavaScript code components where you can
use an in browser code editor and you
can write react tailwind CSS right in
the browser get it compiled ready to go
and all of that with zero configuration.
We're going to show that later. Yeah.
And the great thing about this is that
all of them are used in Drupal Canvas
the same way. So essentially all of
these sources they become just Drupal
canvas components. The content creator,
site builder, whoever is using these
components don't have to care where
those components are coming from. They
just use them as Drupal canvas
components and they all look and feel
the same to be used in the UI.
And that's where we bring with Drupal
Canvas this new unified workflow where
we provide tools for compon component
development for visual page assembly and
and connecting your component and pages
to content and data from your CMS. So
you can use the data from your taxonomy
terms content types media whatever you
can bring those in and bring them alive
using this the components the Drupal
canvas components and then essentially
built this unified experience. So,
So,
>> I think we promised live demos.
>> Yeah. So, be better give some. >> Yes.
>> Yes.
>> So, let's get out of the slides. And of course,
course,
>> we need
>> Let me actually I probably should have
checked on the Wi-Fi before. Does anyone
>> Too many times. Drupal. >> Perfect.
>> Perfect.
That's it.
I would refresh the page just to be
sure. You would refresh. All right,
we got something. All right, so this is
essentially what we've built. So you
this this is something that very closely
resembles the Figma design that we saw
before. It's all built in canvas
components as we can see in here. And
what's interesting in here is we can
start seeing that when we click these,
we have some settings that allow us to
customize these things. Um we make
changes, we can see what they look like
and so on. very basic. You've probably
seen all of this already in previous uh
We're getting support.
>> This is not a canvas back bug.
>> I hope not.
>> Wait, do you confirm?
>> Oh, I pushed one of these accidentally
with my with my uh water bottle. All right,
right,
All right, so what's interesting about
canvas is that we're using here the
settings on the right sidebar. uh which
allow sort of specific settings. So we
things like changing the title color,
changing the accent color. Let's
actually try
>> these are the props for of your
components. They allow you to customize
how your component behaves.
>> Yeah. And then we have this other
concept which is slots which allow you
to essentially build trees of
components. So place components inside
another component. And how we've
constructed this page is where we have a
section which allows us to set the
background color in here. And then we're
actually placing a grid inside it which
allows to specify how many columns does
this have. And then we can place cards
inside the grid. And then if we go to
the layers, we can actually see what
that looks like. So we have section,
then we have a slot in there. Then we
have a grid with another slot and more
stuff. And you can actually build much
more deeper trees. So maybe once again
uh what is the difference between props
and slots because they are very uh very
core concepts of how we build components
in canvas. So props are settings on the
right sidebar. Slots are to build trees
of components and they are usually used
by actually just dragging a component
inside a slot.
Oh, looks like another snafu for the
demo. We got I forgot to turn off my notifications.
notifications.
>> You did that again. You did that in
Barcelona last year.
>> You forgot to remind me.
>> And then Gabbor sent all of us messages.
Stop at mentioning Lori because he
forgot his notifications on. So now it
happens again. Okay. What is this?
>> So looks like it's an urgent request.
Maybe we need to deal with this now.
>> We're kind of in the middle of something
here. But
>> Balin, can you help us with this?
>> It's a new page. I mean that's quick in
canvas so why not? Okay, let's do it. So
we need a new page for this marketing
campaign and we received a PDF about it.
Okay, so this is roughly the idea of how
it should look like. Okay, then I guess
we should just create a new page now. So
And once my new page loads, it actually
did. Uh that's a completely empty page.
So, you're starting fresh over there.
>> Okay. So, let's give it a name first
because this very important email says
that we need it. And the PDF says this
is called find your perfect match. So,
I'm going to type that here.
And what is it that we're changing here again?
again?
Right. This is this is the entity uh
form that we're looking at on the right
sidebar. This is this is for the page
entity that canvas ships. And I just
changed the title field of the entity by
typing that here. But that still doesn't
uh show up on the page. Okay, let's
start building this page. But okay,
>> you actually need the header and the
footer for this from the from the homepage,
homepage,
>> right? I had that on the homepage. So,
how do I do that? Do I just go and copy
paste that into every one of my
>> You could copy and paste it if you
wanted to, but uh there's a better way
actually. Have you heard of the global regions?
regions?
>> Yes, I think I have. So,
And
here we're using the Stark theme for
this. And I need to actually enable
these. Oh, actually turns out they are
already enabled. So here are Drupal
theme uh regions. And we enable canvas
to handle uh some of these for us. There
is actually a lot of here. Yeah, there's
a lot of regions often in Drupal themes
because of historically the block module
didn't allow you to build sort of
complex trees of components which is
different in Drupal canvas. Um, so we're
just actually turning off the header and
the footer because that's really all we need,
need, >> right?
>> right?
>> So let's actually see if you can if if
we can build out those.
>> Okay, so everything is in the content
region now on on this page that we
built. And what I'm going to do is I'm
going to move the header to the global
region header. And then I'm going to
scroll down if I can remember that this
is natural scroll. Uh which is not
>> we were we were fighting over that
before the presentation. Which way
should we have it? All right. So we've
got the footer and header
>> and header. And
>> how does it look like on the on the new
page now?
>> Looks pretty good.
>> That's more like what we want.
>> Okay. The great thing about the header
and the footer is that it's actually
using the same components, both the
create content and the the header and
the footer. So, if you have buttons or
others that you wanted to place in your
header and footer, you can you can share
those between the different use cases.
>> Okay. And I think I'm seeing something
here that's very similar to what I have
on my homepage. So, what do I do about that?
that?
>> Maybe we could try to create a pattern
out of that because that seems like
something that we're using quite a lot
on this site.
>> All right. So the pattern I'm creating
again, so this is a a component tree
here with a section component and a
bunch of slots and and and props
configured already for me. So I'm going
to just uh create a pattern out of it um
and add it to my library. And once I go
and see this page again, sorry, that's a
different one. Finding our perfect match.
Sorry, this is here.
So, I'm going to just drag it onto the
page and I have it ready. Okay. So, I
got something going on here. Uh, but
going back to the page uh that I
received, the PDF, there is a new
component here. Uh, well, we already
have a grid component available in our
library. But here is a a cart component
that we don't quite have in our library
yet. So, I think it's time to create a
code component. Yeah, let's actually
create one using the canvas code
So then I'm going to go to my library
and create the first code component. I'm
And I actually created something similar
in the past which I have it so you don't
have to watch me type all of this. So
the great thing about this is this is
just a pretty standard um React
component. There's some unique things
about these because of oftentimes you
can't use React on its own. You often
use sort of a set of libraries to build
components with. Uh we are for example
importing the formatted text component
which is a component provided by canvas
in here which allows us to then
essentially safely handle the um
formatted text in here. So we got an
undefined uh outputed that is because I
haven't set up the props yet. So this is
the code component I'm writing here in
React. I'm also adding tailwind CSS
classes because that's built into
canvas. You don't have to use that if
you don't want to but that's an option.
Um, but I'm I'm also expecting two props
here named type title and description.
So, I'm going to just type them in here.
Uh, for the title, it's going to be
sample title.
And I'm adding one for description. And
all I need to do is just type in the
name and it's going to be lower
camelcased automatically. And they will
be passed as prop values here. And I
And I'm adding some demo text here.
>> Nice. So, how how do you actually add
this component to a page? Can you show that?
that?
>> Yes, I can. So, now when I'm happy with
this, I just need to push add to component.
component.
And then it ends up in my library. And
before I use it, let me add a section to
this page
that has a content slot. So I can put
anything in the section and I will get
nice spacing around it. And now I'm
going to pull in the grid component
which also has a content slot. And I can
finally place my simple card here inside
of that. And I will add multiple of those.
And any idea what what happened with the
height here? There is actually some fun
fancy settings on the grid because of uh
the homepage. those interesting grid
layouts. So,
>> right, we have alternating toll here,
the spans preset.
>> So, if you set that to none, I think
that should >> Yeah,
>> Yeah,
>> it's nicely resolved. Yeah. >> And
>> And
>> I think we got it. So, this is this is
quite similar to what we received in the
PDF and I think we can finish up this
page later.
>> Should we show some other uh things that
we have been cooking up on this site?
>> Yeah. So these so far have been one-off
pages, landing pages that you built. How
about the content types? So Dre
mentioned that we now have content
templates. So let's talk about those a
little bit. We actually have one content
template already pre-built in here for
destination. So each destination itself
has u you know it's it's a node that
we're displaying in here uh using this
full full content template. If we go
look at these, we can see that all of
the content is actually coming from the
the content type. Um, I guess to show
that it's not fake, I can actually
change to um another entry. So, we can
see that the content actually changes.
>> So, those are actual nodes that exist in
in in
>> Yeah, they're actual nodes. I can even
show that they are not fake nodes. They
are real nodes in here. And uh I can go
edit them using a form in here. So, um,
I had some, uh, fun time exploring
interesting cities in in, uh, different
parts of the world. But instead of just
spending time on exploring what we
already built, maybe we should
>> include something new. Yes.
>> Yeah. I have this blog post content type
that we can see in here. So, let's
actually build a content template for
that. So, the blog post actually has a
couple fields. It has an author
reference, which references a a person
content type. It has a body, category,
and and main image. Pretty simple.
Should be easy for us to build, right?
So, I'm going to create a new template
in here. Let's choose blog post. Those
are your note types, content types
listed there. And a template, what is that?
that?
>> It's essentially overriding the view
mode for that content type that we have
in here. So, this is overriding the full
content view mode with a template now.
And currently, we only support full
content. Um, but we will be expanding
that later on.
All right. So, it looks like this is
this is empty at the moment. So, let's
actually start adding some components
in. Um, so actually have a pattern for
that nice um uh pattern that we saw on
some other content. And then we can
actually start linking these to content.
You can see that it's loading.
>> What you're seeing here is that the
pattern was already saved with static
inputs, but of course, we want to make
those dynamic. We want to have those
values to be read from your actual notes
from your actual data. So that's what's
happening here.
>> We are linking to a field. Not sure we
have a subheading. Maybe we can use
actually the term in here. So we have a
category. So let's actually display the
category below the the title in here. So
we can go and follow references in here
as well.
>> Like multiple levels of references. So
it looks like the text is a little bit
too big. So let me adjust that a little
bit. blog posts are a little bit longer
than the destination names. All right,
that looks pretty good. Let's now
display the main content here as well.
So, I'm going to use the two column
layout in here. And then let me display
uh the text using a paragraph component.
And then I'm going to select the body in
here. And uh I'm going to adjust the
alignment to left.
And uh yeah, maybe I'll make the text a
little bit smaller. And yeah, that's
starting to look pretty good. Are we
missing anything?
>> Yeah. Can we show the author maybe?
>> Oh, yeah. We have a component for that
as well. So let me just drag that in.
Okay. So what do I have to do this time?
I have to go to the author. Yeah. So
author is another content type. Uh and
there's an entity reference field on the
blog post content type that is
referencing authors. And here we're
seeing that that we are able to output a
field from a reference entity.
>> All right.
Here we go.
>> Looks great.
>> Should we publish our changes?
>> Yes, let's do that.
And then I think what's next is that we
want to build a list to show these blog posts.
posts.
>> Let me just double check that this
actually looks good on the other content
that we have. Yeah, it looks great.
>> Okay, great.
>> So, so listing, can we still use views
for listing these?
>> Oh, you better come show that. Okay.
>> I don't remember when I last used views.
>> Well, it's been a while for me as well.
I I think I still know where it is.
>> Yeah, I think it's under structure.
>> Under structure. What What is the
Okay. So, I'm going to just go ahead and
Um, and listing blog post
and I'm going to create a block.
>> Yeah, because then we can place it in in canvas.
canvas.
>> Yeah, because blocks still work in
Canvas. So, now that I have it, I'm
going to just go and create a new page.
I'm going to name it
blog and in here I already have this
block because I just created it but it I
mean it looks quite plain which is
expected and what happens now is that
you go and override the the appropriate
templates and you make it look good
maybe you connect it to an SDC the
output of it it's uh it's getting quite
complex from here so can we do something
about it in great components maybe
because you have just seen
>> how we can build code components,
JavaScript code components from scratch.
>> Yeah. So I have this destination page
that we had built before where we
actually have this list in here. Um it's
using JSON API to fetch the data and
then it's um you know just displaying
them um as cards in here. So this is
actually another feature that is pretty
powerful which is that you can use
within code components other code
components to build more complex ones.
So, we're using the cards to create this
lists list in here, but I'm actually
going to do the same for for blog post.
>> Okay. So, that's going to take a while
to figure out because that JSON API, I
mean, we bundled a lot of convenience
methods and and all kinds of libraries
to make it convenient, but it's not
quite something we can manage in the
remaining 11 minutes and 49 seconds.
>> I'm going to go with the AI option.
Okay. What could possibly go wrong? >> Yeah.
So, we're just writing a prompt.
All right.
So, it's thinking about what to do about
my request.
>> Oh, it's going telling me that it's
going to create a new component.
>> That's good. >> Yeah.
>> Yeah.
>> Got the content type name right, it seems.
seems. >> Yep.
Oh, let me check if there might be a
different machine name for the block
content type.
>> That's not good.
>> That's not good. All right, let's try to
Going to tell it very specifically that
I need to use the we need to use the
blog post content type. Maybe that helps.
helps. Pretty
Pretty
sure that also was in a canvas bug, but
you know, we've we've seen a lot of
accusations in the last.
>> Okay. All right. So, now we actually got
a component
>> did something.
>> Looks like there's actually still some
some issues that we could work through, right?
right?
>> Right. It's not using the formatted text
component for sure. Uh because we are
seeing some markup here. Um, and and I
think this might be good enough for this
demo because it actually shows that it's
it's able to retrieve the data from JSON
API, which I think it's the hardest one.
Like we can go and make this pretty now,
uh, once we have this. >> Yeah.
>> Yeah. >> So,
>> So,
>> or we could tell it to use the card
component and then, you know, it would
use a completely different format.
>> I think it would work out. Yeah. Um,
>> let's just add it to a page and >> Yes.
>> Yes.
>> be done with the
demo. So I think this is this is a this
is good for a first start and then
afterwards this can be polished.
>> Yeah. What's also cool about what I love
about this is that there's this data
fetch tab where you can actually see all
of the data that you're getting. So when
you're working on those uh responses you
can just see from here what is it that
you're working with
>> except the AI just figured all of that
out. So it's not really needed in this
case if you use the AI stuff but uh it's
very very useful. >> Yeah.
>> Yeah.
>> Okay. So
you have seen that we have created
several code components all in the
browser zero configuration.
But how about if we don't want to use uh
the browser and we don't want to use the
in browser code editor.
>> You want to actually show how we created
this uh this demo site?
>> Yeah. So we actually have um this
project here called canvas CC uh short
for code components starter. Uh it's on
my GitHub. Uh I will also post the link
somewhere. And what this gives us is a
storebook environment geared towards
developing canvas code components fully
set up with the same eslint rules and
same kind of compilation that we use in
the in browser code editor. So this is a
quiet safe development environment for
you to create all your components. And
now you're wondering okay but how do we
how do we move these uh into Drupal? So
we have a CLI tool published for that.
Um, Drupal canvas CLI allows you to
synchronize the components both ways.
And what I would like to show you really
quickly is that I just built a simple
cart component a few minutes ago and
it's not in this uh in this story book
of course and um I would like to
download it to my codebase. So this is
the the canvas CLI tool in action. I'm
going to just hit download. And these
are all the components that you saw in
canvas before. they I can now
synchronize them to my local codebase.
And if I hit simple cart here, I'm going
to download it. And it downloaded it for
me. And after this, the CSS is broken
because that's a known bug in the CLI
tool. We just need to do a a new release
for that. But if I change this line
you can see that my my storybook
instance is back in action. And from
here on, all we need to do is write a
story file for this new component to
show up, which we could do with cursor
right now, but we want to leave some
space for Q&A. So unless you really
really want to see that I think you can
imagine you just generate a new story
file with cursor or something or just
write it manually. I know it sounds
weird but we can still do that and then
it will show up in story book and then
you can make changes either in canvas or
here in storebook in your local
development environment and just
synchronize back and forth.
>> Yeah. And what's really cool? We
actually built this based on the Figma.
We used the Figma MCP uh with cursor to
build this and uh it was it's a slightly
different approach from what we saw in
the Dre notes in the sense that we were
actually writing JavaScript components
and then using the CLI tool to upload
them. But um it's it's it's not
fundamentally that different from what
was there.
>> But in the end these are just React
components and there are a few things
that you need to follow to make sure
they work in canvas but there there
aren't as many. So uh and this project
helps you to follow all those.
>> All right. Um so let's get back into the
couple more slides that we have before
Okay. So RC uh release candidate one has
been released. What does this mean?
>> So it means that it's time to really
start testing Drupal canvas,
>> right? But it's not really ready for
production use yet. You can start
building your site. You can, you saw in
November there will be a stable release.
Until then, canvas is not under the
security advisory. So any potential
security problem will be fixed in public
and that's why you shouldn't run a
production site yet. And we're working
on contract module compatibility as
well. So as you saw in the D note, uh
we've looked at the top of the list of
the module, make sure that all of them
work nicely with canvas. It's not really
so much about making them compatible.
It's more about just figuring out what
does the UX of those modules look like
with canvas because of canvas is quite
different from editing uh with Drupal.
Yeah, exactly. So uh it's not really the
same as Drupal 7 to Drupal 8 migration.
It's more like, you know, just making
sure that uh you're keeping up with the
latest and greatest. All right. So, why
is Drupal Canvas a big deal from or why
I think it's a big deal. So, first, it
will unlock Drupal for everyone. And
what I mean is is is it's both
nontechnical people, but it's also in
the front end developer community is
that it opens up the opportunity for
someone who is not necessarily very
deeply uh familiar with how you design
for for Drupal. Um a possibility to
actually start building with it. Um it
was actually interesting because of uh I
think it was the week after um we
announced experience builder which now
is called Drupal canvas. There was a
long Reddit thread where someone was
trying to figure out like how do I
actually implement a theme in Drupal and
it was like there was no consensus at
all how to do that and felt like we as a
Drupal community don't know how to do it
because everyone was fighting internally
about how we actually should do that. It
also accelerates develop uh delivery
which kind of goes to the same point. We
now actually have a very opinionated way
of how we think components should be
built and you can use those across
multiple use cases. Uh we provide uh no
code tools for for creators who are not
familiar with code to use those tools.
And then we have AI uh which is a
preconfigured AI um environment in the
sense that you really just connected
with your AI back end and you can start
building with it.
So what is next for canvas? Uh what is
what is in the future? Uh on the road
map. So for JavaScript code components,
we would like to zero in on the better
developer tooling part. We would like to
make it the best possible experience to
build front-end UI components and use
that in a comprehensive CMS and a compre comprehensive
comprehensive
system. Um and we know that everything
that you do with code components right
now, they are rendered in the browser.
So of course we will put some effort
into making sure that serverside
rendering is solved. It may not work
with every kind of hosting provider but
we will have some fundamentals
implemented for that and we want to make
it as easy as possible to adopt to this
approach specifically to the hosting
issue where it's like not every hosting
provider might not provide the tools to
do that but we are providing generic
tools that allow you to sort of
implement a solution from outside of
your hosting provider on sort of as a
layer on top of your existing hosting.
>> Yes. And we would like to create uh APIs
for extending canvas. And I don't just
mean module integrations. I mean
extensions that are web apps implemented
in any kind of technology embedded in
canvas and using real time browserbased
APIs to interact with what's happening
with canvas. For example, getting the
currently selected component, adding to
your content, getting the current
regenerated preview HTML. uh all of
these rich experiences should be
possible within canvas and we have a
very experimental API already in place
for that. Yeah, if you're interested in
uh figuring out what opportunities might
exist in the extension uh space during
the Drupal Con, just come talk to me.
I'm very interested to hear what ideas
you might have around that. Um besides
extensibility, we're going to go uh
start expanding uh towards that vision
of allowing uh a creators a
non-developer creators to create site
templates with Drupal CMS. Uh which is
why we have to provide tools for
designers to create components using
canvas. We will also expand to
multilingual lingual um support. So uh
canvas today can create content uh in a
in a single language. U in future we
will add uh support for translating your
content. Uh also right now the canvas UI
is only available in English. So in
future we will be adding support for
translating the UI itself to different
languages. And finally what you
currently have in canvas is basically a
single workspace. Uh you can make
changes across many pages. You can
selectively publish uh from those
changes. But we would like to support
more advanced workflows in in in the
future like scheduling or using multiple
workspaces. All of those those things uh
are on the horizon.
>> Yeah, that sounds great. So if you want
to learn more about a Drupal canvas, we
this presentation was very focused
around how you use Drupal canvas in this
coupled simple environment. But balon is
presenting with fago um uh when is that?
Tomorrow morning I think it is on on
actually how you can use Drupal canvas
in a decoupled environment if you are
interested in that. So that's also
something that is actually possible with
canvas even if it even if it's not the
primary focus of canvas. And we have
another session coming up. You may have
heard about aqua source which is a new
SAS product. And actually a source is
one of the reasons why Aquia has been
able to fund so much of canvas's
development. Uh Aqua Source uses canvas.
All of Canvas is open source. So it is
the exact same version that's in Aquia
Source. Um and Lori is going to do a
presentation about that uh also tomorrow.
tomorrow.
>> Yeah. So if you're interested to hear
more about Aqua Source, uh scan the QR
code to to register for the session or
visit the booth. Uh I believe that they
have the same QR code available there as
well. Looking forward to actually
talking about that as well with with you
all. So key takeaways.
>> Yeah. So the RC is out. You can start
using it. Don't put it in production
yet, but you can start using it. And
canvas is not just a page building
solution. It is a full on site building
uh tool that you can actually build much
more than just pages.
>> And we believe we addressed all the
limitations that come from either
decoupled or coupled projects with
canvas. And finally uh Drupal canvas
takes Drupal to a modern component-based
approach where you know components are
really the foundation of how you
implement your design in in Drupal. All
right. So that's really the the content
that we had for you today. I know that
we are out of time. I don't know if uh
we have a couple minutes for maybe a few
questions and then we do a hallway track
on on more questions after that.
>> Right. So we have a question in the front.
If you're using an existing solution
like patterns UI and you're happy with
that, like patterns UI is a more focused
around the site builder persona. So you
there might not be much of a reason to
necessarily migrate your existing sites
over to to canvas. But if you're
interested in in migrating, I think
Kristen is going to be talking a little
bit more about that tomorrow. So that
might be a good session. >> Thursday,
>> Thursday,
Yeah.
don't have to ask on the spot. >> Yeah.
>> Yep.
>> The question is
What are you do you have a plan to
address that and you don't have the
answer right now but if you don't
>> okay so the question was uh how do we
envision what security implications
there are in having code components that
are written in the UI um that you know
could be exposed to a less experienced
user essentially. Um so actually the the
whole feature of code components first
of all is it it is behind uh permission
on its own. So you can totally restrict
access from content creators and we
actually believe that content creators
will be restricting access uh from
there. Uh in future there's going to be
probably a separate permission to to
create components with the visual tools
without actually having access to code
still. So sort of a very Drupal way of
like having that layered access uh
control in there. Um it is also there's
obviously considerations in terms of
XSS. So that's that's probably the
primary consideration. In terms of like
running code on the server side, it's
all actually right now all of the code
that we write in the code in the in code
code components is write is run in
client side. It's not run there's
nothing run on server side and when we
introduce server side rendering of that
it will be introduced in a manner where
it's specifically secure to run uh the
code on server even if it is coming from
a untrusted user. So we will be
documenting ways in which uh it can be
done. Aqua source obviously is
leveraging code code components and and
because of that for aqua it's also in
the interest to make sure that all
>> and just to prove you that we are
thinking about this I think this is the
only reason why we haven't already done
uh single uh server side rendering
because it's easy to do except for the
security implications
>> so we we are aware
>> but happy to have a follow-up
conversation around that let's do one
more question all right we have question yeah
yeah question.
>> So it really depends on what is the
approach to to building your site, how
you want to sync those things.
>> So the question is how do you sync your
uh different types of components? You
might have SDCs, you might have uh some
JavaScript components and
>> Yes. Are you thinking about the the CSS
styling of those?
>> Not CSS but HTML style.
>> The HTML style.
for example H2.
Okay. So, so I'm I'm repeating it. Uh uh
the the concern was that what if we have
markup also in Twig templates and and
and do we have to copy that into
JavaScript components? Uh you you don't
have to. You can still use Twig. You can
still use single directory components.
They will work just fine in canvas. You
should use JavaScript components if you
have a problem that your uh SDC's cannot
solve or your current workflows or team
structure cannot solve. But there is no
reason for you to to move anything from
Twix to JavaScript components.
>> And what we don't support today is being
able to essentially include single
directory components in a JavaScript co
code component.
>> Yes, we do.
>> Can you import it in
>> Oh, not like that.
>> So you can use them in content, but you
can import them inside the code today.
But you you can put it in a slot if you want.
want.
>> So maybe that's something we have to
look into in future. So then you can
actually really just encapsulate the
components on their own and then
regardless of how they built you can use
them. I
>> think you can achieve that with slots
today. So maybe
>> yeah definitely something to to look
into. All right. Uh we're out of time.
Let's continue the discussion.
>> what and
>> so uh two things uh we actually use pact
which is a more lightweight version of
react when we output these components um
but also please come to my talk with
wolffgun tomorrow and we will have the
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
