American Medical Association: Topic Landing Pages (A D8 Case Study)

I'm Danny Peterson I worry about weeks

operon here as an American Medical

Association as it is right here and

those these are two military partners

Bobby Schwab Beckham developer

extraordinaire and work for us okay so

we are going to be talking pretty

in-depth about these landing page six

landing pages that we built for the

gaming and a lot of us struggle with how

to display and organize component

information that's what we're going to

be talking about here I'm gonna go

through this really quick so our

business requirements for these topics

pages we wanted to have the AMA has

several web properties that have content

in different areas like the Journal of

America the trauma which is our our

publication we have a wire blog we have

corporate website and our content people

wanted to have a specific topic page

where they could put in content from all

of our different resources and and drive

membership or driving advocacy or drive

people to some one topic so it was a way

to centralize information and provide a

portal for people visiting the site to

find out a lot about Hopi that will be

academic

so some of our requirements were to have

a reusable content customizable layouts

different sets of components on each

page a content editor friendly interface

which is the dream and the ability for

editors to create all of those above

without getting having to call a

developer and we had a bunch of

additional architecture ideas do we do

paragraphs panels blocks and we have a

little bit of experience already with

this we've built some hub pages in d7

and we abused the paragraphs module

differently with the paragraphs module

it really should be called the

components module or something it's not

always paragraphs but is a way so we

note these hub pages which attempted to

do the same thing we're doing with the

comics pages but we have a lot of

problems we were having multiple nested

paragraphs it was hard for an adverse to

use we would run into memory issues on

these giant pages and the end way up was

inflexible for the content editors and

we also didn't really know what they

wanted

so we built every possible combination

that they might need and then it turned

out they really just one of the page and

had like 20 cards and so we wanted to

throw away that and start nd8 start over

again and figure out what to do but on

the AMA side this was the first v8 site

that we had built and so what we wanted

to do is have this be we wanted

permission to fail on this project and

by that event we wanted to try different

things and we didn't want to get totally

locked into one single architecture

because we are planning on building we

are in the process of building a new d8

site that combines all of those into one

coping

which along gender this fall but we all

wanted to get our feet wet with this

kind of water

so our DNA and what this was is

basically we were trying to decide

whether we want to use photographs or to

you see analyzer and IPE which I thought

would be a better content editor

experience it's sometimes harder but

there's trade-offs and we'll talk about

that so what we did is and you you

actually ended up doing both sides of

that's were found but we have these

different approaches and we got the room

and we battled it out and we all voted

and then we decided to some journal

anyway so this is like topics pages this

is a little bit of a picture of here so

we have this EXO and his challenge the

challenge we had was to put all of our

expertise on one page to boost

membership and so this was also a new

process where we were doing agile we get

you agile as a team but we wanted to

start doing agile as an organization

with our different stakeholders and the

results are we design new components

based on the existing visual language we

have a style guide that we use and we

built the foundation for our platform

which we will be extending this year

and we built DTF is this your slide yes

I'm sorry

he's breaking no no I think I'm gonna

actually turn this over one of them

okay you doing it okay thank you

and anyway last fall we delivered the

MVP which of these six pages which were

hugely successful and the the CEO and

everybody these pages were an example of

what we want to do going forward as a

team and as an organization so if I turn

it over to Bobby will taste like this

right Jishan yes so as men said we

wanted to we wanted to give editors a

lot of flexibility in a relatively short

period of development time our initial

timeline for this was pretty tight and

yeah we wanted to use the kind of latest

and greatest stuff available to us in d8

at the time we started this October or

something

like alpha yeah the first time I tested

this on that was horrible and yeah there

was yeah anyway we started building on a

four so we could take advantage of a lot

of this new stuff but I mean he said the

first thing we did was have this

paragraph so his panels throw it out so

I've kind of got a couple videos just

demonstrating the functionality so this

is my recreation of the paragraphs a

flexible paragraphs based layout page so

here's a here's a topping page there are

a couple sections so here's a 50% white

container that would be the center

there's the sidebar each of these

regions has a number of different types

of content in it this is the brand new

paragraphs editor experimental interface

it does allow a little bit of like

better reordering

and kind of expanding and collapsing but

as you can see this is still a pretty

bulky interface it doesn't give the

content team any ability to see what

their resultant page is going to look

like also trying to drag these giant

paragraphs around the page if you wanted

to reorder them it's basically

impossible you can like do show row

weights but what content editor is gonna

know what show real weights actually

means so yeah this was this was the

approach that I was comfortable with at

first and as soon as I built this I was

like this is not good

yeah so enter panels panels and I have

always had a rough relationship I've

been reluctant to use panels for a long

time and this was kind of the the time

that I came to love it so this is this

is the end result of the the content

editor interface this is our kind of

example content you can see what the

panels in place editor and editor is

able to click Edit drag and drop content

to different regions of the page in the

actual interface to see the content as

it is if you want they want to edit the

content they can click Edit bring up the

IPE

edit a node maybe change some links hit

update and then they can see their

changes in real time right on that page

so I'm gonna talk through a lot of how

we built this but this is you know as

soon as we saw these things side by side

I kind of saw the power of IPE custom

blocks I was pretty much sold

so I'm gonna take a quick kind of run

through the the recipe for building this

this whole editor interface yeah

so it's kind of gonna be at a high level

like psych building perspective I'm

gonna dig into a couple of pieces and

then we can talk about things later so

the first piece that kind of tied all

this together as I said panel panels

panelizer and IP I should check my

slides so the first the first thing to

do when you turn on all these modules

you just add a panelizer field to your

node this this kind of enables all of

the magic in with panelizer to happen so

panelizer if you're not familiar with it

allows you to panel eyes individual

nodes paralyze you know a node body

basically and once you turn it on you

have the option to allow users to select

their display and to have each content

item have its display customized so this

I was I was really really reluctant

about and I actually ended up talking to

some folks in Drupal slack just being

like hey if I put a bunch of blocks in

panels is that like in my experience

that's always been config and like

having your content as config is dicey

but it turns out that that that's not

actually configuring or and that all of

these things are treated as content and

you know if a content editor moved the

block around in a node we were gonna

have to react sport all our config from

production so that ended up really well

once you once you set these up on

panelizer gives you the option to set

some basic defaults for the page we

pretty much kept the pages totally blank

and just had a default layout we were

originally gonna have a couple different

layouts that the editors could choose

from

we ended up discovering that for a lot

of different reasons because let's go so

this is this is again what panelizer it

looks like yeah so once you turn on

panels you get you get this wonderful

interface where you can you can add

blocks move blocks around all kind of on

the the node view page not the edit page

though the weird part that I had to get

over was like if you hit the edit button

on the node you don't see anything and

really all of this just lives as uu IDs

and regions and there's not actually any

content on the node that that also made

me scared but but I got over it anyway

the next piece that we we brought into

this was layouts so with 8 4 we got core

layouts and that was wonderful all of

this stuff was possible in indie 7 and

d8 before 8 4 but I actually went to the

documentation pages and the

documentation only for like how to add a

new layout to a panelizer page is like

words 44:48 after a 4 so it 8:4 makes

adding new layouts a very trivial

experience because it's Drupal 8 you

just add a yellow file of course what

else would you do so any new layout with

width layout discovery on the left here

we've got our theme layouts idml file so

we've just got an array in here called

bookend and this really defines the

entire layout we've got a label and a

category we tell it where to look for

the template files and then we set the

regions that we want so we've got a left

rail main content we've got a little

section that hovers over the the right

rail and then in our theme file we're

really just kind of setting the wrappers

for these it's pieces of content there's

a little bit here you know we this this

section was altered with was optional so

we want to like not have this section if

there's nothing in here so we're saying

don't render it if it's if it's empty

otherwise yeah this is a really

straightforward template that allows us

to do some really powerful layout

functionality if we wanted to have a

second a second layout here we would

just add another bookend a red item to

this array or an another item to this

array called like heavy left you know

put in another twig file and we'd have a

whole new option custom blocks for the

next piece of this as I kind of alluded

to and if you don't know blocks are

entities in da this is a huge change

from the way blocks functioning in d7

and and it means that we can have

instances of blocks as as content

instead of config that makes everything

magical it means you know you can you

can place multiple instances of a block

which was always really hard it means

you don't have to manage config as much

so the bad we did run into an issue here

panelizer has some issues with blocks

when one blocks get deleted

panelizer doesn't necessarily

they get to lead it and there's some

issues there there's an open issue with

some patches on it

you can review the slides will be up

later so you can click points also

digging in the data can be a bit of work

so as I said with panelizer

there's there's a lot of kind of nesting

of the data so you've got your note with

a UUID and then you know you have to get

to that the block instance and then

digging fields there so if you're trying

to you know get a title I'll get

something too metadata field it takes a

little bit of work this is yes so once

we build these custom blocks we wanted

to have we needed the content team to be

able to add them to the page luckily the

panel's IPE it makes this super easy

there's a little button that says create

content and it exposes all of our custom

blocks to the to the content editors so

they can see all of their options they

click the button they get a nice little

interface to have their blocks next

piece any reference and view mode field

um

don't click on this module link don't

look at the number of people using this

module or its development state just us

we didn't build this but I found this

module and I'm in love with it all this

does is takes a regular entity reference

field and adds a drop-down to select

what view mode you want to display that

entity this is magical it's it's like so

wonderful on the left side here is what

the config page looks like so you just

select what kind of bundle you want you

want to select and then what you modes

are gonna be enabled for the for the

editor to view so we use this to build a

really flexible like main content field

that sometimes they might want to have

you know to hero items and

a list of like smaller items sometimes

they want to have just a list of smaller

items you know we didn't really know and

we wanted to build the layout the layout

to be as flexible as possible

so the team can just go in here and

their items set exactly what they want

them to be rendered as and that's a huge

amount of power that you know we're

putting in the hands of the the content

team you know previously this would

either be an NVQ where we said like all

right render item 1 & 2 as a hero and

then 3 4 & 5 as like a smaller version

or some sort of stacked views or

whatever all of those things are a lot

less flexible and so I thought this was

a really nice solution in my native a

forum inline entity forum I used before

and it's wonderful but now we have four

modes for modes are magic and wonderful

if you haven't used four modes you

should definitely use them so for most

let us if you're not familiar four modes

are similar to view modes it's just for

the Edit form so what this lets us do is

say we want to provide editors a

streamlined way to add nodes to the page

so we turn this on disable you know the

author field and the date entered field

and the revisions and all that stuff so

that we just get to the meat of the

content that the team wants to add in my

tennety form then we just have a little

field set that lets you add a new node

or an existing node these these boxes

get added right in line in any form and

it's a it's a really really nice

experience for the especially for

smaller pieces of content where you

don't want them to be creating new nodes

for every item Mina in a reference list

all right this special sauce so

everything before that apart from like a

little bit of code they have to do for

for layouts was basically turn on module

and configure it and you're done we did

a little bit of custom code to make this

all kind of piece together well yeah so

panels IPE

is still a little rough when you turn on

it the IPE is rendered in your front-end

so you're exposing an admin form in your

front-end theme that unless you have a

front-end theme that has all kinds of

form styling on it it's probably not

gonna work out well also this is even so

the left side is before and actually we

had all of our you know web form styling

like exposed in this and it was just big

and horrible and ugly so in order to get

to what's on the right we basically

copied a whole bunch of CSS files from

seven into our front end theme it's

super happy and ugly but now we have an

ending form in our front-end so one more

piece of this the top line here is what

Ivy gives you by default so this is like

every possible block or there every

possible thing that you could add into

panels um we saw that and I was like no

no no no no so I think it was little bit

of custom code or some permissions

yeah and we took all that out so now all

the content team has is a bug to add new

things and a bunt add existing custom

blocks so that custom is a list of all

of the custom block instances that

already exist so that made the user

experience the content team experience a

lot

let's do a shuffle um yes so awesome we

were able to create content and get that

moving we also needed it to look like a

thing and so in as we were developing

the topic stages as our foundation for

what what we're working on now which

will be the new integrated a my site we

wanted to make sure that we were doing

it putting our best friend info forward

- so our goal for this was a style guide

driven development and be ideally not

having to duplicate our work and just be

able to use the front-end code that

we're doing for the style guide driven

development in our Drupal theme has

anybody here tried doing that before

it's not always fun I've got a few gray

hairs from it so first goal was working

with our UX team in our workflow the way

that the AMA teams work together is that

the the IT team is in charge of anything

that involves code at all and the UX

team is designing wireframes and it's

more collaborative than it was but

especially at the beginning of this it

was a lot of throwing stuff over the

wall and so our goal was a to bring

those teams together to be more

collaborative and be to get things in

the browser faster so that our our

business owners aren't signing off on a

piece of paper they're signing off on a

website so the plan was that going

forward with the style guide driven

development we can easily scope new

pages because we understand the

functionality we've created patterns

before we can easily reuse them and we

can facilitate that collaboration

between the ITM UX team so that they

understand the constraints that we're

working in and we understand the

constraints that they're working

and create a new style guide so that

seems like okay so our cxl who set out

this tear like this huge this to turtle

for us to overcome with hispanics pages

was completely overwhelmed not only with

the functionality of how the pages acted

and worked and all of the content that

we were able to make it fit into them

but also the fact that they were fully

responsive worked awesome on all

browsers and really like above and

beyond the team the work that the UX

team and the IT team did together was

phenomenal so we started it our plan was

to start with pattern lab and use that

as our living style guide for the

project as I said we kind of wanted to

take the wireframes that were given from

us to UX and get them into pattern up

into rapid prototyping as quickly as

possible

so the ideal was awesome so we already

have the HTML we already have the CSS

how do we get that into Drupal without

having to copy and paste and tweak and

whatever so enter around one of our

style guide this is just a picture of

the topics page mock-up or the prototype

that exists and this is live there are

links you guys can check it out later

it's all public and so in what we're

lovingly calling sp1 our first iteration

we were able to start with pattern lab

we're using a toy version so it'll go

right into Drupal and we're prototyping

quickly and we're directly ingesting the

CSS and the JavaScript into Drupal so

pretty close one of the ways that we're

doing that is we are using all of the

siblings so when you're working on local

development and when you're in

development by default our build process

goes through and links the assets from

the pattern lab style guide which is a

composer dependency from the vendor

directory into the theme file so these

are our CSS start telling assassins

compile

into CSS into the theme directory and

then our JavaScript as part of what's

making that work is that we're actually

using Drupal's the way Drupal attaches

behaviors of j/s within our style guide

so that any Java scripts that we're

using from the beginning is going to

behave the exact same way in the static

environments that it will in the dynamic

one later step awesome we were really

proud of that we were able to get things

moving really quickly and get feedback

on them and iterate and we really built

out a great collaboration between the UX

team but we knew we could do better so

that's you - we reformatted and

reiterated to set ourselves up with even

better foundation for the full

integrated AMA site and so what you're

seeing here is a screenshot of the new

topic page prototype so in FG - the goal

was to expand on what we had already

built so we're already using the CSS and

the JavaScript Andrew Boldt

but we want the tweak - because we don't

know how to settle and the goal was we

create it once and we want to use it

everywhere like we don't we want to know

that it's going to be the same thing in

all places we want to be able to test it

and our style guide and know it's going

to work in the Drupal and ease our minds

a little so how how do we do the thing

so I pulled up an example pattern um you

may seen this earlier this is a tools

block this is a block in Drupal it's an

organism and pattern lab and it's

created of a couple different molecules

it's generally divided up into two

sections this like resource list at the

top and then these like learn more links

at the bottom and it looks pretty

straightforward but it actually gets

kind of complicated um however this is

the twig that lives in pattern ah that's

driving that beautiful piece right now

you're just seeing like I'm linking I'm

calling it a heading for the what will

be the block title in Drupal I'm calling

in a molecule called tools list which

was again Joanna

and that's just generating the list of

all of those icons and links to PDFs or

powerpoints whatever home and then at

the bottom when we're calling in another

list what we're calling tools learn more

which is just a list of links generally

off-site so if we dig into okay so

that's the organism if we dig into the

things that are actually the meat of

that these are the tweak files that

populate the molecules within that so

you'll see again still pretty

straightforward if we're looking at the

tools list so we're talking about those

icons with a title and some metadata

we're just looping them through an Li

where we're including a little bit of

configuration there around the tool to

really format the icon and everything

separately but mostly most of what we're

doing is creating a twig block and

putting it in a list and then wrapping

each Li and similarly on the learn more

same kind of concept we're creating

another twig block we added a heading

and then we have another block inside of

it and for each Li in that list we loop

through and print out a link oh really

complicated but it's a good of matter

work when you start to reverse-engineer

it

so how does this actually work so those

are all the pattern lock files but how

do I actually use them in Drupal so

everything that I've shown you options

at this point is how do we get the

static pattern lab to do a static thing

and like I said we're using an SG one we

had already set up that we were going to

use the pattern lab as a composer

dependency so it's a dependant of our

project and when we build our project it

creates the vendor it creates that

repository in our vendor directory and

then it'll seem like those CSS and

JavaScript files in this case it also

goes ahead and creates sort of another

directory where it's sim linking all of

the twig files as well into the theme so

we now have

we now have that as our default on

Drupal when you're developing locally

that you're going to have all of these

siblings which is awesome especially if

everything you want has already been

prototyped first and then you're moving

on to theme like you've already

prototyped it you've already done all of

the configuration site building

development and you're ready the theme

that's really awesome because all of

that code already lives up on github

pages it's already in the assets that

we're pulling in as part of the tag for

our composer dependency and all of that

will work perfectly for you and when you

build the artifact what will happen is

instead of linking those files it'll

copy them directly to the correct place

however the wrench that we kind of threw

in that is because our UX team doesn't

write HTML and CSS because that's part

of the feds responsibility that means

that sometimes we have to make up in

pattern lab and immediately make it in

Drupal the exact same which is a little

hard if you're waiting to like make a PR

merge it deploy it make sure all the

codes final go back into Drupal do it

again it's really frustrating

so the wrench that we throw into this is

that I want to I want to sit down at my

computer as a front-end developer and be

able to have my pattern lab up in one

window and my group 11 the other and

make a change and see it magically just

happen in both places no matter what

because it yeah really

um so the solution we engineered was we

as part of our provisioning we can

switch it to say I don't want you to

look at the vendor directory when you're

building I want you to look at this

local copy I have of the same repository

and this is a change that we make what

we don't commit and that's terrible I

know but it's a thing um so I want you

to look at this sibling directory that I

have to my Drupal site it's the pattern

that repository but it only exists

locally so instead of sim linking from

the vendor directory it'll send link to

that

and there's additional help from UI

patterns and components modules these

are both really fabulous and I could

talk for 40 minutes on just them but

there were links go hang out and try

them out but so what that gets me in

Drupal is if that means that that same

organism that we looked at I can just

extend from pattern lab to Drupal so

when this is my Drupal it's a block

template so when Drupal looks at this it

says okay go find organisms and then

that toy template and because I'm

already pulling in those twig templates

into my theme it sort of knows like

where to look for organisms molecules

atoms and you can see it's doing the

exact same it's it's using the same

block extends that we were using in the

style guide and it pulling in and

replacing that content with instead of

whatever the content was I was telling

it from pattern lab I'm using field

table the field tools etc so okay well

and good but it seems like there's still

probably some stuff going on in those

fields and there is similarly the way

that the molecules were structured these

the fields are now extending those

original molecules that we looked at

that the organism was ingesting so where

we're using molecules and twig we're now

correlating those two fields in Drupal

so we have field templates that do the

same thing um field content tools field

lists and field content tools field

learn more and they're doing the same

thing they're extending those original

molecule files from pattern lab going

and finding those to either send links

or link directly depending on if you're

local or on an artifact and looping each

one through and might be in the markup

match which is the magic that we asked

for ultimately that came out of that it

meant that now I can sit down at my

computer and I can build a thing in

pattern law and I can see that same

thing in Drupal and the markup will

match it will adjust the same twig files

it will ingest the same CSS file it will

ingest the same JavaScript files

and it means I do my job a whole lot

faster because I do it once and not

twice yeah configuration so this was our

first at the AMA is our first Drupal a

site so it was kind of odd

you know our first foray to configure

the configuration management stuff that

I'm sure you all are familiar with in

Drupal 8 now we were coming from you

know kind of a shell-shocked a

terrifying experience of working

features in Google 7 but even as great

as configuration management is in Drupal

fits all kind of a deal so you know we

found that you know as developers in our

local environments we wanted certain

things like devel and search kins and

database logging are you 80 QA people

needed masquerade so they can try

different user roles to make sure that

the functionality that we defined work

correctly for the right people and you

know shield module to keep people from

seeing that site stakeholders had things

they wanted in the production

environment including their sample

authentication for our SSO environments

and a bunch of great aqueous stuff like

lift and content hub so in t7 our

experience was you know we had a custom

script that pulled a database backup

down and imported that into our local

and copied the file system down with our

sink and then we had to enable/disable a

lot of things otherwise we would get all

kinds of warnings about aqueous lift or

you know

a number of things that were configured

in the production viber who didn't work

correctly in our locals and their RDA

experience prior to can fix split was we

didn't we didn't live this way very long

we found configs look pretty early on

but you know when you run their config

export you get everything that you've

ever enable there - that's enabled

currently rather and so you get a lot of

stuff that you don't you get into a

commit this don't commit that kind of

scenario so you know here yeah there's

all kinds of aqua a Content hub

configuration that wants to be exported

to my local config because that's what's

in the production database Ock we have

purged things all this stuff that I

don't need local you don't want so now

we use config split so that allows us to

sprout configuration kind of on a per

environment to work or per whatever

basis you've been defined as nice quits

as you want and it'll take that

configure out of there your main sink

directory or we call it config but I

think maybe towards sync it moves that

out into this twist you've defined so

and you can split things with a complete

split which is take this entire module

and everything kind of wholesale and

move that out of your base configuration

and put that into your split configs

what you know Shido

lots whole module is doesn't that's a

good use case for those we also have

conditional splits which will be primary

integration in the main sync directory

but if it you know if

in one of the school environments ill

read from a new file define there the

documentation for config so it's really

really good so I suggested we look at it

and so here's an example of our local

config split and if you can piss

hopefully the font size is big enough

but on the left is that config split dot

config split that local valley animal so

this is how it will go I did choose

names

this is how our local is define and you

can see here that this is the folder and

this all gets defined in the UI and then

exports this ham will have to write

anything but this is the folder we

specify where our split stuff will go

you can see that these modules happen

who had of cord out extension died Amal

and they now exist in this this file

which is the only file for the split

that exists in the main sync repository

at this point so everything you see here

DB log devel the bell generate content

search can't those all are now defined

this part of the split so on the right

you'll see this is our file structure

and you can see that everything kind of

DB logged a bell is these settings are

all here

if you look here blacklist this is where

individual pieces of configuration can

get defined as as being part of this

split so in this case the file system

and the performance settings we also

have squid so and you can see those

correspond so these last two pieces of

configuration right here so that's

really great for us locally our test

since our stage environment looks has

quite a lot of other stuff it's got all

of our hoc huius things because that's

where it's hosted it's got CloudFlare

purge things again

file file system and the performance

settings also split those are kind of

standardized across all four sites to

each have to have something

depending on where they're at but and

then here's a little bit simpler but so

this has given us kind of real nice real

nice user experience when we pull down

the database for the live site and we

just run a run our build scripts and do

a configure import it should say nothing

needs to be imported or running config

export it should there should be no no

proc config is getting you know put into

our base configuration and we're not

aware of how we're not controlling for

so it works kind of from a high level

the environment that you're that you

want to be using is set in your settings

that PHP so for us you know being

awkward we have Parkway environment

variables that tell us if we're in you

know production stage or or a dev site

and if we're local we have our hands

will sorry Ansel overalls that tell us

that so the code looks like this you can

see we've got all the environments that

we have defined squits for in this

variable this loop just kind of checks

through if you're in on your aqueous

site you know and match basically match

that environment config to true

and that's it so locally we've got

config local status equals true and

that's what indicates to us that that's

where look for our active configuration

so yeah this is this all this all has to

happen because config split like default

just says define a split environment and

then tell me if it's on or off so

completely it doesn't know anything

about these things so you have to kind

of based on the environments you have

figure out how you're going to turn each

of those split environments on or off so

that's kind of instead of instead of

flipping it all in the UI and every

different environment this automates

that whole process yeah and you can

still override this with the global

config variable which is like I know why

I ever do this this is a you know the

terrible example that's definitely not

deadly not because I just wrote this

like 20 minutes before we walked in here

but if you wanted to set your

pre-processing to true in your settings

PHP and override what is defined in your

config you can do it just like this so

if you have you know environment

variables that you need to use to set

certain things you can still define that

stuff in settings.php you know and have

have all that stuff

working well with your configuration

system and you can also see using the

config command and rush and you can use

the blue overridden flag on there so you

know I want to look at what what this

wants to find in config I can dude rush

you can fit and then define the config

that I'm after so I can see that

pre-processing JavaScript is set to

false in my configuration but if I kudi

overridden I can see that I've got I

have said to true somewhere else so

that's a kind of handy way to to just

kind of stay on top of what you're if

you're in the UI and you you know I

forgot that you had these variables set

in your settings PHP or somewhere else

and you're confused while you're not

seeing something they think you should

be seeing this is sort of the way to get

ahead

so yet that was kind of a huge thing for

us configuration locally was always kind

of really tragic and and this is one of

my favorite my favorite things all the

other stuff that you know that we've

done we've kind of helped we hope to

stake overs a lot but it wants a lots

nice to get him something that that

helps out the dent team as well so yes I

know for me you want to talk about

lessons learned yeah lessons learned but

we felt flexible ants with drag-and-drop

with the panels and face editor and all

the awesome custom blocks the rapid

prototyping with our UX cam and use

pattern lab and then the our lives are a

lot better with the configuration split

so what's next

I made this slide so yesterday

eight-five was released and layout

builder is now in core and layout

builder is how we want to do layout

analyzer type things going forward so we

haven't really started working with this

yet but this is I'm really sorry about

the colors I was but layout builders is

is the effort to get all of this because

there's been so many different ways to

do this and it's been ugly and you hated

panels and this has just been a problem

for a really long time and it needs to

they need to be one approach in court to

do it and so Tim Plunkett and a lot of

really amazing people have done a lot of

really great work like layout filter so

that's that's the next thing we're gonna

get right on

give you a question but I don't know if

there's anybody I don't evaluate from

the original vote between analyzer and

paragraphs anyway you're from the other

side of that mode from the paragraph

side yeah no yeah their question was who

was wanted to do paragraphs can you

summarize what their reasons for their

votes were well we already decided to go

with panels but yeah I mean he was the

curb rest I yeah you know I I started

advocating for paragraphs and just

because that's what I had always used

and and like I said I pretty soon after

I like started prototyping like here's

what we would have to do with paragraphs

if we actually wanted to do all these

things I was like yeah paragraph sucks

for this I mean in paragraphs does a lot

of power but it's not a layout builder

so so yeah I need to fight really by the

end nobody was arguing for her ghost

compare - is great if you have a really

clearly defined content model and you

know what your pages are going to look

like and our content editors didn't know

any of that so this offers a lot more

flexibility to them than paragraphs did

in a way this friendlier to them but now

we have sort of cases where we're gonna

use paragraphs inside a flip builder let

me go back I mean that paragraph is a

really great module and there's still a

place for paragraphs yeah in our site

just not there yeah I'm still getting

paragraphs on every site that I go

nothing paragraphs

I'm on this page but we're arguing about

that count

yeah here's the throw down inside the

box yeah so I had a chance to play

around with with multimodal support or

with like little aeration even the

context analyzer okay the question is

about whether we've worked with

multi-site and workflow demos I think

well I'm sorry mechanic well we don't

deal with multilingual at all because

it's the American Medical Association

and you know all doctors speak English

right so that's not that's something

that we don't have to worry about

workflow is something that we have to

worry about and we're definitely have to

worry about that with AMA one site going

forward right now we had a controlled

group of editors that were editing these

topics pages that we fully trusted and

we're gonna revisit that I don't know

how good the workflow the moderation is

going to be using this approach

I think there's problems with it's fair

to say that the topics pages are more

like a landing page and that the

entirety of the site is not in evidence

fireman yes yeah yes yeah we've much

stricter like going forward we're gonna

have much more defined content models

and use cases for specific pages but

yeah in in looking at the topics page

pages specifically like it was really

like how can we make it as flexible as

possible so that people can use this as

a place to get to the other AMA

information out there cuz really yeah

all of the content in this whole

situation is really just metadata yeah

so the the whole use case was a man's a

lot of properties a lot of information

we want to consolidate a lot of that

into a place we don't have the time or

money to actually consolidate it or

necessarily the like the need but we

want to be able to give people a single

place where they can get to a lot of

disparate content sources only one

really poor thing that the dimension is

that the person was building these

topics pages you know we launched it and

then he had a couple weeks to build

these and if he built all of his pages

in a day and then he's like well let's

just watch him and it was Halloween and

so we have a moment surely because they

were done and he said this is really an

easy thing for him to do so I think by

putting all of our work into thinking

about the content editor experience it

was very helpful to make it a little

harder

you make it harder so you didn't have to

lunch on Halloween I should say yeah

yeah I should put some Ajax dinners in

there somewhere

that we got for you create three nodes

that we got it Mike Leake chefs you out

questions question yes how do panelizer

two pages work with search do they get

ignored by the Search Indexing or did

they get there is no search yeah we

didn't have such requirements for the

objects pages because we we put this

these six pages into our main solar

search engine on an honor corporate site

so that's where there's no search on

these pages these are destination or

landing pages for the site search if

you're searching the site did they did

get included in yes for external search

I felt a second sitemap.xml for about

loading two to Google and then we

included them in our solar index yeah

and one of the things that we didn't

show that there the the node those the

topic node is a title of analyzer field

and that we have an extra like

description field and some of that

description field he's in rendered on

the page but it goes into the metadata

so for Open Graph and and got a Google

search it'll pull that that's rendered

in the header

yeah so if there if there are more

questions we could like pull out the

site that's around do a little demo for

Co minutes or yes yes right up okay

right

[Music]

what uh what what kind of what you want

to see yeah

oh yeah we were gonna take it down

someone I thought that that was part I

think you mean that there's nothing like

a live demo of resurrecting breath

component

yeah I can do that pull down here so you

might need to long yeah it might take me

a second to just pull up there we go -

yeah can you guys explain about the gray

backgrounds that are behind some of

elements that we can't see

what about the fact that they're there

so projector resolutions are notoriously

terrible this has a great background on

hand and there are a number of other

elements where there are several grades

that you're not going to see on that

screen but you would see on a computer

screen that's much higher resolution

contrast ratios are hard yeah

accessibility is tough on all of us

you're okay sorry this is gonna take me

a minute this isn't my computer and I've

got myself as a developer I'm only

really type-a you know the questions I

can answer we can answer while she's

figuring it out see I know I broke and I

wasn't entirely surprised by that they

pretty much talk about nerds team yeah

so things I didn't mention um when

you're digging into the components

module I really highly suggest if you're

interested in a integrated pattern lab

and Drupal 8 experience then I would

highly suggest googling the words nerd

steam and pattern lab and Drupal 8 and

maybe components Adam has a really great

blog post that inspired a ton of the

work that we did we did experiment with

a number of different pathways to get to

where we got but Adams insightiq closest

to what we what we ended up doing and he

has a really great blog post where he

talks through how to do all of the

things of setting up your pattern lab

and having that having this wit plow

suggested it's truthful in a way that's

usable in your theme

[Music]

that's what you're after oh right

because yeah

and I also want to point out in case you

guys are curious all of our especially

our front end code I don't is all of our

all of our front end code is public and

there are links to it on the large

screen shots at the prototypes in our

slide deck so if you guys are interested

in digging in more to the way that we're

are projecting things you have access to

all of this on the interweb part of the

reason we do that is the MA depends a

lot on vendors to build one-off

microsites and everyone has like their

own projects and we want to make sure

that we have a consistent looking across

all these projects so when developers

come in or a company gets a contract to

build a site they they can have it look

like we want it to look so this is gonna

take me a second to get up and running

but if you guys so I will pull up the

organism that I was looking at earlier

which is our tools block and you can

actually see it on our topic page if you

dig around a lot then you can see stuff

that's not on Drupal yet there we go

and we're downloading DePalo Wi-Fi yeah

this was not gonna happen I said pull

the repo up there people want if people

want to see this I'll be around all

weekend

and I have my laptop which it's all set

up for that girlfriend yeah it is set up

for front-end development um so sorry

DePaul Wi-Fi thank you I don't know if

we if we wanted to look at though what

just how to edit a page yeah so say

whatever oh I have the theme all right

I'm gonna just no I'm just demos yeah

this is live demos have always gone you

know it was computer ok you're good now

okay so like for example masquerade I

thought we had to say about this local

yeah well I activated some suggest honey

so we do a lot with med students the use

case are gonna fix quit here though yeah

and I think we actually have masquerade

turned off locally you just turned it on

because otherwise I'll show up on every

page so there are two things we do only

have the one

so we these are hasn't happen you get

more options yep so when we have

different layouts they'll be able to

choose the layouts here

and then you can edit the page here and

just drag things around the dragon key

change content we mean to change the

content like the text in a member block

or something you wanna do it yeah so

this is the edit screen so you can see

this is kind of a full nested edit page

in you know right in the IPD this is an

example of the the end of your reference

view mode selector so you can see if we

want to this is local right yeah yes if

I'm an imitator so if we wanted to

change this from a know image related to

like a small image we just change that

drop down and add update and then image

pops up there again you can you can have

all the power of the irregular Drupal

site reordering stuff etc

so these are references to articles that

live on a different website and we pull

in The Associated images they can use

them if they want something okay it's

back you're good okay yeah so you can

drag and drop save content night got

kind of completely reordered bitch

so they can do anything they want to do

that you've designs that we that we've

told them they can do yeah these are all

custom blocks you know most of which

just have a few fields so this is just

like a title a description and you know

a link for the button that's you I know

so these don't appear on the block

placement page these are all like the

this configure only exists offers that's

not I think that this this only exists

on the node itself right on in each like

field panelizer instance yeah so if you

were I mean we were basically not using

the kind of standard block placement but

if you were to go in here and do place

block you would see every instance of

every custom that we've defined so you

know theoretically you could you know

somebody could go I never use those in

one of the problems we have with this

custom block library and we'll probably

if we continue to use this we're gonna

have to find a way to organize this

better for content editors because right

now is this one really long list of

blocks right but the editor team doesn't

really do go into go into this at all

the way that they would

and an existing block is to go into

custom here and so this is a list of all

of the blocks and the IP even has a nice

filter so you can just type in tool and

see all of the existing tools blocks

click on plus tell it where you want

that tools block to go and hit add and

they'll add that right right there so

put that at the top save so so really

the content team does almost all of

their there pretty much 100% of their

layout management on the note pages

themselves they just go into the edit

screens for kind of adding extra content

they want yeah and and most of their

interaction with the site it's gonna be

on the front end so it's a lot easier

for them to understand how the page is

going to be created than it is with them

filling out form fields on an edit I'm

like I know that it's green that's all

the time thanks everybody