 Hi. I apologise slightly a bit as per slide. I picked a PowerPoint template and I didn't have time to change the images from the ecology theme. So, just quick straw poll. Who here has never heard of Gutenberg before anyone? One or two? So, who has actually tried Gutenberg? Okay, so most of you. So, if you don't know what Gutenberg is, it's the new WordPress editor that's coming in WordPress 5. It's not got a release date yet for WordPress.com. It's going to be coming into self-hosted WordPress. And the editor is block based. So, at the moment with the current editor, we're used to writing everything in one giant text box. But this new Gutenberg editor is basically going to separate out content into blocks. So, we're going to have an image block, a paragraph block, a heading block, audio block and so on. Gutenberg was first released as a plugin in June last year. It's currently got over 600,000 active installs. I think more people have actually installed it. But these are the ones that are active at the moment. And the classic editor will be turning into a plugin. It won't be gone completely. But when Gutenberg comes in, that will become the new default WordPress post editor. The release date was going to be November the 19th. You just after this word count that has now been shifted by the eight days onto 27th November. But that's still actually a busy period for people because that's giving Tuesday right after Black Friday and Cyber Monday. And one of the commentators on the WP Weekly podcast just said, there's no time in the holidays that's really good time for code deployment. So, make up that what you will. So, how did we get here with Gutenberg? Well, if we go back, in January 2017, when the whole talk of creating a brand new editor came out, the WordPress design team asked on their blog what makes a great editor. And they asked for feedback from various people on that. So, here are some of the responses that they got from what users wanted from a new editor. So, they were thinking about what does the current editor do well, what does it not do well, what kind of improvements would we like to see. So, some of the themes that come out in these comments are simplification. Some people are saying current editor is too complex. I want it to be simplified down so it's easier for me to use. Another issue is discoverability. So, some things are basically hidden away in the current editor and people haven't used them just because simply they didn't know that they were there. Then another person has commented that we've had quite a large proliferation of WordPress page builders because the editor as it stands is fairly basic and it can't build complex layouts not without using custom code or using short codes or page builder plugins which have come into the market to fill that need. So, somebody is saying well maybe a new editor should be fulfilling part of that need instead of us using all these other plugins. And someone else has said well the user experience for the current editor is not good on mobile. Let's go for a mobile first approach, get it right on mobile and then other devices and desktop will follow. Early in this discussion this idea of blocks came out so people are suggesting that different types of blocks could be portrayed and styled differently on the page so it seems to be a very flexible system. A couple of other comments I've picked out here which I think are also quite pertinent. So, the first one is from a guy called Mark Wiley who works a lot in the third sector, the non-profit sector and he's basically highlighted the need for new editor to be accessible, it should be portable and the job of the editor is not designing, he thinks it's communicating so perhaps that's maybe a kind of play for something anti-page builder not to let's have it build something really complex with lots of columns and things, it should be simple. And someone else saying it has to be something that covers a multitude of users because there is no one way that people use the editor, everybody goes in and does different things with it so something else we have to be mindful of. And I did a very quick Twitter poll just over a year ago basically saying well how do you add content WordPress, do you go straight in and start writing in the editor or do you do something else, do you create your content first from some other medium and then you go to the editor to finish it off, polish it off and publish it and I thought this was quite interesting that the results here were split and I've put in the link to the tweets and you can read through the entire thread because people were mentioning a variety of different tools that they used they were talking about things like Google Docs, Word, Notepad, Grammarly, Evernote and saying well you know it depends sometimes I'll go straight to WordPress editors sometimes I'll go somewhere else and create my content in and I'll come back to WordPress and finish it part of this workflow I think has to have that assumption in it that people are going to add content from other sources so just summarising some of the problems that we have with the existing editor so if you look down at the bottom we've got the screen options section and there's a number of different options there and in this screenshot I've ticked all of them but not everybody knows that this screen options section is here and knows that these boxes are here and ticking all of them actually opens up new options in the editor I've already mentioned short codes so short codes being used sometimes to create layouts or other effects on WordPress and they're taking the place of writing actual PHP code into the editor which would be regarded as unsafe but they're not really pretty when you look at them on the page when you look back at your posts embed discovery is an issue some people don't realise that just simply pasting a YouTube URL will embed that on the page and then there are many other examples and it's not necessarily true WYSIWYG experience when you use the existing editor because as many people have found you can create something in the editor and then when you actually publish it and look at it on the site it doesn't look quite the same as the way you created it so this is the state of aim of Gutenberg from the GitHub repository where it's being created so we've got three elements I think to this so one of them is we want to create a builder so we're going to create something that makes rich posts effortless so that also incorporates something that is easy to use and I think there's a discoverability element to this as well so where people are using things that they don't know how to use things that they don't know how to use then Gutenberg wants to make that more transparent another aim of the whole project is to win users in other markets so people who've got used to the likes of Squarespace or Medium or Wix to try and get some of that news and basically come to WordPress so I kind of stole this a little bit I was at Accessibility Scotland a week ago and one of the speakers there mentioned these UX principles so I thought it would be quite useful to go through them these are from a guy called Peter Morval so these are seven principles of UX that should be incorporated into when you do any kind of software design so first point of being useful that is absolutely not in question an editor is absolutely integral and essential to WordPress we can't get away from that we also want to need it to be usable we need people to use it the way that is intended to be used and it should be something that people actually want to use, desirable then we need to have people find what they need to use in UI they have to be able to complete their objectives somehow Accessibility is also a really important value so about 20% of the population have some kind of disability and absolutely Gutenberg should be accessible to all of those people credibility the editor has to have people having trust and faith in it and finally valuable so there is a lot of excitement about the potential of Gutenberg it should open up the WordPress project in some regards it should open up the possibility to create custom blocks for example so what do users think of Gutenberg so far so it's been out as a plugin for about a year and four months so I was going to say more about these but I'm just going to put the links in so you can go off and explore for yourself but a few people have done some user testing of Gutenberg and David Bissett has recently posted this post about his experience of high school students using Gutenberg and they seem to get on pretty well with it they seem to take to it really well and had no major issues 10-up have done a couple of different user tests they've done one in June and they did one in November and they found that the system usability scale that they tested on that the values had increased in that time but these are all very small scale studies the first study there only had 40 participants the second one had 10 and the third had 5 and also well in the first one most of them were not familiar with WordPress but in the other two they definitely were so the biggest amount of user testing we've had is from WordPress.org people leaving reviews and we've got now this was taken on Wednesday the screenshot we've got over 1500 users of Gutenberg and as you can see is a pretty high proportion of one star reviews it's actually really split there's a reasonable number of five star reviews there's a lot of one star there's not too many people that are somewhere in the middle but you do have to take this maybe with a pinch of salt because these are all time reviews these have not been separated by version and people who tried very very early version of Gutenberg and got a negative impression then that's not representative of where the project is now because it's been through so much development since but having said that this is a quote from actually a really good post that I just found the other day by Eric Dansler of Imagely who makes the next-gen gallery plug-in huge, huge plug-in over a million downloads and he said he looked to the average for the Gutenberg reviews and it does fall in line with what is stated in the star reviews he says it's clear the plug-in is not wearing potential users and he is one of a few, well maybe quite a number of voices high profile voices who've been saying actually maybe we should delay the release you know that's still not got all the bugs and issues ironed out you know maybe waiting a bit longer and sorting that is the right thing to do so other people have been saying the same include Yustafal Cofiolst and Martin Wiley who I mentioned before and Morton Rand Hennigson so I've just got a couple of sample reviews here this is one five star review so this is one person saying great, easy to use love the block system creates attractive blog posts so they've got a good impression clearly and this one is the opposite none of the editors they've used was instructed to the writing process absolute worst editing experience ever solved a problem that didn't exist created a different problem that didn't exist so this is someone who's had a bad first impression will they go back to using Gutenberg, don't know so some of the other criticisms and concerns with Gutenberg I've listed here a big one is backwards compatibility so there is a sense of worry that once five comes in and Gutenberg comes in are all existing sites going to break and obviously a plug in and theme developers have done a lot of work to avoid that happening but Gutenberg completely changes the meta box system that the current editor has and it all has to be rebuilt in the Gutenberg way and we know that the work has progressed on this but we don't know 100% we can't say with certainty that everything will work another point I suppose the last one just want to say briefly on that one if you are a developer and you think great I want to make my own Gutenberg block then that's good and please try but the barator entry is actually quite high I read a comment on a WP Tavern post where somebody was saying to learn everything that they needed to learn because Gutenberg is heavily based on React to JavaScript library it wasn't just learning JavaScript it was learning a lot of other things and he said I think it takes about 450 hours plus per developer to do this so what about accessibility well back in 2016 WordPress made a commitment to release all new update code that goes into WordPress core and bundle teams must conform with the WCAG 2.0 guidelines at level AA I'm not going to go into depth about what the WCAG 2.0 guidelines are it's a long document but basically they cover the major categories of disabilities which are visual motor, auditory and cognitive and this is basically a requirement this is not a nice to have we have to remember that WordPress powers 32% of the web and then if 20% of them have a disability it is not an insignificant number of people just going to skip over this very very quickly I've got three posts on my blog so don't copy the links down the slides will be available later you can see from these different experiences I've had with testing Gutenberg and what's changed in that time so some of the things that I've noticed have improved are if you look on the left we've got a couple of earlier prototypes so on the block selector it was not possible to use the keyboard only a lot of people use with disabilities can only use the keyboard people with motor disabilities or people with visual impairments and it wasn't possible to navigate beyond the blocks that you saw there so there were a lot of unavailable things the calendar widget has also been substantially changed because at the time that I tested it the black line is where the focus is on the page and it was actually behind that widget it wasn't possible to actually pick a date on that calendar widget but fortunately that's all been corrected now it's much better we've also got a lot of keyboard shortcuts have come in from the classic editor and new ones have been invented we've got improved focus management you couldn't publish a post initially now you can do that and the search for blocks is a lot better but we still have some items causing some friction so even though we've got the keyboard shortcuts it still needs a lot of keystrokes to create and publish a post we've got different kind of toolbars per block so we've got paragraph toolbars at the top there we've got a heading one and we've got an image one here and they all look slightly different so it can be a little bit jarring from one to another to another and not seeing the same familiar icons then we've got this three dot menu and that's got another whole set of options and they are including a removed block one which is certainly something that people are going to want to be able to do and maybe that should not be hidden away so what's been going on recently with Gutenberg and accessibility well we had a blow a number of weeks ago when Rian Rietveld left the accessibility team and she published this blow post on why and there were a number of reasons but some of the main ones were that one big problem was that the people in the accessibility team who are all volunteers know accessibility well but they did not know react well which is what Gutenberg is built with so they were putting out bug reports and issues that were simply not getting fixed and then sometimes when they were fixed then in the next iteration of Gutenberg they would actually introduce an accessible code back again which was obviously not good and again the keyboard testing for new components that were introduced into the editor are not enough done before that happened and in Rian's resignation post she mentioned this quote from Andrea Fertia who's also on the accessibility team and I put the highlights in here he has basically said what they found is the user experience is very complicated and that for people with accessibility the new editor is barely usable he says and one big big problem with this accessibility has not been incorporated in the design process and if you do know anything about accessibility you know that it's something that should always be thought about from the beginning because thinking about it at a later stage means basically remediating things which is a lot harder to do than simply building it the right way in the first place and finally Gutenberg is described as a regression in terms of accessibility level compared to the previous editor and I think that's fairly telling so after this a few weeks later we got this post on the accessibility status of Gutenberg and again I put the link in so that you can go off and read this and fill for yourself I'm a part of the team we have a weekly meeting on a Friday afternoon on a slap so here is an example of a couple of the things that they highlighted in the post so cognitive load this is me using the mouse to scroll through the post but you can see there's a lot going on that there's things popping up we've got different toolbars if I click on different things the sidebar is changing this is perhaps a lot for some people to take in and then maybe what you'd call inconsistency in your eyes so going back to different toolbars doing different things and the classic editor as we know it the buttons basically stay in the one place and it's the same ones but people know where they are with that Gutenberg is definitely a step away from that another of the concerns that the team highlighted accessibility anti-patterns so here we've got an example basically when you type an editor it's like one giant form and a good accessible practice would be everything that goes on the form to label it but we don't have that here we've got placeholders we've got the add title one and we've got another one underneath now when we have the cursor in add title that's fine we can still see that we have to add the title there but when we put the cursor below we immediately lose the message that we haven't been concentrating then we might get stuck what do we actually do here and this is another one about iconography so I recommend you check out this post the best icon is a text label it's got some goods and actually using examples of how putting in icons can work or not work for you but here I've got an example this is the top bar of the editor and going through the various parts and some of these things are fairly obvious what they do because the text there preview publish we understand what those do but then when we go back to some of the other things okay that's add block undo and redo we've probably seen but what's content structure what's block navigation and then some of the other ones at the other end settings what does that do what are tools and options again what does that do it's not obvious so yes we've got keyboard shortcuts in now and this is very good we've got a long list of them and we've got them for windows and maps one issue that we've got here is with keyboard shortcuts it's good if users can actually choose the wrong and that's not possible currently with Gutenberg they can't map them to the keyboard so we've got a number of different types of keystrokes that they would like to use we've also had a few cases of where their shortcuts have been changed I know that the one to delete a block was changed recently because someone found that that was the keystroke that actually restarted Linux so this one I'm not going to go through everything this is quite long and this is actually like a five minute long screen cap so I don't have time to go through it all but you can see where the green line is there that's a chrome add-on that I put on which is basically showing you where the focus on the page is if you are using the keyboard only you're basically using the tab key mainly and the shift and tab to go backward and forward to the various interactive elements so you can see as I'm going through here just how much keystrokes there are aside from actually typing in the content and yes we have got the shortcuts now to move between different parts of the editor but it's still a lot a lot of keystrokes so at the end of the accessibility team statement they've basically thumbed up and they have noted that the progress that Gutenberg has made because quite a lot of work is being done and don't forget this that the team is committed to making this as accessible as possible and it is a core value of WordPress that it should be accessible but they're saying we believe it's less accessible than the existing editor although there are some accessibility features that the classic editor doesn't offer that Gutenberg does but the final statement is basically saying we can't recommend Gutenberg in its current state for anyone who has to use assistive technology so the current thinking is when version 5 ships there's going to be a message in the admin saying do you use excessive assistive technology well if you do maybe you should be looking at carrying on with a classic editor Gutenberg might not be there without you so going back to our UX diagram how does Gutenberg measure up well we know that 600,000 people we know that 600,000 installs of Gutenberg but there are also 500,000 of the classic editor plugin now does that mean that people are testing both or does it mean that they've installed classic editor because they don't like Gutenberg we don't know in terms of usability we've seen mixed reactions there some people find the new interface very intuitive and some people find it very unintuitive and again in terms of desirability very polarising reactions some people love Gutenberg some people really hate it there's not too many in the middle whether things are findable that's an interesting one because discoverability was one of the goals for the new editor but ironically it seems that people are still saying but a lot of things are hidden away I know that they've just changed for example people are saying oh I couldn't edit a perm link in Gutenberg and it does come up once you've put the title and it comes up above but people weren't finding that so in the next iteration there's going to be a section in the sidebar as well for that accessibility definitely the commitments there but it's not ready yet and one of the key issues from that was that it just wasn't factored in from the beginning credibility well we can see some people left the bad reviews they've tried it they don't like it they've been turned off by Gutenberg already going to come back to it again they might or they might not and in terms of how valuable it is well plug in the theme developers have done a lot of preparation but we have to wait and see what happens with the final release but you know there could be some really good and progressive stuff coming out in this area so if you want to help to make Gutenberg better what can you do well you can try the plug in as it is just now or you can also download WordPress 5 as a beta version it's constantly being updated I think we're on beta 5 just now you can add a response there's a Gutenberg post where you can give your feedback you can leave a review on the Gutenberg plugin page if you have a GitHub account you can create an issue there and if you're in Clown you can also join the WordPress accessible team and I've been working on the Gutenberg user manual for assistive technologies and I'd love some help with that or feedback, you're more than welcome thank you very much