Problem/Motivation

Single directory components (SDC) is a new way to theme Drupal. Instead of scattering related files around your theme, they're contained to one directory. The primary issue for SDC is at #3313520: Single-directory components in core

While reviewing this proposal and related issues I wanted to port an existing component to get a feel for the workflow.

This issue is of course blocked on actually getting SDC into core. See #3340712: Add Single Directory Components as a new experimental module.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3347736

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mstrelan created an issue. See original summary.

mstrelan opened merge request !3651

mstrelan’s picture

mstrelan commented

Some observations.

The first issue I ran in to was this error:

Twig\Error\SyntaxError: An exception has been thrown during the compilation of a template ("We found an unexpected slot that is not declared: [content]. Please declare them in "search-form.component.yml".") in "olivero:search-form". in Twig\Environment->compileSource() (line 524 of /data/vendor/twig/twig/src/Environment.php).

What is a slot? Where do I find information on slots? After some poking around I eventually realised it refers to {% block content %} in the twig template. I had a look at the schema and found slots next to props with the same schema so I added slots to my yaml file. Since it takes the same schema as props I just copy/pasted that directly and left only the content property. That lead to the following error:

Drupal\sdc\Exception\InvalidComponentException: Slots can only be declared with the type "string". Slot [content] in component "header-search-narrow" is declared with type "array". in Drupal\sdc\Component\ComponentMetadata->parseSchemaInfo() (line 178 of core/modules/sdc/src/Component/ComponentMetadata.php).

OK, so it can only be a string, what's the point declaring its type if it can only ever be "string"?

The next thing I wondered, do I really have to pass all the variables from one twig to another? And do I need to declare the props for title_prefix, title_suffix, attributes, etc? I've declared them all, but opted not to pass them from the original twig files as that seems to happen automatically.

The final challenge I faced was that the order of the CSS files that were loaded had changed. This meant that the primary button hover/focus/active styles were taking precedence over the custom styles for the search submit button. For now I've added explicit hover/focus/active styles for this button, but it seems we could also just remove the button--primary class.

I also added a @todo comment in the MR wondering if there is a better SDC way of doing this:

$variables['content']['actions']['submit']['#theme_wrappers'] = ['input__submit__header_search'];

e0ipso’s picture

e0ipso
Primary language Catalan
Location Can Picafort
commented

This is great feedback! Do you mind if I quote you in the SDC MR so we can talk about it there?

mstrelan’s picture

mstrelan commented

No problem at all. I also raised a number of issues against cl_server and sdc_examples modules, but these are less relevant for core.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

e0ipso’s picture

e0ipso
Primary language Catalan
Location Can Picafort
commented
Status: Postponed » Needs work
Issue tags: +SDC Sprint DrupalConNA 2023

Unblocking this after SDC got merged into Drupal core.

Gauravvvv made their first commit to this issue’s fork.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
e0ipso’s picture

e0ipso
Primary language Catalan
Location Can Picafort
commented
Status: Needs review » Needs work

I added some comments and suggestions in the MR.

ahsannazir made their first commit to this issue’s fork.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Title: Create new SDC component for Olivero (header-search) » Create new SDC component for header-search
Status: Needs work » Postponed

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.