Drupal Drupal Theming & Frontend Development 2 — Questions and Answers
Question 1: In Drupal, what does enabling Twig debug mode output into the HTML source?
- PHP error logs and database query times
- Template file paths, theme hook suggestions, and BEGIN/END template comments (Correct answer)
- CSS class names and their originating SCSS files
- JavaScript console warnings for deprecated API calls
Correct answer: Template file paths, theme hook suggestions, and BEGIN/END template comments
Twig debug mode injects HTML comments showing the exact template file being used, all candidate theme hook suggestions, and begin/end markers for each template.
Question 2: Which Drupal theming approach allows you to override a contrib module's template from your custom theme?
- Copy the template to themes/custom/mytheme/templates/ with the same filename (Correct answer)
- Create a hook_theme_registry_alter() to redirect the path
- Add the module template directory to the theme's info.yml
- Declare an override in the theme's .breakpoints.yml
Correct answer: Copy the template to themes/custom/mytheme/templates/ with the same filename
Placing a template file with the same name inside your theme's templates directory causes Drupal to use your copy instead of the module's original template.
Question 3: What is the purpose of the 'regions' key in a Drupal theme's .info.yml file?
- Define responsive breakpoints for CSS media queries
- Declare named block placement areas available in the theme (Correct answer)
- Specify which content types the theme applies to
- Map Twig template files to their corresponding hooks
Correct answer: Declare named block placement areas available in the theme
Regions declared in a theme's .info.yml (e.g., header, sidebar_first, footer) create named areas where administrators can place blocks via the Block Layout UI.
Question 4: In Drupal's Twig, what function renders a render array variable into HTML output?
- {{ content.field_name | render }}
- {{ content.field_name }} (Correct answer)
- {{ render(content.field_name) }}
- {% print content.field_name %}
Correct answer: {{ content.field_name }}
In Drupal Twig templates, printing a render array variable with {{ variable }} automatically invokes the render pipeline to output its HTML.
Question 5: What Drupal theme setting enables the display of the site logo, site name, and site slogan in the header?
- They are controlled by block placement in Block Layout
- They are set in Appearance > Settings for the active theme (Correct answer)
- They are hardcoded in the page.html.twig template
- They are configured via the system.site configuration object only
Correct answer: They are set in Appearance > Settings for the active theme
Site logo, name, and slogan visibility are toggled per-theme in Appearance > Settings, which stores the choices in the theme's configuration.
Question 6: Which Drupal CSS naming convention is recommended for theme and module stylesheet classes to avoid conflicts?
- Bootstrap CSS grid naming
- BEM (Block Element Modifier) methodology (Correct answer)
- OOCSS (Object-Oriented CSS) convention
- Atomic CSS utility class naming
Correct answer: BEM (Block Element Modifier) methodology
Drupal's coding standards recommend the BEM methodology (block__element--modifier) for CSS class naming to create predictable, conflict-free, component-based stylesheets.
Drupal Drupal Theming & Frontend Development 2
In Drupal, what does enabling Twig debug mode output into the HTML source?