hello everyone
welcome to this live session
thank you very much for joining and i
hope we will have a pleasant hour and
also uh
during which we go through uh the
details about the live
uh role editor that was introduced in
1.1.8 and also talk a bit about what's
to come
and also just uh the update that will be
released tonight
uh so just before we start going into
the nitty gritty uh let's just um make
sure that everything's uh all right with
uh all of you so
uh could you if possible tell me that uh
you know that the sound and the the
image are all right and that you can
hear me uh perfectly well or at least
acceptably so i'll go around saying
hello to the first um
[Music]
first few people on so um
nation first hello marius
um
hello marios
manuel bruno antonio
welcome everyone a few names i can't
quite decipher but um welcome welcome
and i'm very pleased and glad to have
you have you here at this time and thank
you once again for joining
so let's see all okay perfect hello
manuel
richard hello
michael
super thank you very much for confirming
all that
so um yes the role editor that was
released within 1.1.8
uh which
brings uh well introduces our vision our
vision to come with how
one can manage first of all how one
interacts with the gutenberg editor
and the extra features but also
ui
changes that quickly brings together
and also
managing expectations when
giving or
allowing users
clients to
edit and access the back end
while only giving them the options and
the possibility to edit what you want
them to edit and not other things that
would
sometimes render a website
now
so
the basic idea with the role editor and
this is just the beginning really
because we wanted to get this first
installment out
to give you first of all the possibility
to remove as i said those quickly
features that might not go in tandem
with the way you work i know that some
of you prefer to have a gutenberg a
native experience with gutenberg and
just have the power of quickly behind
but not have that ui
change that comes
that came with quickly before version
1.1.8
and so this is very important where
we want to give you the possibility just
to remove
everything that quickly brings to the
table
or choose what
you prefer and mix up
your perfect editor experience
so
as i said
the basis of this all is allowing first
of all control on blocks
and i think that this is something that
will be coming more and more and be
uh introduced into the gutenberg world
more and more is this aspect of allowing
you to control how your block interacts
with your user users or clients
and
when i'm talking about this i'm talking
about the the literal
aspects of defining which
controls and properties a user can
access while editing a blog
and so with this first installment of
the role editor
we have allowed
a few um
a few properties to be
enabled or disabled
and i'd love to have your your reaction
and your your your you know your
what you think about this uh first
installment of the role editor and see
what we where we can go with this
because
in the end i think that the role editor
will give the possibility to become a
sort of
block builder now i
don't want to go too far with this and
give too much information
but
i do think that the role editor in
itself can
extend that vision of
a block builder without having you to
ever go into the block builder coding
anyway
enough of that let's review
first of all what the role editor is in
quickly at this very moment when we
released 1.1.8
so
let's
activate the screen sharing super and
i'm already on
the role editor now how do you access
the role editor well this is pretty
simple you can access it through the
quickly menu and
access it through the role editor now
the role editor menu is only accessible
for the admin
role uh
because
we think that the
the only user that should have access to
this
uh feature is the app administrator so
what do you have when you come to this
page well first of all you have a list
of all the rules that are available on
your installation now we just go through
the normal um process of listing all the
roles and so any role that you have on
your installation will be shown there
now some of these roles might not be
useful but in any case we list all of
them so that you can have full control
on every row
by default the administrator gets
control access to most of the properties
they're enabled by default
and let's just go through them very
briefly just to see what we're
controlling first of all you have the
gutenberg editor panel now with the
gutenberg editor panel what you have is
really controlling what features and ui
changes quickly brings to the table that
you want to either activate or
deactivate for
some of your users for yourself because
this is very important also the role
editor lets you the administrator
control what you have on your editor
view whenever you're editing
because what would be the point without
a certain control on that
so the gutenberg editor panel really
controls the ui changes that quickly
brings to the table
after that we have the global block
behavior
now the global block behavior is
basically a control on the quickly
blocks and how they interact and how
they
show their interface to the user or the
user who is editing
currently editing in the editor
we will go into more detail in a few
seconds on that the block toolbar is
basically
the control on the toolbar that is just
above the block
controls when you select a quickly block
that block toolbar
redirects you to the controls
for example them
the global styles and everything but
also allows you to control what the
rich text element or not even the rich
text basically the toolbar that comes
with the block when you select a quickly
block
and allows you to control what you want
to appear for example quickly controls
dynamic values or rich text styling
we'll go into more detail about that
just in a bit miscellaneous
really deals with all the features and
properties we can't really
give a specific category to and for the
moment really concerns uh pseudo classes
and elements
finally uh you will be able
you are able to control
uh what blocks appear for every user row
uh for example you you can control in
detail what blocks what quickly blocks
you want to control and what you want to
appear for the user and what the user
can select now just one little precision
here
when you select or activate or
deactivate a block in this list you are
not removing
the existing blocks on posts or pages or
templates by this i mean
the block if it exists on the post will
still be available
now we might
uh go to a further
control where you can specify that if
that block does not appear in this list
or is not toggled maybe a new property
you will be able to say
i don't want it to appear at all or i'd
like to appear that's something that
might come at come up in the future
because for example
i do know that um some blocks here are
technical and might not be uh
useful for your users and might just be
useful for yourself for example i just
see now um
for example
a block we will be introducing just uh
tonight soon
might not be useful a fragment either a
hook block neither so all those blocks
might be in the future we might just
allow you to remove them completely from
the editor
so that's a quick overview of what the
role editor is
now let's go into more detail
so as i said the gutenberg editor panel
really allows you to control in detail
what aspect of the quickly changes to
the ui you want or do not want on the
editor so for example the quickly design
library allows you to
remove or show that little um
well let's go to and see it
will allows you to control
how the design library appears on your
editor i know that some of you don't
want that to appear so we've removed it
and same goes for
the the heading the the header toolbar
that allows you to control uh the
responsive modes and the block title
post title as well as scaling and
dynamic preview
as well you will be able to remove the
quickly global styles toggle that
specifically allows you to bring up the
global style editor so
how does this work well simply you go to
the role editor and you take one tick
whatever you want to show so let's
remove the design library
the header toolbar and
why not the top the quickly global
styles i was talking about earlier so if
we just go back
automatically
all those features are removed now when
you remove
that header that quickly header
you will notice that the post title
reappears
on
the editor i know that we had a few
comments about
the fact that the post title had
disappeared from the editor itself so
whenever you remove that header toolbar
the quickly header toolbar
with the post title
then it is automatically brought back to
the editor itself
as you can see the
toggle has been removed and
so on uh with the the the gutenberg
editor i think that the the settings are
pretty much um they they explain
explanatory
uh they explain themselves pretty well
as you see you have control on how
the title appears on responsive modes
where whether you want to hide them or
not
now an interesting point here is
we can remove uh responsive modes
if needed
or necessary for users so please let us
know what you think about
giving the possibility to remove the
responsive modes
or not on the the editor
if you find it useful or not we'd love
to hear your your
your your opinion on this
next up you have the quickly navigator
that uh is a quickly edition now i do
know there's a lot of confusing
confusion here about the different
navigators and why we don't remove them
or remove the gutenberg navigator by
default now let's just go to the editor
and see what i'm talking about so as you
can see here um this is the quickly
navigation or quickly navigator now this
negator is completely separate from the
list view that is a gutenberg edition
so it's very important to know that when
you use quickly
you basically get a new navigation
tool that
is very much geared towards working with
quickly we also find that it's much
easier to manage and use so we do
recommend using it when using quickly
because it does bring to light
a menu context which allows you to
control a lot
a lot of aspects of quickly blocks so
very important but i do know this
confusion and there has been confusion
about these two
uh navigators the list view and the
quickly navigator so now you have the
possibility to simply remove either one
of them so let's go and see
let's say i want to keep the quickly
navigator because it's my baby so i will
just simply
remove or hide the gutenberg list view
and if we go back to
the editor
you will see now that that list view has
disappeared so no more confusion no more
unnecessary buttons and icons
header that will come in you know
disturb you you can either have the
quickly navigator or the list view it's
up to you and i think that that's
something that we will work on more and
more as the role editor um
feature progresses in time is giving you
the possibility to play with gutenberg
and quickly either have both or just
choose which
poison
which world you want to work with and
either work with both or not anyway
that's always up to you and we do not
want to come and force uh
uh
a use it's up to you and how you you
work with it so
that's about it um for the gutenberg
editor view there's a lot more we can
add to it um
also i forgot to talk about the quickly
quick inserter it is
a quickly addition so
you can remove it i know that some of
you love it some of you don't
like it so much so you can remove it the
quick inserter is simply a quick access
to add just with a click a new block
that you can choose and now this quick
inserter i do want to um
emphasize the fact that you can add any
block gutenberg block that is available
in the in the block directory so that
means that it can be a gutenberg block
it can be any type of block it can be a
third party block it can be
a quickly block
uh you have the choice so you can simply
remove that by
removing it there with the the icon the
cross icon and you can add whatever you
want so let's say
i want a column icon a block and then i
want
uh the gutenberg native block the
separator so
you can also drag and drop them up and
down and that means you know
set up the quick inserter the way you
like it and keep that
throughout your editing experience
we use it a lot here and i do think it's
an addition to the the editor you can't
quite yet drag
to the the editor itself but if you
select the block that you want to add
the
the new block to you simply
select the parent either or
you select the block you want to then
append a block to and you simply click
the div or whatever block you want and
that is inserted
directly
so i do think that's a an interesting
feature that we bring with clicky but if
you do want to remove it it's a simple
click so let's go to the role editor
and remove the quick insert and there
you are
the quick inserter has disappeared from
the panel you can also remove it
if you want to keep it but just remove
it
optionally in the global styles settings
so that's
for
the gutenberg editor
ui changes that quickly brings to the
table
now the global block behavior now that's
i think one of the strengths of this new
feature the role editor is
being able to control blocks
in a global manner and this is basically
what you can do at the moment but very
soon you will be able to either specify
what
a default version of a specific quickly
block will be so for example
let's take the heading
block the heading block uh currently
let's
just go there the heading block
currently
if i open the inspector the block
inspector has all these settings so you
can control the tags you can control the
the id the class you can control the
colors the typography but also margin
and padding and then you can go into the
design panel or tab and from there
control
all the the properties css properties
that you would want to now that's the
default way of working with quickly but
very soon you will be able to
select that heading block and say what
properties not only from the primary tab
so what is already available with the
role editor i'll show you in a bit you
will be able to say i want these
properties to appear on the primary tab
but also go into the design tab and say
i want to keep these properties and i
don't want to keep these ones so you
will be able to play
the thing is quickly has been designed
with such flexibility that we can allow
you to control these
features with no problem it's it's
it's very easy to give you that control
without
hindering or
hurting anything that's in the back end
so
that's a very important point so
let's go to the role editor and see what
currently you can control
so the global block behavior comes first
of all with
the quickly panels controls
so
this basically means that you can
control the vision or not of the global
styles the global classes and the
collection
so this is basically accessing
the main
tabs here at the top so that means the
global styles the global classes
and style sheets and the collection
now if for example you don't use the
quickly collection
feature which allows you
just as a side note to
save a block and
just insert it
while not
reusing what already exists now because
there's a confusion here too
uh with reusable blocks which are a
native gutenberg feature
when you add a reusable block to a
reusable
category
that block
is
constant throughout the website so
whenever you insert it inside your
editor you are editing that reusable
block you are not editing a new version
of a reusable block you are editing that
version of it and so the quickly
collection what it allows you to do is
take a snapshot of a block of a
particular box so let's say
i'm taking a snapshot of the section it
will take a snapshot of that section
block and allow you to reinsert it but
without modifying
the basis the the the shot the the
the the basis to the clone basically and
so that will allow you
to
create collections of blocks without
having to
modify them
when you don't want to so that's the
quickie collection just as a side note
but for example let's say that i don't
want that menu to appear
on my editor
and more specifically the
block inspector well i simply
toggle that off and then i can go back
to the editor
and with a simple click you see that
collection that tab has disappeared
and
this is basically what the role editor
is about it's about removing what is
unnecessary for you or for your clients
and
you can imagine you just can remove the
global cells and the global classes
style sheets in an instant
now let's go back to the role editor to
see
you that you can do the same thing with
the conditions the links and the
interactions properties
so for example if you go to
a block
the same old section or more importantly
let's use the heading block but this
applies to every quickly block i do want
to emphasize that
so you have the conditions and you might
not want your users to be able to access
that
specific property or alt are there so
you can set it up on your site do every
modification you want everything is
saved you save it and then in the role
editor you specify what you want to
appear
for the different roles that you have
and
in this example let's
remove the conditions and the
interactions and if i go back to my
block
my heading block you will see that only
the link
property is now there the link modal is
there that means that i think you can
start to imagine what you can do you can
set up a whole website
for your clients and say
now you can go and edit and only have
them access specific
properties and in the future
we will allow you to
restrict access to these specific um
modals and just for example uh here in
the link property
one might very well think of removing
for example the the title or the the
link
referral or the new tab property or even
remove the possibility to go into an
action type and just let the users
specify a static source
or a static url in this instance
this is the idea behind the role editor
it's really giving you
control over what
is available and what isn't
so that's uh for the part about
interactions
links and conditions
let's go back to the role editor and
see
the more interesting part of
uh
designing and uh controlling with the
role editor
so most of the time you don't want
to have access to
the design tab and the advanced tab if
you're not an advanced user and you
don't need access to all those
properties which can be overwhelming for
a beginner but not only because
the role editor
is
the beginning also to
allowing
beginner users
once we have perfected our library
system and our patterns that are going
to come
pretty soon this will allow beginner
users who are just coming too quickly
to say okay i'm disabling the design tab
i'm disabling the advanced tab i'm
importing ready-made
layouts
and this means that if i just want to
change the color of a text of the font
the font color you know the font size i
can do that but i won't have myself
access to those advanced features that
are first of all uh confusing me i don't
know what to do where to go and how to
do it and so just remove them completely
import those designs that are ready made
that you just import in a click and that
you can add very fast and use
quite instantly to make a final product
and i think this is where the bridge
between advanced users and beginner
users can be made is allowing users
themselves to say what they can control
and what they can't and what they don't
want to see
so
in this very instance
as i was saying we can remove the design
tab and the advanced tab on blocks so
what does that mean
let's go to uh the section block and for
example here you see
as you might know
the design tab that allows access to all
advanced properties but also advanced
tab that gives you more control on not
css properties but more on technical
sides of blocks so
custom css
scrolling with also scroll direction
attributes and the tooltip so let's say
you don't need access to all that well
with
role editor that is now possible so
let's say that i want to remove the
advanced tab
when i go on to my blocks now
well that advanced tab has disappeared
that means
first of all
there's less confusion if i don't need
them i just have the primary tab and the
design tab but also you know it
liberates space and we'll see that in
just a bit
that's you see
the block
inspector becomes a block in itself you
can control what
controls are allowed to be uh
visualized and what is not so it is
basically it's a building block of the
block inspector itself
so let's go a bit further
you can now
allow users to see or not see the
classes and the id this is very useful
for example first of all to remove that
confusion
when a user comes to a block he doesn't
want to see the id he doesn't want to
see the class of the block that doesn't
interest him so
we talk it off and that's it
end of story when you come back to your
editor
those properties that means the class
the additional classes the global
classes the id all of those have
disappeared
let's continue
but i think you can see the power behind
this and this is just a beginning
just imagine when you can
have design your theme
and design you know your your website
and say
on this particular block on this
particular block that is i want the user
to be able to control typography but i
don't want him to control color
so i just want him to control the font
size
well that will be very much possible and
this is the beginning
and i think that the power of quickly
is in this also because quickly is so
flexible but also gutenberg gutenberg
allows this flexibility
and that's where quickly allows also
that flexibility so i'm just going to
take a little pause just to make sure
that everything uh is
all right with everyone
so
let's see no comments
yes exactly michael yes exactly
where if you give clients the
possibility to edit you are going to
have trouble so this removes that
possibility without
adding all you know tons of code and
everything it's just a click and you
control what
a specific role has access to
so i see everything's fine uh find
things i will reply to your your query
after after this
so um
going back to the
the the role editor
so you can see the power that means you
remove the
id and class
that means you're removing all that
confusion around the the id in class
you can also remove the hover animation
property that allows you know to add
predefined
animations to specific blocks when
available but this the same goes for the
tag
control and the heading tag that means
for blocks where you can control the tag
that means the div block the section
block and etc
you can control what type of tag that is
but once again if you don't want the
user to have access to that you simply
toggle that off and if we go
to
the post you will see that now i cannot
change the tag i cannot change the tag
that means
if i'm an admin or an editor i can
specify what that tag is but if i'm a
contributor a subscriber or whatever
type of role you have removed that
capability from
i can't edit it but it's still there i
think this is very important you're not
removing it completely you're just
hiding it
the same goes for the heading where you
can choose and this is important
for blocks you can remove tags
but you can keep the tag for headings
which can be useful for
instances where your user wants to have
control over
the heading tag
going back to the role editor let's go
into more detail now
even more detail i might say
so the properties panel inside
the global block behavior
allows you to control
what properties appear in the primary
tab
in the specifics of that block what do i
mean by that and i think that this might
resolve a few
things queries about
what block specific properties means
basically when i when we talk about
block specific properties
those block specific properties are the
properties that are specific to the
block
for example
the section block
has
colors as a
you know you can change the colors you
can change the layout that means the
display the flex direction or whatever
you choose to be the typography and the
margin and padding
the thing is
once again
depending on your capabilities and
what you are when you're editing on an
installation like this one
you might not want to have access to all
of these or your admin or editor might
restrict access to these
so this is where we remove the block
specific properties and we add the ones
we want to have available for every
quickly block
in this instance
let me
untoggle to block specific properties
now if i do that
if i rush back to
my
editor you will see that
the primary tab is nearly completely
mute
what stays is the pseudo class uh editor
but once again you can remove that so
you can
end up with
a block well i'll show you just right
now
a block inspector panel that is
completely and utterly um
black so let's remove that
i think that's about it
if
i'm not
yes
i think that with that we will have a
blank oh i left the the link property
but you can imagine if you want a blank
block inspector where the user can only
control
what he's typing well that is possible
that is a content editing
possibility is superb you set up the
design and your user only comes in to
add content or modify content
so going back to the role editor
when we remove those block specific
properties nothing appears in the
primary tab
but we can
activate specific properties now for the
moment we've only allowed the color and
type of graffiti controls but in the
future we will be expanding that to
every every design property that means
every property that is available or tab
that is available in the design panel or
tab
will be available
to add to your primary
tab and i think that once again this
shows the possibility to really
customize your user experience
so once i've
untoggled that block specific property
if i activate the color control
when i go
to my specific blocks or any block you
will see that i have access
to only the color properties
and
i think you can see where this is going
this is
very precise control
while keeping an agreeable
experience when editing with blocks with
quickly blocks
so
that's the color
control property but you can also
activate the typography control which
then allows you to
have
access to the color properties and the
typography properties
and that applies to every block that
means let's add uh let's add oh well
let's take an image for example which is
interesting
let's uh let's uh
i made it a bit difficult for myself but
no i haven't
uh let's just set the flex direction
here and now
as you can see
for the moment um let's go back to the
primary if i add an image in particular
this one won't give you those colors and
typography controls why well very simply
on an image
it's very limited
what you can do with
colors and typography
in most cases in
every case so what you want to do let's
just save that and let's go back to the
role editor
and this shows you also what the future
can can bring is let's go into
specialized blocks and activate the
image property that means we're
controlling the image
block itself
and this is where we can allow a user to
either specify
the url
but only static that means if on our
image
we have enabled
static
static source as
uh the source as static as a source that
means not opposed to dynamic where it's
not controlled by wordpress but
controlled by the user that means if the
image block the user is currently on
is has a static source that user can
modify that
image so let's go back to my hello world
post and if i go into this image as you
can see i only have access
to changing the url
i don't have any images on this but you
can also add a url or so a static url or
choose from the library
and you see this restricts your user but
allows you on the other side to do
everything in the back end without ever
ever having to really do anything uh so
that your user can't access that
property you simply go into the role
editor say
for images i want my user to have access
to the static source and if it's not
static then he doesn't have access at
all
but
for example if your user is more
advanced you can give him the
possibility or her the possibility
to
choose between those
different sources so you give full
source control to the user that means
that when we go
to the image block i can choose between
the static source or a dynamic source
that means i have access to
every
property available within the source tab
and i think that this is
pretty pretty strong
and already allows you to do a lot of
things
where
you might not have felt comfortable
giving user access to the editor before
and it really just guides your user
because there's not much left there's
just the source it says give me the
source
you can change me if you're not don't
and
in the future will allow you to specify
on a specific block if the user is
allowed to change the source or not
i think you can see where this is going
you see
we're building on this and well it's
it's very exciting so that's the image
block but you also have uh the same type
of control on the video block
as well as the gallery block where the
user can either specify
the static sources
or
the forces control or just remove it
completely because you're uh
controlling those that source with acf
and the gallery is controlled by acf and
has its data coming from acf the same
thing goes for the maps that means you
can allow the user to either have access
well let's quickly see this
let's say that my user i just wanted him
to have access
to the style if he wanted to change the
style of the maps
maps block that means let's insert
the maps
and oh
well i haven't
put the the api on this installation but
uh you can imagine that
your user can control the way the map
looks
just because you've restricted that use
so
it goes
very far
and you have access to all of that and
same goes for the menu where you can
just allow the user to specify the menu
he wants to apply
to that block
and it goes on
well it will go on
so that's for the global um
global block
behavior and that's global that means
whatever setting you apply here will be
applied to every quickly block
but once again it's not intrusive and it
doesn't all it doesn't alter the content
or the properties of your quickly blocks
this is always
over them and doesn't touch them in any
way
if we head down now and we go to the
block toolbar we will see that this is
really controlling the block toolbar
that appears
on when editing a block and more
specifically
a rich text block but in any case as you
can see here for example
what you have control over is the
dynamic values that you might not want
your user to have access to the quickly
controls in themselves that allow you to
uh copy the styles copy the block and
export the block
the safe to collection or adding to the
collection and
removing the block so this
little
collection of
actions
is
included inside them
the the quickly controls
and you can remove those
but you can also remove rich text
styling that means if you want user to
simply enter text without styling it
that's also possible which is quite
useful in certain circumstances so
if i go to the the role editor quickly
and uh remove all of those controls
let's head back to
the
heading block and as you can see now the
heading block becomes the toolbar the
toolbar becomes very simple and simply
states what the block is so in this
instance a heading and that's it
and
in the future um we might look into uh
allowing you to control um
whether the user can
edit the content itself but once again
this is more on a specific basis and we
didn't want to include it on the global
behavior because we find it
too specific you can't
restrict access to editing
content in blocks on every block it
seems a bit far-fetched so that will be
coming also being able or not to edit
content
specifically
so that's the toolbar controls
which really remove any
confusion around using
quickly with gutenberg you see it really
removes that confusion layer if you are
not used to to it
so finally i think that's that's about
it uh
oh yes the miscellaneous well we we've
we've been through that where you can
control
whether
the user has access well let's go
quickly into it whether the user has
access
to the pseudo class elements themselves
so let's say
here for example i can change
the pseudo class element in a in a click
so i can go to hardware active mode and
i can at the same time add my own pseudo
class so you might want to allow your
users to navigate through those pseudo
classes but not add them so that is now
possible
by simply
toggling off that's it the pseudo class
add pseudoclass elements properties
and now if we go back to the block
you'll see that
that add
function has
disappeared that means the user can
still navigate and edit those different
pseudo classes but can't add any more
which can be very
beneficial in a lot of cases
so that's about it for the role editor
for the moment
once again
you can control what blocks appear
for every type of user role
and
they do not it does not remove those
blocks from the already existing pages
or posts it simply removes the ability
to add them to
the post the template whatever
so
a very useful feature when um
giving you know giving access to a user
who will only want to use a few specific
blocks
if that
so
that's about it for the role editor
so i will quickly um
go into the chat to see
what's happening
so
bad cap design no uh quickly won't
create the user roles i don't think
that's the
i don't think that's
well for the moment at least uh
uh the the the scope of quickly what
what we're looking to do but we're not
looking at controlling um
how the user interacts with wordpress in
itself that means posts uh
you know post types and everything we're
looking we're looking at a block
specific
control and i because i think there are
a lot of plugins out there that
manage very well
uh
the the way a user can interact and
what restriction restricting access to a
specific parts of wordpress itself but i
think that um
when it comes to gutenberg that's where
quickly
can play a role and at least with
quickly blocks that's where
the
performance of the you know the the
power of this role editor is is
controlling how the gutenberg editor is
reacting uh
to
to the user
so uh are you planning to extend the
role editor even further so that user
rights can also be edited
you see once again i think that
manuela i don't think that's
the
i don't think that's quickly's role here
for the moment i think the the most
important part is allowing you to
specify what uh
a user can have access to in quickly
when editing quickly blocks and there's
a lot to do there
before going any further and it's
there's a lot to do because it's it's
extremely powerful i just it's it's very
exciting how much we can do
very simply and um well there's a lot a
lot to play on that before uh going any
further
uh andrew mckim confusion around the id
class controls yes i know that you are
very uh focused on that
hopefully we'll we'll have to take a
little time at the end to talk about uh
what the vision behind the the class
system is
uh but i don't think the id uh control
is difficult to understand it's there's
nothing special about that the id is the
block id there's nothing about it so
we'll cancel that out of the equation
directly
um
so
luke with all these features impact no
no no no
well once again uh
this only impacts the back end it's
never loaded on the front end the
conditions themselves uh of how the the
what user roles are
uh and what the features and
restrictions are applied to users
it's not even loaded on the front end so
this can't touch uh webcore vitals it
won't it there is no uh
core there's no consequence on applying
these new features to the back end it's
literally black back back end um
control and it doesn't affect the front
end at all
okay
yes uh the filter block is coming i see
quite a few block comments about that uh
we were working on that we just stopped
very briefly to introduce the role
editor but the block editor is the next
thing and also
as marius uh proposed a roadmap
more general roadmap is coming where we
detail what exactly we're working on now
and we'll be working on just a bit from
now and in the future so we're going to
make it much clearer to you uh what
we're working on
at a specific time so that there's no
confusion around that
uh manuel is there any eta on the front
end filters um
they're basically ready they have been
ready for a bit but once again we have
to just um manage how other gutenberg
blocks uh are
uh
introduced into the the filters because
since we
are dynamically creating the blocks on
the front end specifically for the query
block we have to create the blocks on
the front end it's user created and not
server
rendered
which means that
the we have to make sure that every
guttum block that is uh rendered is
uh specific to that um
to that specific post that's being
queried in the query block so there's a
bit of work on that but hopefully um
there's not an eta not never an eta but
in the coming week weeks
that's it
so uh
um
let's see
hello david
great to see you here
yes
yes it's certain i'll just show that uh
yes yes yes yes
we
certainly looking at uh at a user
feedback and it's it's extremely
important to see how uh
how this goes how uh users uh how you
feel about it i know that we've had
quite a few um
uh comments about it and it's been
positive the the the response has been
positive and the control aspect has been
very positive
hopefully uh we'll see how that reflects
on the real world but i do think
that
at least it will give an idea to other
block creators on how to
to to give this possibility because it's
it's a very important feature i think
that can be replicated on every
gutenberg block because once again
the the force of quickly here is that
when you're
creating a website that website is
directly editable by a user you're not
uh creating a website in a page builder
and then having to take that page
builder and say
okay i want to now translate that to
gutenberg because my user wants to use
gutenberg because that's wordpress it's
a bit of a schizophrenic uh
working relationship here
much better to create in gutenberg
directly and
specify what a user can control or not
control directly
so um
i i do think that uh you will find uh
the role editor much more important that
you might have initially thought of
david i do think that it's a very very
important uh
feature that will give ideas to other
blog creators
so um that's the the role editor now
before we end because um i am
we're taking a bit of time here before
we end um we are we'll be
releasing uh just after this live a new
update that uh is going to bring uh to
the table the code block now a lot of
you have been asking for it and so it's
been it's been made
so the code block is very simple it
allows you access to three main
um
properties that means editing php html
uh the css and the
javascript that goes with it so let's
have a quick look
at that
so
let's go into the post
editor you can do the same thing oh wait
before that let me reset my role
so that
i have access to every
possible feature because i'm a power
freak so i want to control everything
so um
let's go uh let's go here let's remove
the these blocks here that's perfect so
we have a section block and let's say
for example that
you want to have specific control on
access to wordpress functions
so
we've introduced the code block which
now allows you to
specify
php css and javascript
like you can find on many other page
builders so before i continue very
important once again
this is compatible with the new role
editing features which means that
when i add this block by default i don't
have access to anything
i don't have access to the php i don't
have access to the css and i don't have
access to the javascript but they are
separate separated that means
if your user is somewhat advanced but
not quite you can give him access to the
css properties the css editor
why not the javascript editor but remove
the php html editor completely so let me
go to my role editor
and
toggle the php css and javascript
editors so now
let me go to my block and there we are
so
very simple you have the php editor the
css and the javascript so let's do a
quick um
something quickly so let's say
hello uh
oh
this is a block
so let's close that
okay spanish keyboard uh
i like working on french and spanish
keyboards
anyway so uh the block is rendered um
as you type uh so there's no need to
refresh or re-render the block it
renders as you type as you can see here
it goes to the server and asks and
queries it and comes back with the the
rendered
product so in this case i've just done a
simple uh
div with um text content but we can then
open
the php
tag so let's go into there and let's
just echo
let's get
the
id why not
and let's close that you'll see the
errors that's just to tell you what's
happening and why things aren't working
correctly and as you can see
uh here you have
one that is the id of our current post
which is hello world
and
that's about it uh
very simple you simply edit it renders
for you and if you want um it also
beautifies the code so that
it beautifies it for you so that you
don't have to get you know confused with
how you you've written your code so um
let's let's just echo let's get uh the
title for example
and there we are so now i'm you know
that's not how you would normally uh
format your code so let's just uh
beautify the code and um
there it is it's beautified
so uh that works with php that also
works with css and javascript
um
one important thing to note is that you
can tab these so if you just want to
edit a specific part uh you can so let's
say for example
let's see how the javascript works
let's um
add a class to this so that we're
playing with uh let's say um
let's go with beauty why not so the
class is beauty and let me uh
just do a quick um
well well
let's do it let's do it correctly let's
do it correctly oh yes errors are
properly managed so the javascript won't
automatically be applied uh to the block
that means you have to execute the code
before having the javascript and that
removes any uh
event listener that you might have added
in the past it resets the the the dom
completely so that you don't have a
build up of uh
you know
listeners that might not be active
anymore so um
well this is valid so let's just um
make it invalid so let's just beauty
that you see you get
um a description of the errors that are
on your code and um
[Music]
also we're using uh the monaco editor
which means that editing with it is very
comfortable because it it helps you out
when you're
with your coding so you you don't have a
coding experience on uh quickly that is
sometimes painful uh with other with
other editors this is you know it's it's
as if you were editing in visual studio
and
a very pleasant experience so um let's
just uh
query i'll do this slowly so that we see
let's query the selector let's query um
beauty i think it was so there we have
we've queried her
simply let's
add an event listener so that
we know that
when we click on it we're getting
something let's let's do a quick
function i'll do it
like this
uh let's console.log
and let's say
uh handsome because beauty goes with
handsome
uh let's just beautify that just to make
sure that it looks
all right and
is acceptable so now i can execute that
and let's just see so it is executed on
the back end
so uh let's just um which one was it
there hello this is block and as you see
handsome comes in the
the console log so
access to you know javascript in the
editor which is quite useful at times so
you can do all of that and at the same
time you can edit them
the css so that
it's a complete solution your code block
is complete so
with this comes the conditions
that apply to every block that means you
can add specific conditions to that
block so that you um only have it appear
when
an author
is uh the author is uh louis which is me
so
once again the block properties that you
can add to uh
other blocks block quickly block
properties the specifically the
conditions are
replicated here so let's update that
and let's view the post and since i'm
the louis it will appear let's just make
sure that i'm not inventing things here
let's say bob is the only one who's
allowed to see the
the
code block and there it is it's
disappeared so
that's the code block um i think
that's
about it
we'll go more into more detail about
this uh very soon we'll have a specific
video on it um but
that's the
the gist of the code block it's there so
you now have complete control uh over
wordpress functionalities and you can
directly access them without having to
go through shortcuts or
or whatever and so now basically it
opens the door to other um
you know to metabox and uh
other plugins that you might want to
have access to while in gutenberg it
also allows you to uh
to have quite a uh
you know
to bring javascript into the gutenberg
editor which not is not
always the simplest of things to do uh
specifically in the site editor so
that's the code block uh that will be
introduced uh
later this
evening as usual with php
code make sure that what you are
inputting
is safe it's automatically checked
before
being run so you won't ever run into
errors
which will render your your website uh
with not it will never break your your
website uh we always make sure that the
code is safe
before not safe is doesn't have errors
in it so that you can run it but make
sure that the code you input
is uh safe
and that it comes from a safe source
because we don't
run any checks on it
specifically the php um
code the javascript is another we we we
run specific
safeties on it but
most of the time make sure that you um
take your your code from a safe source
uh just to show quickly that the
beautifier on the
the css uh
editor works uh let's just put a border
uh
well let's just
zero
and let's beautify that
and there it is um
this beautification is already ready for
um
a css so that's also very exciting
anyway
that's the code block in itself
will be released uh later this evening
and
uh
i think that's about it for this live
let's just go through a few more
questions just to make sure
i haven't missed anything important
uh louis how soon will there be a table
of content blog
read progress
yes
hello yet um
[Music]
the table of contents block has to be
worked on um
let's say that
it's not an enormous block to push
through so
we'll have to save a spot for it but for
the moment what we're focusing on is the
filter block and the
mega menu
those are the two important blocks that
have to come out
very soon
but um re-progress once again that's we
have to think about the way we're going
to propose it um
because the read progress can be done in
several ways
introduced in several ways so
it'll have to be thought about
yes michael that's that's the whole
point uh
building
trying to build
literally anything with with quickly
hopefully that's uh
well that's what we're we we we want to
do and the beauty of it is that it's all
within gutenberg so it's all contained
and within one single editor there's no
schizophrenia it's
gutenberg is wordpress and will be in
the future so it's very important now to
make sure that you are
in the future
or prepared for the future at least
even websites like udem so yes um fine
fins
it's a it's complex um
um
sort of project there so i would
count you know i would check everything
correctly yes it's possible but once
again you need a lot of uh
features behind you have to be prepared
to code quite a bit because it requires
a specific and personalized attention
but yes
it depends what you want to do with
quickly but yes everything is possible
in in quickly
but there are plugins that are
specialized towards providing that
so once again
you know it's everything's possible
what about header effects
well uh julian that is already
available in quickly if
you quickly go to um
let's remove this block and let's
simply add
oh well let's let's do it with a section
the section block if you go into the
advanced tab the scrolling and more
specifically the scroll direction block
with this and well um
if you enable it and just specify what
action you want
we'll have a tutorial
quite soon coming out on this we're
trying to to build tutorials up that are
of you know that are
available to and accessible to everyone
so
we're spending specific time on that to
make it you know but tutorials do take
time so please bear with us
but
we are working on a tutorial for that
specific um
feature it shouldn't take too much time
but yes you can already with quickly um
[Music]
do exactly those those things that means
uh a sticky you can do a sticky header
you can uh do a shrinking effect
everything is already
provided in
quickly
you have to use it once again and know
how to use it that's where tutorials are
very necessary i do i do agree
bad cap design does
quickly work with multi-site to be
honest we haven't uh
we haven't looked at this
carefully
there might be
an
an issue with um
building the the main style files and
maybe the global stylesheets file so we
haven't looked at this
uh
correctly i'll say unofficially so i
can't say
but
it depends
multi-site is quite a specific
beast in itself so i haven't looked at
multi-site we haven't looked at
multi-site in its um
in its entirety
but
i'd love to know
you know if you have time to just try it
out i'd love to know and uh if there is
a problem an issue we will uh
fix that and look at what we can do
because i'm sure that it's not something
too
too difficult to to work with
and
it if it just means making specific um
directory changes we will do them that's
certain
so i think that's about it
for
tonight
so as uh you saw we've been through the
the role editor that was introduced with
version 1.1.8
and uh the code block that will be
released later tonight with version
version 1.1.8.2
so a very exciting uh
a very exciting block in itself very
powerful block in itself which allows
you to do a lot of things
comes with a nice little features like
the beautifier will also um bring in uh
a minifier also so that
a minified toggle which means that
you'll save uh when you save your
your code we will minify the code on the
back back end and serve that to uh the
user
just before
we go i just want to just to give a
position on how the code block is
rendered so the css is placed in the
head
in its own specific style tag the
javascript is placed in the body in the
footer
and um in its specific
tank also and
the code block is not wrapped
the code
block content is not wrapped that means
that you
when you add a code block and whatever
the content is inside there is no
wrapper i think this was an important
thing to to to to to have is that
nothing wraps that content you are in
control of it so if you want to wrap it
with a div you can but once again
it's up to you so that's the code block
and the role editor
uh thank you very much for
for being there tonight
i hope this was helpful
and as always if you have any doubts any
queries we're
always available for you
and uh we we'd love to have you on the
community if you're not already there
the community on facebook but also on
our discourse uh the
discourse.quickly.com which
is a very good space and has wonderful
users really really um
very uh
you know wonderful users that share a
lot and are very helpful and help with
reporting bugs and
what have you so thank you very much for
being there tonight thank you for
spending the time and taking the time to
to listen
and i hope we can do this very soon
in
the next update
thank you very much and see you soon
goodbye
you