I85PREP
⌘ K
Adobe Commerce Front-End Dev Expert study materials
Adobe Commerce Front-End Dev Expert study resources

Adobe Commerce Front-End Dev Expert practice questions

One question at a time. Build your Adobe Commerce Front-End Dev Expert understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1Theme development and layout

In Magento's layout system, which XML file type is used to declare the page structure, containers, and blocks for a module's frontend output?

  1. Web API configuration files located under etc/webapi.xml
  2. Dependency injection files located under etc/di.xml
  3. System configuration files located under etc/adminhtml/system.xml
  4. Layout XML files located under view/frontend/layout Correct answer.

Explanation

Layout XML files in view/frontend/layout define containers, blocks, and references that build the page structure. The other XML types configure object wiring, API exposure, or admin settings rather than rendering.

Question 2Theme development and layout

Which layout instruction is used inside a layout XML file to add a new child block into an existing container or block?

  1. <block name="..."> Correct answer.
  2. <update handle="...">
  3. <referenceBlock name="...">
  4. <remove name="...">

Explanation

A <block> node declares a new block and nests it under its parent element, which is how children are added. <referenceBlock> targets an existing block for modification, while <update> pulls in another handle and <remove> deletes a node.

Question 3Theme development and layout

What is the primary purpose of a layout handle such as catalog_product_view?

  1. It maps a URL rewrite to a controller action.
  2. It defines the template file used by every block.
  3. It registers a block class for dependency injection.
  4. It identifies a set of layout instructions applied for a specific page context. Correct answer.

Explanation

Layout handles group layout instructions that are merged when a page matches that context, such as a product view page. Handles are combined into a final layout that renders the page.

Question 4Theme development and layout

Which file is the root layout file that defines the overall page skeleton for all storefront pages?

  1. cms_index_index.xml
  2. routes.xml
  3. page_layout/1column.xml
  4. default.xml Correct answer.

Explanation

The default.xml layout file provides the base page skeleton (html, head, body, containers) applied to all pages. Page-specific handles then merge additional instructions on top of it.

Question 5Theme development and layout

Which directive in a Magento template file outputs a value escaped for HTML context?

  1. echo $block->getTitle()
  2. $block->escapeHtml($block->getTitle()) Correct answer.
  3. print $block->getTitle()
  4. <?= $block->getTitle() ?>

Explanation

escapeHtml() applies HTML escaping to a value before output, protecting against injected markup. Raw echo or print statements bypass this protection.

Question 6Theme development and layout

What does the getChildHtml() method do when called inside a block's template?

  1. It renders the HTML output of a named child block. Correct answer.
  2. It returns the child block's class name.
  3. It loads a child template file by path.
  4. It registers a new child block at runtime.

Explanation

getChildHtml($alias) renders and returns the output of the child block registered under that alias. It does not load files or create blocks; it renders existing child blocks.

Question 7Theme development and layout

Which Knockout.js binding is used to render a list of items by iterating over an observable array?

  1. data-bind="text: items"
  2. data-bind="value: items"
  3. data-bind="foreach: items" Correct answer.
  4. data-bind="visible: items"

Explanation

The foreach binding repeats a block of markup for each entry in an observable array. text, visible, and value bindings handle single values rather than collections.

Question 8Theme development and layout

In Magento's frontend, which LESS mechanism lets a theme override a variable defined in the parent theme's _variables.less?

  1. Declaring the variable in the child theme's _variables.less after importing the parent Correct answer.
  2. Registering the variable in theme.xml
  3. Editing the parent theme's source files directly
  4. Adding the variable to a layout XML argument

Explanation

Child themes can override variables by declaring them in their own _variables.less and importing the parent theme so the child declaration takes precedence. Themes should never edit parent source directly.

Question 9Theme development and layout

Which attribute in a block declaration associates a template file with the block?

  1. name
  2. as
  3. template Correct answer.
  4. class

Explanation

The template attribute specifies the .phtml file rendered by the block. The class attribute sets the block class, name sets the identifier, and as sets the alias used by getChildHtml.

Question 10Theme development and layout

A developer needs to change the template of an existing block declared in another module's layout without modifying that module. Which layout instruction should be used?

  1. <referenceBlock name="..."><action method="setTemplate"><argument name="template" xsi:type="string">...</argument></action></referenceBlock> Correct answer.
  2. <remove name="...">
  3. <block name="..." template="...">
  4. <referenceBlock name="..."><arguments>...</arguments></referenceBlock>

Explanation

A referenceBlock targeting the existing block with a setTemplate action changes the template without touching the original module. Declaring a new block with the same name would conflict, and remove deletes it entirely.

Question 11Theme development and layout

Which container is typically used in the default layout to hold the main page content rendered between the header and footer?

  1. main.content Correct answer.
  2. footer.container
  3. sidebar.main
  4. header.container

Explanation

The main.content container wraps the primary page content in the default skeleton. header.container and footer.container hold header and footer regions, and sidebar.main holds sidebar content.

Question 12Theme development and layout

A theme's theme.xml declares a parent theme. What is the effect of this declaration?

  1. The parent theme is disabled and no longer usable by other themes.
  2. The child theme must redeclare every template it uses.
  3. The child theme inherits the parent theme's templates, layout, and static assets as fallback. Correct answer.
  4. The child theme's CSS is merged into the parent theme's compiled output only.

Explanation

Declaring a parent establishes a fallback chain so the child inherits templates, layout files, and assets it does not override. Overrides in the child take precedence over the parent.

Question 13Theme development and layout

Which JavaScript component in Magento's frontend is responsible for rendering a UI component's template using Knockout?

  1. The uiComponent module with its template binding Correct answer.
  2. The RequireJS loader
  3. The Magento_Ui/js/core/app registry
  4. The jQuery UI widget factory

Explanation

UI components extend the uiComponent module, which uses Knockout template binding to render markup from the component's template. RequireJS and the app registry load and configure components but do not render them directly.

Question 14Theme development and layout

In a UI component's XML configuration, which node defines the Knockout template used to render the component?

  1. <dataSource>...</dataSource>
  2. <listingToolbar>...</listingToolbar>
  3. <settings><template>...</template></settings> Correct answer.
  4. <argument name="data" xsi:type="array">...</argument>

Explanation

The template node inside settings points to the .html template rendered by Knockout for the component. Data sources and toolbar nodes configure behavior but not the rendering template.

Question 15Theme development and layout

A developer wants to add a CSS class to a block's output only when the block has items. Which template approach is correct?

  1. Add the class in layout XML via the class attribute of the block.
  2. Register the class in requirejs-config.js.
  3. Use a PHP conditional around the class attribute in the template based on the block's data. Correct answer.
  4. Always output the class and hide it with CSS.

Explanation

Conditional output in the .phtml template based on the block's data lets the class appear only when appropriate. Layout block declarations do not conditionally emit HTML classes, and CSS hiding still emits markup.

Question 16Theme development and layout

Which method should a template call to safely output a URL attribute such as an anchor href?

  1. $block->escapeQuote($url)
  2. $block->escapeHtml($url)
  3. $block->getUrl($url)
  4. $block->escapeUrl($url) Correct answer.

Explanation

escapeUrl() is the appropriate escaper for URL contexts such as href and src attributes. escapeHtml handles HTML text, escapeQuote handles quotes, and getUrl builds a URL rather than escaping one.

Question 17Theme development and layout

Which file in a theme declares the theme's title, parent, and other metadata used by Magento?

  1. registration.php
  2. module.xml
  3. composer.json
  4. theme.xml Correct answer.

Explanation

theme.xml holds theme metadata such as title, parent, and media configuration. registration.php registers the theme component, while composer.json and module.xml serve other purposes.

Question 18Theme development and layout

A developer needs to move a block from one container to another without deleting and recreating it. Which layout instruction accomplishes this?

  1. <remove name="block.name"/>
  2. <update handle="block.name"/>
  3. <referenceBlock name="block.name" remove="true"/>
  4. <move element="block.name" destination="container.name"/> Correct answer.

Explanation

The <move> instruction relocates an existing element to a new parent destination while preserving its configuration. remove and update do not relocate blocks.

Question 19Theme development and layout

In Knockout, which binding should be used to keep an input field's value synchronized with an observable?

  1. text
  2. value Correct answer.
  3. foreach
  4. html

Explanation

The value binding establishes two-way synchronization between a form field and an observable. text and html set content, and foreach iterates collections.

Question 20Theme development and layout

Which JavaScript configuration file lets a theme map a module identifier to a custom script path for the storefront?

  1. requirejs-config.js Correct answer.
  2. knockout-config.js
  3. grunt-config.js
  4. webpack.config.js

Explanation

requirejs-config.js defines RequireJS path mappings and config so module identifiers resolve to custom scripts. The other files are not the mechanism for frontend module mapping in a theme.

Question 21Theme development and layout

A developer must add a custom block to the product view page only. Which layout file should be created in the module?

  1. view/frontend/layout/catalog_product_view.xml Correct answer.
  2. view/frontend/layout/catalog_category_view.xml
  3. view/frontend/layout/default.xml
  4. view/frontend/layout/cms_index_index.xml

Explanation

Instructions for the product view page belong in catalog_product_view.xml, which is the handle applied to that page. default.xml applies globally, while the other handles target the home page and category pages.

Question 22Theme development and layout

Why does Magento recommend placing custom LESS in the child theme's web/css/source directory rather than editing parent files?

  1. Child theme LESS bypasses the static content deployment step.
  2. Child theme files take precedence in the fallback chain and remain upgrade-safe. Correct answer.
  3. Child theme LESS is compiled faster than parent LESS.
  4. Parent theme LESS cannot be compiled by the default toolchain.

Explanation

Files in the child theme override the parent through the fallback chain, so customizations survive upgrades to the parent. Editing parent files risks being overwritten and complicates maintenance.

Question 23Theme development and layout

A layout update uses <referenceBlock name="some.block" remove="true"/> and later another handle adds a block with the same name. What is the resulting behavior?

  1. The block remains removed because the remove instruction persists in the merged layout. Correct answer.
  2. The block is rendered twice.
  3. The block is recreated because the later declaration overrides the removal.
  4. Magento throws a fatal error for conflicting instructions.

Explanation

Once a block is removed via a reference with remove=true, it is absent from the merged layout, and a later declaration does not restore it. The removal persists through layout merging.

Question 24Theme development and layout

A developer overrides a UI component's template in a custom theme. Which mechanism ensures the theme's template is used instead of the module's default?

  1. Registering the template in di.xml preferences
  2. Declaring the template path in the theme's requirejs-config.js
  3. Placing the template in the theme's Magento_Ui directory following the module path structure Correct answer.
  4. Adding the template to theme.xml

Explanation

UI component templates are resolved through the theme fallback chain, so placing the file under the theme's Magento_Ui directory mirroring the module path overrides the default. requirejs-config.js, theme.xml, and di.xml do not select component templates.

Question 25Theme development and layout

A block is declared in default.xml without a template attribute, and its class extends Template. What happens when the layout renders?

  1. Magento throws an exception because a template is mandatory.
  2. The block renders nothing because no template is assigned. Correct answer.
  3. The block renders its child blocks only.
  4. Magento falls back to a template matching the block name.

Explanation

A template block without a template attribute has no .phtml to render, so it produces no output. There is no automatic template-name fallback and no exception for the missing attribute.

Question 26Theme development and layout

In Magento 2, which layout file is automatically loaded for every storefront page and serves as the base for all other layout updates?

  1. page_layout.xml
  2. layout.xml
  3. catalog_product_view.xml
  4. default.xml Correct answer.

Explanation

default.xml is the base layout file that Magento merges for every frontend page. It is located in the layout directory of a module or theme and defines blocks and containers that are common across the storefront.

Question 27Theme development and layout

Which XML instruction in a layout file is used to insert a new block into an existing container?

  1. <block>
  2. <referenceBlock>
  3. <container>
  4. <referenceContainer> Correct answer.

Explanation

The <referenceContainer> instruction is used to modify an existing container, including adding a block to it. The <block> instruction alone only declares a block but does not insert it into a container unless nested inside a referenceContainer or another block.

Question 28Theme development and layout

Which file in a Magento theme is responsible for defining the theme's logo, copyright text, and other theme-specific configuration?

  1. theme.xml
  2. registration.php
  3. config.xml
  4. view.xml Correct answer.

Explanation

The view.xml file in a theme's etc directory contains theme-specific configuration such as logo settings, copyright text, and image dimensions. It is merged with other view.xml files from parent themes and modules.

Question 29Theme development and layout

In a Magento template file, which method is used to render a block by its alias?

  1. renderBlock()
  2. getChildHtml()
  3. getBlockHtml() Correct answer.
  4. getChildBlock()

Explanation

The getBlockHtml() method is used to render a block by its alias, which is the name given in the layout. It is commonly used to render a block that is not a child of the current block.

Question 30Theme development and layout

A developer wants to add a custom CSS file to a theme. Where should the file be placed within the theme directory?

  1. web/css/ Correct answer.
  2. media/css/
  3. css/
  4. styles/

Explanation

In Magento 2, theme CSS files are placed in the web/css directory of the theme. This directory is the standard location for static assets like CSS, JavaScript, and images.

Question 31Theme development and layout

Which layout instruction is used to remove a block from the layout?

  1. <unsetBlock>
  2. <referenceBlock remove="true"> Correct answer.
  3. <removeBlock>
  4. <block remove="true">

Explanation

To remove a block, you use the <referenceBlock> instruction with the remove attribute set to true. This removes the block from the layout entirely.

Question 32Theme development and layout

What is the purpose of the <arguments> element in a block declaration within a layout file?

  1. To define the block's template file.
  2. To specify the block's cache lifetime.
  3. To set the block's CSS class.
  4. To pass data to the block, which can be accessed in the block's methods or template. Correct answer.

Explanation

The <arguments> element allows you to pass data to a block. This data is available in the block via methods like getData() or through arguments in the block's constructor, and can be used in the template.

Question 33Theme development and layout

A developer needs to override a template file from a module in a custom theme. Where should the new template file be placed?

  1. In the module's view/frontend/templates directory, replacing the original file.
  2. In the theme's templates directory at the root.
  3. In the theme's Magento_Module/templates directory, mirroring the module's view/frontend/templates path. Correct answer.
  4. In the theme's web/templates directory.

Explanation

To override a module's template in a theme, the new template must be placed in the theme's directory structure under Magento_Module/templates, following the same path as in the module's view/frontend/templates directory.

Question 34Theme development and layout

Which XML element in a layout file is used to add a CSS class to the body tag?

  1. <body class="my-class"/>
  2. <referenceBlock name="body" class="my-class"/>
  3. <attribute name="class">my-class</attribute> Correct answer.
  4. <referenceContainer name="body" htmlClass="my-class"/>

Explanation

To add a CSS class to the body tag, you use the <attribute> element inside a <referenceBlock> for the body block, setting the name to "class" and providing the class value.

Question 35Theme development and layout

In Magento's layout system, what is the purpose of the <update> instruction?

  1. To modify the block's arguments.
  2. To refresh the cache for the current page.
  3. To apply a layout handle, merging its instructions into the current layout. Correct answer.
  4. To update the block's template file.

Explanation

The <update> instruction is used to apply a layout handle, which merges the instructions from that handle into the current layout. This is commonly used to include layout updates from other modules or to apply a handle conditionally.

Question 36Theme development and layout

Which method in a block class is used to retrieve the value of an argument passed via layout XML?

  1. getLayoutArgument('argument_name')
  2. getData('argument_name') Correct answer.
  3. getBlockArgument('argument_name')
  4. getArgument('argument_name')

Explanation

Arguments passed via the <arguments> element in layout XML are stored as data on the block. They can be retrieved using the getData() method with the argument name.

Question 37Theme development and layout

A developer wants to conditionally display a block only on the homepage. Which layout handle should be used to add the block?

  1. default
  2. catalog_product_view
  3. cms_index_index Correct answer.
  4. cms_page

Explanation

The cms_index_index handle is specific to the homepage (CMS index index). Adding a block within this handle ensures it appears only on the homepage.

Question 38Theme development and layout

Which file in a theme is used to define the theme's parent and other metadata?

  1. composer.json
  2. registration.php
  3. theme.xml Correct answer.
  4. view.xml

Explanation

The theme.xml file contains the theme's metadata, including its title, parent theme, and other information. It is located in the theme's etc directory.

Question 39Theme development and layout

In Magento's LESS compilation, what is the purpose of the @magento_import directive?

  1. To import a single LESS file from a specified path.
  2. To define variables that can be used across LESS files.
  3. To import LESS files from modules and themes based on the theme hierarchy. Correct answer.
  4. To include CSS files directly into the compiled CSS.

Explanation

The @magento_import directive is a Magento-specific LESS directive that imports LESS files from modules and themes according to the theme hierarchy. It allows themes to override and extend module styles.

Question 40Theme development and layout

A developer needs to modify the layout of a specific CMS page. Which layout file should be created in the theme to affect only that page?

  1. cms_page_view_<page_id>.xml
  2. cms_page_<page_id>.xml
  3. cms_page_view.xml
  4. cms_page_view_id_<page_id>.xml Correct answer.

Explanation

To target a specific CMS page by its ID, the layout file should be named cms_page_view_id_<page_id>.xml. This handle is specific to that page ID and allows precise layout modifications.

Question 41Templates, blocks, and view models

In Magento's view layer, which class is responsible for rendering a block's template file and returning the resulting HTML?

  1. Magento\Framework\View\Element\AbstractBlock
  2. Magento\Framework\View\Layout\Layout
  3. Magento\Framework\View\Model\Layout\Merge
  4. Magento\Framework\View\Element\Template Correct answer.

Explanation

Magento\Framework\View\Element\Template extends AbstractBlock and implements the _toHtml() logic that includes the assigned .phtml template and captures its output. AbstractBlock provides the base API but delegates actual template rendering to Template. Layout classes assemble the block tree; they do not render templates themselves.

Question 42Templates, blocks, and view models

Which method on a block returns the HTML produced by that block and is what layout rendering ultimately calls?

  1. toHtml() Correct answer.
  2. renderBlock()
  3. fetchView()
  4. getOutput()

Explanation

toHtml() is the public entry point that returns a block's rendered markup; Template::_toHtml() produces the inner content and toHtml() wraps it with block-level processing. renderBlock() and getOutput() are not part of the standard block contract in this form. fetchView() is a protected helper used internally by Template.

Question 43Templates, blocks, and view models

Which block method registers a child block so that it can later be retrieved with getChildBlock()?

  1. insert()
  2. setChild() Correct answer.
  3. append()
  4. addChildBlock()

Explanation

setChild($alias, $block) stores a child block under an alias and returns the parent for chaining. addChildBlock(), append(), and insert() are not the standard methods for registering child blocks. Children created via setChild are retrieved with getChildBlock($alias).

Question 44Templates, blocks, and view models

A block's template file is assigned in layout XML using which attribute on the block node?

  1. template Correct answer.
  2. path
  3. file
  4. view

Explanation

The template attribute on a <block> node names the .phtml file, resolved relative to the module's view/<area>/templates directory. The file, view, and path attributes are not the mechanism for assigning a block template. The assigned value is used by Template::getTemplate().

Question 45Templates, blocks, and view models

How does a block obtain a view model instance in Magento's recommended pattern?

  1. Calling ObjectManager::getInstance()->get() inside the template
  2. Using a static singleton accessor on the view model class
  3. Instantiating the view model with new inside the block constructor
  4. Declaring an <argument name="view_model" xsi:type="object"> in layout XML and reading it with getData('view_model') Correct answer.

Explanation

The recommended approach passes a view model as a block argument of type object, which the framework instantiates via the object manager with proper dependency injection. The block then reads it through getData('view_model'). Direct ObjectManager usage, manual instantiation, and static accessors bypass dependency injection and are discouraged.

Question 46Templates, blocks, and view models

What is the primary purpose of a view model in Magento's architecture?

  1. To hold presentation logic that would otherwise sit in a block class or template Correct answer.
  2. To persist entity data to the database
  3. To replace layout XML with PHP configuration
  4. To intercept controller requests before dispatch

Explanation

View models are plain, injectable classes that keep blocks thin by moving data preparation and presentation logic out of templates and block classes. They do not replace layout XML, handle persistence, or intercept requests. This separation improves testability and reuse across blocks.

Question 47Templates, blocks, and view models

Within a .phtml template, which variable refers to the block instance that is rendering the template?

  1. $viewModel
  2. $layout
  3. $this Correct answer.
  4. $block

Explanation

Because the template is included inside a method of the block, $this is bound to the block instance and exposes its methods. $block is a convention in some contexts but the guaranteed reference is $this. $viewModel and $layout are not automatically bound inside templates.

Question 48Templates, blocks, and view models

Which method escapes output for safe HTML display and is commonly used in templates?

  1. $block->escapeHtml() Correct answer.
  2. $block->getEscapedValue()
  3. $block->htmlEscape()
  4. $block->sanitize()

Explanation

escapeHtml() is provided by the block and escapes a string for safe HTML output, typically implemented via the escaper. The other method names do not exist on the standard block API. Using it prevents cross-site scripting when echoing dynamic values.

Question 49Templates, blocks, and view models

A developer needs to show a block only on product pages and wants it defined declaratively. Which approach best fits Magento layout conventions?

  1. Echo the block conditionally from a controller
  2. Create the block inside the template with new
  3. Add the block in catalog_product_view.xml in the module's layout directory Correct answer.
  4. Register the block in di.xml as a preference

Explanation

Area- and handle-specific layout files such as catalog_product_view.xml attach blocks to the corresponding page handle declaratively. Controllers should not echo blocks, di.xml handles dependency configuration rather than layout, and instantiating blocks in templates violates conventions.

Question 50Templates, blocks, and view models

How can a template render a child block that was attached with setChild('extra', $block)?

  1. $block->renderChild('extra')
  2. $block->getChildHtml('extra') Correct answer.
  3. $block->getChildBlock('extra')->toHtml() only
  4. echo $block->getChildData('extra')

Explanation

getChildHtml($alias) renders and returns the HTML of the named child block, honoring any caching or ordering the block applies. While getChildBlock() returns the child instance, rendering it manually bypasses the standard child rendering flow. The other method names are not part of the block API.