 Hi everyone, welcome to this breakout session So the vision for this breakout session not that I've ever been to an Apple iPhone announcement events, but you know, they do Apple does their their big You know well polished presentation and then after that all you know They announced a new iPhone and then they let a lot of people come to like You know the secret back room and like be hands-on with a new iPhone and and you know try things out That was the vision for this like let people come here be hands-on with the platform go one-on-one with people who are Really well versed with the accessibility we put in the system You know people who coded stuff and people just know how to use the the blocks and the editor to that Yeah However, there's a lot of you. I'm not sure if the logistics of that we're gonna work So we're trying to figure this out on the fly here We are creating a Google sheet where you guys can paste your email addresses And then we will invite you to our alpha environment so you can just get in as a user when you have your laptops and just go to town So that we're getting that set up. I think it is Set up at be bit Lee bit.ly slash NASA alpha There we go NASA alpha all one word no dash. Yep Stacy's in the champion So if you go there go to that Google sheet start throwing your email addresses in and then I think Someone is gonna start inviting y'all with user accounts to the alpha So while we're doing that though, I think we've got a few different mics set up around the room So maybe we could take some open questions now for everyone to hear while we're getting all that set up And then I think after we've taken some questions then we might kind of Squish together in different groups so that all the folks who have accessibility questions and want to see that in action Maybe can go around right with with amber So we can kind of divide and conquer but first questions Want to come up to the mic, please Hi, thank you Quick question. So in Developing your block theme. I guess kind of two-parter. Did you use WordPress core blocks and I guess Question one question two. What was your thought process on like how to develop a particular part of a site? Is it like a pattern a core block a custom block like what was sort of the decision tree? You had to run through to make that decision All right, so there's a lot in that lot a lot of parts of that. So Yes, we used core blocks There were some core blocks that we turned off and Then the most interesting thing we did was we had to augment some of the core blocks So the most obvious example is like the image and video blocks. They didn't meet You know the you know captioning specifications and stuff like that that NASA had and wanted So basically we had to augment those things with and kind of figure out a way to layer like our own image block That was kind of built on top of the core image block In far as in terms of what was a pattern and you know, what was a block You know the the HDS atomic design system pretty much Defined like the blocks that we do we were gonna do it and one of the key things we had to do was figure out So there's a lot of different post types You know certain blocks only work on certain post types not others So that was another decision criteria. We have we've got post types that are full with basically post types and other post types that are you know, two column post types Or at least layouts and so not all the blocks working that way. They're not all intended for all that use and then the patterns You know As we were talking about in the keynote it was you're giving people when we first put users on this thing that there was like it there were something like 25 custom blocks that brought this design system to life and and It was super overwhelming to them They They really didn't know where to start so then we that's when we started with like the concept of a pattern and the design system kind of like had some specifications for those combinations, so we kind of started with that and as we talked about like That was great. That kind of moved people along the content creation user journey And so right now we're at the point of like like alright How do we get them to move past those things and break free and feel more comfortable starting out with a blank canvas? And assembling blocks in unique ways to tell their unique stories. I Don't know exactly how to ask the question Because I manage a team of developers. I haven't written code in a long time. Although I did contribute yesterday, so We have a platform that we build on top of WordPress and we leverage Gutenberg But one of the things that was a challenge for us and we went to using ACF instead is the in-place editor experience Um Can you talk about did you create a framework for all of those form fields and things like that for the in-place editor and talk a Little bit about how you manage having to create if I remember correctly You have to have two sort of render views one for the render on the front-end web page And then one for you know a component for the back-end editing experience Yeah, I'm kind of looking around for a software developer who could answer that question better than I can So when building a Gutenberg block Right here the in-place editing experience. Did you create your own framework for all of the form fields and things like that to? manage the content editing experience and then talk a little bit about maybe How you handle the the development of the render view for the front-end versus the back-end if I remember correctly You have to sort of build two different versions of every component one for the back-end and one for the front-end Yeah, let me answer that that last part first because that's easier to answer So yes, and yes, so in some blocks we're using both Like the admin present or the the JS presentation for the editing screen And then there's the PHP callback that's rendering for an end in a few cases where it was complex We opted for server-side render instead. I don't want to say complex In some situations it made sense to have server-side render So we didn't we weren't fighting with a block that was constantly being updated And we found that to be sufficient in most cases And I'm sorry back to the first part you asked if there was a framework for for fields, right? We've created some components internal that we reuse But otherwise no, no, it's it's it's pretty much custom per per block. We roll it out as needed. Yeah But to that end like when I say reusable components There's things like post-selectors that we've we've like iterated on beyond what's in WordPress to you know Focus on different data types and because we're pulling an external content or sharing content You know the science site and the primary site. There's the need to to treat that block or that that selector in different ways and so that's that's been iterated on and we've created Custom components that we we reuse in a lot of spots. So while there's not a framework per se There's probably six or eight of those pieces that that make up the bulk of constructing block interfaces Does that answer? Yeah, there can be. Yeah, it depends on the block and it depends on if there's something similar in the system We can sort of Say, oh great. This is these things are actually the same like we can reuse code here But but no there there is a lot of work per block. Yes. That's accurate 55 it turns out I counted at dinner the other night was shocked Hey you guys, thank you In the keynote you guys talked about some folks using Blocks that you had intended for one purpose for another purpose that was clever and useful and well received Were there examples where it was not so good and how did you handle that? Yes? But we don't want to name and shame or put up ugly screenshots But yes, right like and I think we we mentioned that that that was one of the challenges is that with great freedom comes great responsibility and not everybody right we have a wide range of different You know familiarity with design principles with the user Experience best practices. So yes, right? We had folks building some content that was maybe not as pretty right? We had folks building content that wasn't as accessible, but we were and Stacey I know is is busily getting you guys all access but Stacey and her team led an effort to Kind of spot check and QA these different pages and really identify when there was maybe a particular author who was kind of Struggling like we had a lot of people who were just kind of pasting everything into paragraph blocks And we're like we've got other tools for you, right? You can use other things And so they ended up doing a lot of one-on-one support Building with those users to convert those kind of super text-heavy pages into more block-based things But but yes, it's it's a challenge How do you manage sort of the backwards compatibility or if you if you have to modify the block in the future? Do you have like unit test build? How are you handling it to make to ensure that if somebody's used a block in an unintended way? It doesn't break If you update or modify it in the future Unfortunately, I didn't hear the beginning of the question. Yeah. Yeah, we don't always you know, there's there's basically a lot of like the deploying plans end up like including a lot of you know special scripts CLI commands to go back and You know, if you have to retrofit something, you know, we're trying not to like Tell content creators they have to do over, you know trying to like evolve their content in a way that is done in a non-obstructive way or something like that so Yeah, we do there's a there's a CLI command that you wrote called like the kitchen sink You run that you run that thing and it basically puts every block on a page for you So we can do you can do some quick testing in that way Does anybody want to try to build a page on the CMS? Oh, okay. People are doing it already great I have a fun question or a serious question. Which would you prefer? Okay, has anybody worked on the site from space yet? No No, but one of our early integration and consolidation challenges was the space station research Explorer, which is an app that shares Experiment results from the space station that the astronauts it's not in WordPress yet But the astronauts on the space station are inputting different imagery data experiment results into this Space station research Explorer tool and that was sitting on the old CMS. We needed to bring it in So not yet on WordPress, but we do have parts of the new site that have information directly Inputted by astronauts, but yeah, we got it. We got to get this on like a little chip and send it up there the source code Good idea BIT L Y slash NASA alpha no dash And I hope I got that right So once I think you're in but you don't have a role yet if they can get into the dashboard But don't see anything yet So give us a sec We're granting permissions as we go and we're gonna leave this access up all day Maybe tomorrow as long as you guys don't mess it up too bad So as long as we don't accidentally give anyone admin exactly if we give you admin Don't misuse it because then we will shut it off for everyone. He will ruin ruin the playground for everyone But we'll leave this up today Hopefully tomorrow so that you have plenty of time after this right to dig into your heart's content You can find us we're pretty easy to spot and we can keep answering questions after you get a chance to dig in and so just so there's something visual to look at here Just so there's a visual to look at here while we're you know ad-libbing here and taking questions and all like I Invited Amber to come up here and kind of like surf around and show the accessibility checker pro Capabilities in action as Abby mentioned that was something that we cut from our keynote and it's important here and and you know You may have also seen Amber's Post and press release about how There was there's been some evolutions of the her accessibility checker product that are a direct result of Equalizes digital involvement with this web modernization project Hey guys So I work for a legacy publishing company and we're in the midst of migrating from my legacy CMS To WordPress and I was interested in what your guys experience with the data migration of your content specifically to Gutenberg blocks and And so we have all of our article content in XSL on our database And we're wanting to basically cleanly migrate that and convert that to goonberg blocks without it all coming over as HTML blocks and so I was wondering if you guys could speak to that migration process and how you guys migrated that content over It was a nightmare. I Figured that would be the answer Yeah, I mean at the end of the day like with with With Gutenberg like we all know we can look at what's stored in the database and we can say well How can I make that the destination for what I'm migrating right? And in reality sometimes the data you have doesn't map to what you're going to need in the future So you either need to build the block to accommodate for no values or stuff that you know I mean we've all worked with blocks where you start with the properties are available And then you get in a situation you go well now I need a new block or I need to update this block and now the previous Stuff doesn't have the data and you know block air We've all we've all fought with that So on the migration front I think my answer is as close as possible stick to like core blocks because they're a lot easier than Whatever crazy contrived thing you can build and then find a pathway to to grow those up into your design system blocks noting that You know it may be that that core block it has the treatments you need to get to where you need to be it may not But no migration is terrible Yeah, you mentioned about Damn in the presentation so The digital asset management system is it built in the wordpress as a plug-in or something or like it's a for NASA plus, right? There's Are you referring to the reference I made to the images that NASA yeah, okay, so NASA has It's called a veil internally so image it stands for audio video imagery library And it operates you can all go to right now images NASA gov So when we were doing discovery on all this like asking our content creator users What's the you know, what do you want in the next generation of work masses content management system? You know they all said like hey, I want to be able to easily use images NASA gov stuff They were the experience that they were currently doing was they were going there finding the asset they wanted They were downloading it having to manipulate it and then uploading it into the currency mass and the current tools You know, they were dealing with Photoshop and all that kind of stuff. So what we did Was basically extend the wordpress media library. So there's an asset management framework out there that was built for integration I think it was for an adobe experience manager integration, but So we were able to augment that I believe I think human made may have been the company that Did a lot of the pioneering work there So it basically be able to augment basically able to use that open-source code Integrated into our solution and essentially what it does is When you don't with the media library, there's essentially another tab that you can you so you're choosing between what's stored locally within Uploaded into the media library or your there's a tab you can select an interface to search for images NASA gov and it basically, you know retrieves that allows you to put it into your story I Also reference to the you know the user experience where people were having to open up Photoshop locally and and start and crop things and find the right focal point by far This is it's not even close by far the most beloved feature and our CMS was You've all seen the cover block and the focal point picker on that thing We applied that thing to every place an image was even like small little you know circular avatar icons like you can zoom in and out of those things Find the focal point of that that is by far the most beloved capability from our user group I actually love being able to like you know manipulate their images and move things around and tweak things thing just alongside of their Contacts opposed to what they were doing previously, which was like you know pulling it down Opening it up in their image editor locally and then putting it back up and just all that stuff was you know We've all been there. We all know how time-consuming and or annoying it is So yeah the which which aspect of there was a couple things there Yeah, that's already is open So I mean if you go if you get that's in WordPress core if you go to the cover block I mean all that all that stuff is there you I mean that start start there You know apply it to a cut if you're building a custom block sugar figure out what parts you need there and add on to it I was just gonna add we have a lot of different image libraries across NASA So this images.nasa.gov was kind of step one and I actually our friends I'm looking to see if any owner in the room our friends over at JPL who are building the new science.nasa.gov are Really leading the way on this front They're trying to consolidate all of these different science image libraries across NASA into one I think believe using AEM and then have that as a direct image source in the CMS So that that job of trying to consolidate all the image libraries and data into one place for our users is a very In-progress area, but more to come soon. Yep. Okay, perfect Okay invitation emails aren't going out But if you put your name in the spreadsheet go try to do a password reset with that same email I think probably our like mail logger isn't working As they get the text changes to a lighter color means that we're getting them in so Okay, so we're trying to send the confirmation emails But if you see your name in a lighter color on the spreadsheet go ahead and try a reset password You need the URL don't you? Yeah, it's in the spreadsheet. Yep, the alpha URL is in the spreadsheet Can we type the alpha password? And if we escape out of I think it's maybe in another tab Yeah, yeah, okay, so here up at the top NASA Make it all big. Yeah There we go There we go headings are tough people Okay, so never do naked links no naked links like this don't ever do this But you don't need the NASA dash gov dash alpha dot go dash BIP dot net BIT dot ly Want to type it BIT dot ly Sorry someone else's computer. I know BID dot ly. Yep. You're good. You're good Ly slash NASA alpha all one word Thank you. Nope NASA alpha. All right more questions. We got a bunch over in the section For this particular environment you're probably running into the two-factor authentication that's built that Honestly WordPress VIP enforces as part of WordPress core However, yes, we do have two-factor authentication that NASA has its own authentication system. It's SAML based Yeah, they're not Because we can't resist basement of course So it's not that's not set up you might actually see if you go to the log-in screen you might see a reference to it Says SAML login and that's not gonna work. But yes We did have to integrate WordPress with NASA's SAML based authentication scheme And there's all sorts of you know like NASA has its own little IT ecosystem Unto itself and there's there's aspects of this WordPress project that we've had to integrate with you know things like their single sign-on system Give me another example Abby No, okay The account like the whole process of getting an account has there's a whole ecosystem around that you know Yeah, it's called NASA as an account management system Pretty much a material there here though question back there I have a question around the information architecture. So this is obviously quite a feat to consolidate all this historic information and then putting them into custom blocks and building out pages and You know custom post types and whatever else you got going on What thought was given to future-proofing this effort because obviously your last site was what 2016? I mean, I remember 2016. That's not super long ago. So, you know and not having to redo this again In five years eight years. What how are you handling future-proofing in that code and in your content? That's our big pitch to NASA leadership, right? We're doing this once so that we do not have to do it again in five years, right? Or nine years or however long so To that point, right? I think choosing WordPress not like a custom, you know bespoke CMS But choosing something that's open source that everyone is actively contributing into is a big part of it Another part to kind of future-proof this you spoke about the IA right the information architecture So if you look at our current site You'll see that a lot of the headings in that navigation are kind of like NASA's Campaign-y phrases for stuff like there's moon to Mars and that's all about the Artemis program But a lot of people click that because they want to learn about The moon or Mars and then they get there and it's nothing about that stuff, right? And so NASA's kind of inside lingo You know these different campaigns that we are pushing that we want people to know about right? But people are trying to get to a lot more basic stuff than that and they're really having trouble finding it So if you notice on kind of the new beta site and if you're not in the alpha yet You can always go to beta.nasa.gov to see it kind of from the front end You'll see that right. We have a solar system menu. You click on a planet, right? You you go straight there and a lot of those links You'll notice are heading over to the science.nasa.gov beta Because we're really trying to link those two sites as one user experience But that's I think fitting everything into an IA that is topic-based Right and not org structure-based is a huge piece of it and then we have it. We're trying to make it really flexible So we're using Parsley analytics lets us look at analytics by category tag We have stuff tagged with multiple categories So it can be tagged with a NASA center and the science topic it's talking about and the person the scientist Who's mentioned in the article so that we can tag stuff multiple ways so that people can find it through multiple routes But we we want we're working with our sister site at science to come up with like a taxonomy governance Pat plan right a process to keep that taxonomy up to date prune out old things that aren't getting new content added hoping to make this a living system not just on the design front and but on the IA as well great question So I have an agency that does website design development for multiple clients And I think like a lot of us we lean on plugins to really kind of make development more rapid Are you guys using plugins in this site? Or did you go custom code everything for more kind of like future-proofing? Well, Amber's plug-in is on it. So that's one Yeah, that's why I told you to go drive that thing No, I didn't mean just mine Yeah, I mean I just didn't know how to answer it. I don't really care So but yes the answer is yes, we are using some commercial plugins on there rank math is the SEO plug-in It's a couple of dinners open source plugins like the asset management framework that I mentioned The news pack converter is using a lot of our migration processes. That's another open source plug-in But the reality is like we have to build our own And and there's a lot of custom plugins and because quite honestly like it's an easy way It's also kind of a deployment strategy to like it's a way to get code on there You know turn it on be able to easily deactivate it without having to like do do a rollback as well too So so it's a mixture of both I want to call out like one plug-in that we just started scrolling by this the ISS virtual tour. So that was a group who was putting together I think in unity, right? Entire interactive tour of the ISS now like how do we get this into WordPress like? Let's work with you to build a plug-in for it, right? So this was kind of step one of that of building a plug-in for just that one 3d or interactive thing our design system calls for a lot more with 3d with interactive So we want to kind of take the next step to make this where anyone can kind of bring one of these unity web GL items plug-in play it in with review is of course Yeah, it's actually the a perfect example and The poster child right now for that culture of inclusion we want within web mod program You know basically, you know the stakeholders. There's other stakeholders like this across the agency coming to our team being like Hey, we want this capability When can you when can you build this when is it in your roadmap and sometimes those answers aren't what they want to hear It's like well, it's in our roadmap, but it's it's really it's far down the roadmap You know, it's it's not our priority, but you know, like we there's an invitation like if you have some resources You have some knowledge and you want to build it yourself, you know, well, we're happy to consider it review it at it Make sure it doesn't you know Impact performance or security or those kinds of things and so it's a prime example of a it's a success story quite honestly People might be interested in hearing About some of the thoughts behind, you know, there's a lot of plug-in from the site which are custom and Why some of these things are plug-ins verse in theme and why they are individual plug-ins verse one big one And I don't know if Gary wants to talk about that, but I feel like Sorry What was a question Tell them tell them that share the thought behind Plug-ins verse theme, right? Yeah with the custom stuff and why because we're looking at this, right? And there's 10 15 Custom volume, there's probably 55 based on our accounts recently. Yeah, so why why custom plug-ins? Or why so many so there's there's a couple a couple reasons so in some cases exists the ability to put a plug-in out there and have Selective environments where we activate a feature So basically think of a plug-in is nothing more than a feature flag and in some cases That's literally all it is. It's setting a constant that some other code is is utilizing It's a it's a multi-site, so that's a good point. Yeah, yeah, that's a good call to other other reasons They end up is as plug-ins is sometimes there's isolation We may be starting down the road on something and we're just not sure it's actually what users are gonna want as was mentioned in the Keynote sometimes we build things and it gets in front of people and there was a huge Miscommunication because there's a lot of users There's a lot of layers of communication between what they need and what we're building and the result being there's code That we write and throw away and it's much easier to do that and tear it out a single plug-in Then it is to go to your core plug-in or whatnot and and disconnect all that stuff as far as what goes in the theme and what what doesn't You know like we tried to isolate logic as much as possible from the theme to so the theme was just presentation considerations and keep API really related things and other logic and plugins I say try you know it's it's Sometimes it's just pragmatic like I'm working in this one file. It's it's you know a couple conditionals. Let's go So it's not You know it could be cleaner but to that end You know we the plug-ins give us the ability to isolate bits of logic as opposed to have it all activated Just gonna give a plug quick everyone in the spreadsheet should now have an account So even if you hadn't got an email go ahead and go do a reset password with that same email And you should be able to get in Okay, I think I saw your hand first We're still granting roles and so we'll we're gonna stick around maybe in the hallway to keep answering questions But also keep troubleshooting to make sure everyone get access so Yeah, yeah, um, I think the answer Yeah, I think I think I'll give it I'll give it an answer through an example Because there's there's a lot of disparate pieces that make it in there And if you if you if you start looking at plugins or some things where you're like this seems like it shouldn't be its own Standalone thing but the reality is consolidating all of this content from years you get situations where you're dealing with strange things So a good example on that is JJ was alluding to SSRE which stands for space station research Explorer And what SSRE does is they consolidate reporting from the space station and make it available to researchers around the world So they've got a really strict mandate on what's available and how it's available And they have some design considerations that are external to what's in the hds present design system spec outside uswds And the whole thing is baked on this Um, uh, like microsoft sql database and an enormous monolithic javascript app that grabs all the research and then renders it on the front end. So It's not a decision any of us in this room would make when building it But at the time when they built it it was the right decision and now they're handcuffed by some of these decisions just because of legacy You know stuff So what we were able to do is help them port that into WordPress. So there's this You know header and footer of the site that wraps this research Explorer And it was really cool to work with that team because you know, they they knew their technology They didn't know WordPress but to to kind of put that in place And given the tooling they needed to move forward has enabled them to be integrated with the site from day one when we go live SSRE won't lose anything And and to you know expose the stuff that they're managed to expose I don't it doesn't answer like your question as far as like cool new tech Um, I think it's indicative of the project though Sometimes our decisions are sort of made for us and we just have to live with what's there and and go with that Yeah, I'll I'll add a little bit to that like some of the technical decisions we make we're Just not to deviate from WordPress in this massive way like if we're gonna if we're gonna um, you know, again This culture of inclusion of all these developers around the agency We're going to be successful with that like making sure that it's it's close to uh, you know WordPress standards and The ability for them to be successful in that way is important to us All right, we have a few minutes left So I have question related to plugins but more on customization side and you know Most plugins add functionality, but you had to remove some functionalities. I saw on core blogs that you don't display some controls Uh, can you like expand on that what you had to do? Why did you do that? Also related to that? Uh, what about using some sort of uh roles permission? So whether some users are blocks are locked or not and how would you go about that? Um, you want to talk to the roles? Yeah So there's I think there's like five active roles in the system that sort of range between administrator and editor and author And users I mean by and large kind of identify what their needs case are, you know, the higher up they go the more critical I um folks that approve that give it but the reality is um We could have tons and tons of roles, but the use cases are pretty specific There's there's actually some users where the role is created and they have like one use case So in addition to that they've got some capabilities added to that that one user to handle this single thing that happens within the site um Sorry, and then what was the other part of the question I'm mostly interested about controls like removing then, you know, like how How far you did about that like whether it's like And admin could do more or then because we see only a single role right now, right? Yeah so so on the on the um So I guess I'll answer a couple ways so Because we're using sammel on the primary site people aren't just logging with email address Um as like as soon as they're they're in the system. They enter into the subscriber and their role is elevated to what they need Um at the point they no longer have access to the system sammel doesn't work So they can't log into the site. They can't log into anything. So there's like a an immediate lockout from a risk perspective there um But I mean in those in those in those five roles we have available It's it's really like what's what's the need the user needs What does the user need to accomplish and then start working back from there? What role meets that requirement? It's not a one-size-fits-all type situation There's also some secret roles Yeah, there's some secret roles that are specific to um you're really identifying at the individual user level Like who can make changes to the home page who can make changes to the main menu system? Yeah, because of just that's just there's just tighter governance around of all that stuff around nasa All right. I think we have one more question Or time for one more question. I should say go ahead users using blocks in their own way and Apart from the intended design So is there any framework that we can think of because uh, you know Are there any constraints that we can build or some kind of communication around a certain block Which tells the user that the intended person the intended use of the block So that kind of yeah, so we've certainly tried that. Um Stacey you want to answer that? Yeah, so when we have a new block that gets released or even just a version update We have multiple channels that we communicate to the um users About the new block or update to it We do a blog and a newsletter for our user community because we have, you know, what was it 440 users? 436 users in the system And then we also have what we call an open office hours forum And usually what we'll do is a demo in the open office hours to show the users You know, this is how we use this and this is you know, kind of the intended use of it And you know, let them, you know, take it for a test run and you know If we come across a case where maybe it's you know, just completely off the wall Then we might reach out to that user and say hey, you want to you know, maybe try it this way But really overall, you know, we're working with a really amazing group of creatives And they they do really really awesome work with the blocks So it takes just a little bit of training and communication to show them how to use everything So one last thing I'll add to that like, you know, you roll out these capabilities and You have a vision for how they're going to be used and there's intention for how they're going to be used but You will have a user or a set of users who will try to explore the outer fringes of what's possible with all that So one thing I would strongly advise you to do is, you know Make that part of your quality control and quality sharing cycles like put Put bad data into these blocks like put the wrong characters in there and see what happens because you know They are going to they are going to try to put you know characters that you don't think we're meant to go in there in those places So all right, um Thank you all very much for joining and thank you all for being flexible. This wasn't the way we Visioned this to go but hopefully you got something out of it. Um, if we're all around we're all you know Pretty clearly identifiable So, uh, if you want to sit down and like look at uh some code with somebody we can try to do that If you want to get hands on and with one of us individually, we're happy to just we're approachable and nice people So feel free to do that