WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.016 --> 00:00:04.236 align:middle We're going to work more on this Recipe List Layout later. 00:00:04.406 --> 00:00:06.856 align:middle But, let's do one more things right now. 00:00:07.296 --> 00:00:08.306 align:middle Edit that layout. 00:00:08.816 --> 00:00:13.346 align:middle I want to give our admin users the flexibility to change this title. 00:00:14.196 --> 00:00:17.126 align:middle Cool! Let's add a new title block right above... 00:00:18.196 --> 00:00:19.606 align:middle and enter some text. 00:00:22.776 --> 00:00:24.586 align:middle Hit "publish and continue editing"... 00:00:25.206 --> 00:00:26.756 align:middle then go to the frontend. 00:00:27.306 --> 00:00:33.356 align:middle What I'm attempting to do is replicate this title, or "hero" area - 00:00:33.356 --> 00:00:36.796 align:middle so that we can remove it from our Twig template. 00:00:37.446 --> 00:00:41.606 align:middle But when we refresh, that doesn't look right yet. 00:00:42.276 --> 00:00:43.606 align:middle Go over and look at that template. 00:00:44.416 --> 00:00:50.946 align:middle Ok: to replicate this, we need an h1 tag wrapped in a hero-wrapper div. 00:00:52.316 --> 00:00:56.636 align:middle Right now, layouts is simply rendering an h1. 00:00:56.636 --> 00:01:04.126 align:middle And, by the way, you can, in the title block options, choose between h1, h2 or h3. 00:01:04.356 --> 00:01:05.976 align:middle h1 is what we need this time. 00:01:05.976 --> 00:01:12.766 align:middle So: how can we wrap this in a div and give it a hero-wrapper class? 00:01:13.406 --> 00:01:16.926 align:middle The answer: add a nifty "column" block... 00:01:17.846 --> 00:01:20.756 align:middle then move the title into that column. 00:01:21.376 --> 00:01:22.276 align:middle Cool right? 00:01:22.276 --> 00:01:27.306 align:middle Finally, when you click on the column, you can add any class you want. 00:01:27.566 --> 00:01:29.696 align:middle Add hero-wrapper. 00:01:30.506 --> 00:01:31.236 align:middle Let's try it! 00:01:31.546 --> 00:01:35.986 align:middle Hit "publish and continue editing", refresh the frontend and... 00:01:36.406 --> 00:01:37.556 align:middle much better! 00:01:38.336 --> 00:01:39.536 align:middle What about that text? 00:01:40.106 --> 00:01:44.136 align:middle Copy it, add a new "text" block right below our "title" and... 00:01:45.636 --> 00:01:49.926 align:middle paste . Publish and continue editing again... 00:01:50.816 --> 00:01:53.296 align:middle try the frontend again and... 00:01:53.576 --> 00:01:54.566 align:middle look at that! 00:01:54.826 --> 00:01:56.586 align:middle A perfect replica! 00:01:57.246 --> 00:02:02.456 align:middle To celebrate, over in the template, we can remove that section entirely. 00:02:03.306 --> 00:02:05.856 align:middle The end result is the same as before... 00:02:06.336 --> 00:02:11.536 align:middle except admin users now have the ability to change the text. 00:02:11.536 --> 00:02:16.796 align:middle Though, you probably noticed that this did require me to be a bit technical: 00:02:17.586 --> 00:02:21.266 align:middle I had to know the CSS class that the column needed. 00:02:21.876 --> 00:02:27.656 align:middle If the admin users designing your layouts are a bit technical, then this might be no problem. 00:02:28.146 --> 00:02:35.466 align:middle But if your editors are less technical, you could, instead, create a custom block type - 00:02:35.806 --> 00:02:40.616 align:middle like a hero block - where the user just types in the text 00:02:40.616 --> 00:02:43.486 align:middle and you render this whole thing for them. 00:02:44.096 --> 00:02:47.126 align:middle We're not going to create custom blocks in this tutorial... 00:02:47.346 --> 00:02:51.206 align:middle but that's mostly because, by the end of the tutorial, 00:02:51.586 --> 00:02:55.006 align:middle you'll know everything you need to follow the docs for that. 00:02:55.716 --> 00:03:00.696 align:middle All right, back on the front end, layouts comes with its own web debug toolbar icon. 00:03:01.096 --> 00:03:04.166 align:middle And if you click this, it's pretty cool. 00:03:04.776 --> 00:03:07.176 align:middle We're going to use this a bunch of times. 00:03:07.446 --> 00:03:12.686 align:middle It shows you the layout that was resolved and even the reason why it was chosen. 00:03:13.346 --> 00:03:17.396 align:middle But the really useful thing is the "rendered blocks" section. 00:03:17.946 --> 00:03:22.186 align:middle This shows us all the layouts "blocks" that were rendered to build this page. 00:03:22.906 --> 00:03:28.656 align:middle You can see there's one called "Twig Block" for the top nav, a "Column", then the "Title", 00:03:29.346 --> 00:03:34.866 align:middle "Text", "Full View Block" and finally the last "Twig block" for the footer. 00:03:35.876 --> 00:03:39.726 align:middle This is a great way to see all the different blocks that are being rendered, 00:03:40.126 --> 00:03:43.506 align:middle as well as the template behind each one. 00:03:44.276 --> 00:03:48.076 align:middle Later, we're going to talk about overriding those templates 00:03:48.076 --> 00:03:50.326 align:middle so we can customize how they look. 00:03:51.116 --> 00:03:54.936 align:middle Back in the layouts admin, Publish the layout to get back to the main page. 00:03:54.936 --> 00:04:01.436 align:middle If you go to /admin, you'll find that our app already has EasyAdmin installed. 00:04:02.016 --> 00:04:05.956 align:middle Let's add a link from the menu here to Layouts to make life easier. 00:04:06.816 --> 00:04:10.546 align:middle Open src/Controller/Admin/DashboardController.php... 00:04:10.546 --> 00:04:12.836 align:middle and find configureMenuItems(). 00:04:13.386 --> 00:04:19.836 align:middle Add another with yield MenuItem::linkToUrl(), call it "Layouts" 00:04:20.346 --> 00:04:24.066 align:middle and give it some icons: fas fa-list. 00:04:24.066 --> 00:04:30.526 align:middle For the url, use this->generateUrl() and pass in the route name, 00:04:30.776 --> 00:04:34.706 align:middle which happens to be nglayouts_admin_layouts_index. 00:04:35.306 --> 00:04:40.816 align:middle Perfect! That's a small detail, but now when we're on /admin, 00:04:40.976 --> 00:04:43.526 align:middle we can click "Layouts" to jump right there. 00:04:44.516 --> 00:04:46.166 align:middle Okay, status check! 00:04:46.576 --> 00:04:51.706 align:middle We can render Twig blocks and mix in title, text, HTML, Google Maps 00:04:51.706 --> 00:04:54.076 align:middle and other blocks wherever we want. 00:04:54.876 --> 00:05:00.126 align:middle The more Twig blocks we have in the template, the more flexibility we have here. 00:05:00.746 --> 00:05:06.536 align:middle But what about being able to render a collection of recipes from our database, 00:05:06.976 --> 00:05:10.506 align:middle like the "Latest Recipes" we have on the homepage? 00:05:11.106 --> 00:05:15.616 align:middle That's a big piece of layouts: so let's start diving into it next.