In this post, you will learn about:<\/p>\n
- \n
- the layout profiler that enables viewing layout structure and context<\/li>\n
- using layouts for editing, adding, rearranging and removing the content of the web application.<\/li>\n<\/ul>\n
Layout profiler<\/h2>\n
For layout context investigation – to better understand the relationship between the layout blocks – use Layout profiler<\/a>.<\/p>\n
Note<\/strong>: Layout profiler is available only in the development environment with `debug` mode enabled.<\/p>\n
Before you begin, enable all Layout Profiler options in System > Configuration > Development Settings<\/strong>:<\/p>\n
![\"Debugging](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/LayoutDevSettings-2.png\")
<\/a><\/p>\nThe options are:<\/p>\n
- \n
- Include Block Debug Info Into HTML<\/em> – adds a unique identifier of the current block (data-layout-debug-block-id<\/em>) and a rendered template of the current block (data-layout-debug-block-template<\/em>) to the block HTML attributes.
\nExample of the html source code after the option is enabled:
\n![\"LayoutSourceCode\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/LayoutSourceCode-1.png\")
<\/a><\/li>\n- Generate Layout Tree Dump For The Developer Toolbar<\/em> – enables rendering of Layout Tree.<\/li>\n<\/ul>\n
Now you can view web page layout structure and discover layout context items.<\/p>\n
View layout context items<\/h2>\n
Open any page in your web application and hover over the Layout:<\/p>\n
![\"Layout\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/LayoutSymfonyProfilerMenu.png\")
<\/p>\nWhat you get is the list of layout context items (action<\/em>, route_name<\/em>, theme<\/em>, etc.) and their values.<\/p>\n
![\"LayoutSymfonyProfiler\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/LayoutSymfonyProfiler-1.png\")
<\/a><\/p>\nView layout structure<\/h2>\n
When you click on the Layout, a layout blocks tree pops up and you can analyze the blocks mutual location and nesting. The data-layout-debug-block-id<\/em> attribute of the block is used as a tree node name.<\/p>\n
![\"LayoutStructure\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/LayoutStructure-1.png\")
<\/a><\/p>\nCustomize a web application<\/h2>\n
Modify a web page using a TWIG template<\/h2>\n
Layouts come handy when you customize a web application. Following the steps below, you can add a custom link into the unified web application footer.<\/p>\n
Start with creating a new html page (e.g. the one you are reading now) and a controller<\/em> to render it:<\/p>\n
namespace OroBundleDemoLayoutBundleController;\r\n\r\n use SymfonyBundleFrameworkBundleControllerController;\r\n use SensioBundleFrameworkExtraBundleConfigurationRoute;\r\n use SensioBundleFrameworkExtraBundleConfigurationTemplate;\r\n\r\n class DefaultController extends Controller\r\n {\r\n \/**\r\n * @Route(\"\/about-layouts\")\r\n * @Template()\r\n *\/\r\n public function showAboutLayoutsAction()\r\n {\r\n return [];\r\n }\r\n }<\/pre>\nNext, in Layout tree, find an appropriate location for the new block with the link to About layouts<\/em> page.
\nFor example, create a new about_layouts_block<\/em> inside the footer_menu_container<\/em> block:<\/p>\n- \n
- In the \/DemoLayoutBundle\/Resources\/views<\/em> create a layouts<\/em> folder and sub-folder named by your active layout theme.Note:<\/strong> If you use a default theme, create a default<\/em> sub-folder. You can verify the active theme in the layout context items by hovering over the Layout.Let us use the following path: \/DemoLayoutBundle\/Resources\/views\/layouts\/default<\/em>, which means that we modify a layout for the `default` theme.<\/li>\n
- At the newly created location, create `layout.yml` that defines a block with `link` blockType and adds this new block into the footer_menu_container<\/em>:\n
layout:\r\n actions:\r\n - '@addTree':\r\n items:\r\n about_layouts_block:\r\n blockType: link\r\n options:\r\n route_name: oro_demolayout_default_showaboutlayouts\r\n text: 'About layouts'\r\n tree:\r\n footer_menu_container:\r\n about_layouts_block: ~<\/pre>\n<\/li>\n<\/ol>\n
This will result in the following layout tree:
\n![\"footer\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/finalUpdatedFooter-1.png\")
<\/a>
\nThe web application footer has temporarily changed to the following:
\n![\"simpleUpdatedFooter\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/simpleUpdatedFooter.png\")
<\/a><\/p>\nNow, apply a block theme for the new block by creating a dedicated TWIG template. You probably would like your new link to blend smoothly with the other footer elements.<\/p>\n
In your web application, inspect the source code in the footer block to get the general idea of the template you need:
\n![\"inspectUpdatedFooter\"](\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2016\/09\/inspectUpdatedFooter.png\")
<\/a><\/p>\nIn the actions in DemoLayoutBundle\/Resources\/views\/layouts\/default\/layout.yml<\/em>, add @setBlockTheme<\/em> command with the similar theme:<\/p>\n
actions:\r\n - '@setBlockTheme':\r\n themes: 'OroBundleDemoLayoutBundle:layouts:default\/layout.html.twig'<\/pre>\n
and create a new block theme file – DemoLayoutBundle\/Resources\/views\/layouts\/default\/layout.html.twig<\/em>:<\/p>\n
{% block _about_layouts_block_widget %}\r\n<\/pre>\n\nHow-to’s<\/h2>\n
{{ block_widget(block) }}<\/p>\n<\/div>\n
{% endblock %}<\/p>\n
After these changes, the link in the footer has moved to the How-to’s section to the left from the original footer content:
\n<\/a><\/p>\nModify a web page using layout actions<\/h3>\n
Prerequisites<\/h4>\n
Modify \/DemoLayoutBundle\/Controller\/DefaultController.php to use OroBundleLayoutBundleAnnotationLayout<\/em> instead of the SensioBundleFrameworkExtraBundleConfigurationTemplate<\/em>, and replace the @Template()<\/em> with the @Layout<\/em> annotation, like in the following example:<\/p>\n
namespace OroBundleDemoLayoutBundleController;\r\n\r\nuse SymfonyBundleFrameworkBundleControllerController;\r\nuse SensioBundleFrameworkExtraBundleConfigurationRoute;\r\nuse OroBundleLayoutBundleAnnotationLayout;\r\n\r\nclass DefaultController extends Controller\r\n{\r\n \/**\r\n * @Route(\"\/about-layouts\")\r\n * @Layout\r\n *\/\r\n public function showAboutLayoutsAction()\r\n {\r\n return [];\r\n }\r\n}<\/pre>\nAfter these changes, the controller switches to the layout-based page rendering.<\/p>\n
@add custom layout block<\/h4>\n
In the layout tree, identify the parent block for your new custom bock (e.g. content<\/em>).<\/p>\n
In the DemoLayoutBundle\/Resources\/views\/layouts\/default folder, create an oro_demolayout_default_showaboutlayouts<\/em> folder to define a page route name.<\/p>\n
Inside that folder, create a page.yml<\/em> file with an @add<\/em> action that defines a new layout element and nests it inside the block with the specified parentId (use the block name from the layout tree as parentId, for example, content<\/em>):<\/p>\n
layout:\r\n actions:\r\n - '@add':\r\n id: demo_page_content\r\n parentId: content\r\n blockType: text\r\n options:\r\n text: 'Detailed information about using layouts...'<\/pre>\n
Refresh the web page to view the changes.<\/p>\n
@remove existing layout block<\/h4>\n
To eliminate an unwanted element of the page layout, use @remove<\/em> action in the page.yml<\/em> with an id of the block to be removed. For example, you can drop the main menu:<\/p>\n
- '@remove':\r\n id: main_menu_container<\/pre>\n
Rearrange a layout with @move action<\/h4>\n
Use @move<\/em> action in the page.yml<\/em> to change the parent of the layout block and append it to the bottom of the children list.<\/p>\n
For example, take the following layout tree:<\/p>\n
content\r\n|--section-a\r\n|--section-b\r\nfooter<\/pre>\n
If in the page.yml<\/em> you move the footer node into the content node using the following action:<\/p>\n
- '@move':\r\n id: footer\r\n parentId: content<\/pre>\n
The layout will change to the following one:<\/p>\n
content\r\n|--section-a\r\n|--section-b\r\n|--footer<\/pre>\n
Note:<\/strong> When moved, the block gets to the bottom of the list of its siblings. To rearrange siblings, use series of @move actions. For example, to put the footer<\/em> before the section-b<\/em> use the following actions:<\/p>\n
- '@move':\r\n id: footer\r\n parentId: content\r\n - '@move':\r\n id: section-b\r\n parentId: content<\/pre>\n
Updated layout tree is:<\/p>\n
header\r\ncontent\r\n|--section-a\r\n|--footer\r\n|--section-b<\/pre>\n
Using context variables in layout<\/h4>\n
Eventually, you may need multiple pages with a shared layout template to access the same static information, for example, a system-wide sub-menu configuration and maintenance announcement text.<\/p>\n
Note:<\/strong> For an easier debug process, use oro:layout:debug –context command that shows how the context data-resolver is configured.<\/p>\n
To enable sharing context information, pass the Layout context<\/em> as a parameter in layoutBuilder->getLayout<\/strong> method, like in the following example:<\/p>\n
$layoutContext = new LayoutContext();\r\n $layoutBuilder = $layoutManager->getLayoutBuilder();\r\n $layoutBuilder->getLayout($layoutContext);<\/pre>\n
and add the context variables (e.g. static_content<\/em>) and an algorythm that returns their value to the @Layout annotation in the controller:<\/p>\n
\/**\r\n * @Route(\"\/about-layouts\")\r\n * @Layout(vars={\"static_content\"})\r\n *\/\r\n public function showAboutLayoutsAction()\r\n {\r\n return [\r\n 'static_content' => 'The selected product category is temporarily under maintenance. We apologize for any inconvenience. Please come back later.'\r\n ];\r\n }<\/pre>\nAs we have added a new static_content<\/em> variable to the layout context, let’s use its value instead of the static text in the block we created earlier. In the page.yml<\/em> file located in the DemoLayoutBundle\/Resources\/views\/layouts\/default\/oro_demolayout_default_showaboutlayouts\/<\/em> folder, parameterize the text<\/em> value with the static_content<\/em> value in the layout context ($context<\/em>):<\/p>\n
- '@add':\r\n id: demo_page_content\r\n parentId: content\r\n blockType: text\r\n options:\r\n text: { '@value': $context.static_content }<\/pre>\nNow, if you hover over the Layout profiler, you can see a static_content<\/em> context item and its value.<\/p>\n
Using data providers in layout<\/h4>\n
Dynamic data may be bound to layout elements either via data collection in layout context or via dedicated data provider.
\nFor a quick illustration, let us use an existing category_tree service that returns an array of categories to populate the page title for our maintenance announcement.
\nThe category_tree service is defined in the Oro\/Bundle\/CatalogBundle\/Resources\/config\/layout.yml<\/em> in a following manner:<\/p>\norob2b_catalog.layout.data_provider.category_tree:\r\n class: OroB2BBundleCatalogBundleLayoutDataProviderCategoryTreeProvider\r\n arguments:\r\n - '@orob2b_catalog.provider.category_tree_provider'\r\n - '@doctrine'\r\n tags:\r\n - { name: layout.data_provider, alias: category_tree }<\/pre>\nIn the page.yml<\/em> file, use @setOption action to populate the page title text with the first element of the category tree:<\/p>\n
- '@setOption':\r\n id: page_title\r\n optionName: text\r\n optionValue: {'@value': $data.category_tree[0] }<\/pre>\nAdditional resources<\/h2>\n
To help you master the layout management actions, we’ve prepared a `DemoLayoutBundle` with most of the examples provided above. To add this bundle to your application please extract the content of the zip archive into a source code directory.
\nSee also:<\/p>\n- \n
- Using layouts with samples<\/a><\/li>\n
- Layout context<\/a> documentation<\/li>\n
- Layout data<\/a> documentation<\/li>\n
- Theme definition<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Changing any visual HTML part of a complex application like OroCommerce may easily become a challenge for designer or developer. When similar elements and blocks are reused throughout the system, you need a tool to visualize their mutual location without a distraction of the actual content. In OroCommerce, Layouts translate the structure of user interface […]<\/p>\n","protected":false},"author":1,"featured_media":12469,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[132],"tags":[103],"class_list":{"0":"post-12468","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-developers-digest","8":"tag-orocommerce"},"acf":[],"yoast_head":"\n
Debugging frontend layouts | OroCommerce<\/title>\n<meta name=\"description\" content=\"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Debugging frontend layouts | OroCommerce\" \/>\n<meta property=\"og:description\" content=\"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\" \/>\n<meta property=\"og:site_name\" content=\"OroCommerce\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/OroCommerce-333319140210515\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-14T21:59:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-21T03:08:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Oro Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@orocommerce\" \/>\n<meta name=\"twitter:site\" content=\"@orocommerce\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oro Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\"},\"author\":{\"name\":\"Oro Team\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/person\/420bb6bc049bf6da18b714558557558c\"},\"headline\":\"Debugging frontend layouts\",\"datePublished\":\"2017-02-14T21:59:49+00:00\",\"dateModified\":\"2019-11-21T03:08:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\"},\"wordCount\":1208,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#organization\"},\"image\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png\",\"keywords\":[\"OroCommerce\"],\"articleSection\":[\"Developers' Digest\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\",\"url\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\",\"name\":\"Debugging frontend layouts | OroCommerce\",\"isPartOf\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png\",\"datePublished\":\"2017-02-14T21:59:49+00:00\",\"dateModified\":\"2019-11-21T03:08:29+00:00\",\"description\":\"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.\",\"breadcrumb\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage\",\"url\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png\",\"contentUrl\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png\",\"width\":760,\"height\":440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/oroinc.com\/b2b-ecommerce\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developers' Digest\",\"item\":\"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/category\/developers-digest\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Debugging frontend layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#website\",\"url\":\"https:\/\/oroinc.com\/b2b-ecommerce\/\",\"name\":\"OroCommerce\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/oroinc.com\/b2b-ecommerce\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#organization\",\"name\":\"Oro Inc.\",\"url\":\"https:\/\/oroinc.com\/b2b-ecommerce\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2019\/11\/Oro-OLogo.png\",\"contentUrl\":\"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2019\/11\/Oro-OLogo.png\",\"width\":40,\"height\":40,\"caption\":\"Oro Inc.\"},\"image\":{\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/OroCommerce-333319140210515\/\",\"https:\/\/x.com\/orocommerce\",\"https:\/\/www.youtube.com\/channel\/UClxsA8HS9KGEEsvFRn7JkvQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/person\/420bb6bc049bf6da18b714558557558c\",\"name\":\"Oro Team\",\"sameAs\":[\"http:\/\/www.orocrm.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Debugging frontend layouts | OroCommerce","description":"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/","og_locale":"en_US","og_type":"article","og_title":"Debugging frontend layouts | OroCommerce","og_description":"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.","og_url":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/","og_site_name":"OroCommerce","article_publisher":"https:\/\/www.facebook.com\/OroCommerce-333319140210515\/","article_published_time":"2017-02-14T21:59:49+00:00","article_modified_time":"2019-11-21T03:08:29+00:00","og_image":[{"width":760,"height":440,"url":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png","type":"image\/png"}],"author":"Oro Team","twitter_card":"summary_large_image","twitter_creator":"@orocommerce","twitter_site":"@orocommerce","twitter_misc":{"Written by":"Oro Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#article","isPartOf":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/"},"author":{"name":"Oro Team","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/person\/420bb6bc049bf6da18b714558557558c"},"headline":"Debugging frontend layouts","datePublished":"2017-02-14T21:59:49+00:00","dateModified":"2019-11-21T03:08:29+00:00","mainEntityOfPage":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/"},"wordCount":1208,"commentCount":2,"publisher":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#organization"},"image":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png","keywords":["OroCommerce"],"articleSection":["Developers' Digest"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/","url":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/","name":"Debugging frontend layouts | OroCommerce","isPartOf":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#website"},"primaryImageOfPage":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage"},"image":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png","datePublished":"2017-02-14T21:59:49+00:00","dateModified":"2019-11-21T03:08:29+00:00","description":"In this post, you will learn about the layout profiler that enables viewing layout structure and context using layouts for editing.","breadcrumb":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#primaryimage","url":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png","contentUrl":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2018\/01\/7-4.png","width":760,"height":440},{"@type":"BreadcrumbList","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/debugging-frontend-layouts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oroinc.com\/b2b-ecommerce\/"},{"@type":"ListItem","position":2,"name":"Developers' Digest","item":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/category\/developers-digest\/"},{"@type":"ListItem","position":3,"name":"Debugging frontend layouts"}]},{"@type":"WebSite","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#website","url":"https:\/\/oroinc.com\/b2b-ecommerce\/","name":"OroCommerce","description":"","publisher":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oroinc.com\/b2b-ecommerce\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#organization","name":"Oro Inc.","url":"https:\/\/oroinc.com\/b2b-ecommerce\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/logo\/image\/","url":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2019\/11\/Oro-OLogo.png","contentUrl":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-content\/uploads\/sites\/3\/2019\/11\/Oro-OLogo.png","width":40,"height":40,"caption":"Oro Inc."},"image":{"@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/OroCommerce-333319140210515\/","https:\/\/x.com\/orocommerce","https:\/\/www.youtube.com\/channel\/UClxsA8HS9KGEEsvFRn7JkvQ"]},{"@type":"Person","@id":"https:\/\/oroinc.com\/b2b-ecommerce\/#\/schema\/person\/420bb6bc049bf6da18b714558557558c","name":"Oro Team","sameAs":["http:\/\/www.orocrm.com\/"]}]}},"_links":{"self":[{"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/posts\/12468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/comments?post=12468"}],"version-history":[{"count":1,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/posts\/12468\/revisions"}],"predecessor-version":[{"id":80801,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/posts\/12468\/revisions\/80801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/media\/12469"}],"wp:attachment":[{"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/media?parent=12468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/categories?post=12468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oroinc.com\/b2b-ecommerce\/wp-json\/wp\/v2\/tags?post=12468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Layout context<\/a> documentation<\/li>\n
- At the newly created location, create `layout.yml` that defines a block with `link` blockType and adds this new block into the footer_menu_container<\/em>:\n
- Generate Layout Tree Dump For The Developer Toolbar<\/em> – enables rendering of Layout Tree.<\/li>\n<\/ul>\n
- Include Block Debug Info Into HTML<\/em> – adds a unique identifier of the current block (data-layout-debug-block-id<\/em>) and a rendered template of the current block (data-layout-debug-block-template<\/em>) to the block HTML attributes.