Issue #3443810 by SKAUGHT, plopesc, DishaKatariya, finnsky, smustgrave,...

Issue #3443810 by SKAUGHT, plopesc, DishaKatariya, finnsky, smustgrave, ckrina, Prashant.c, larowlan: Custom Navigation logo is disconnected from new Layout template

(cherry picked from commit f479374e)

core/modules/navigation/css/components/admin-toolbar.css

@@ -234,6 +234,7 @@ body {
 }
 .admin-toolbar__logo img {
   display: block;
+  max-width: var(--admin-toolbar-space-40);
 }
 /**
  * Scroll wrapper for Mobile.

core/modules/navigation/css/components/admin-toolbar.pcss.css

@@ -244,6 +244,7 @@ body {
 
   & img {
     display: block;
+    max-width: var(--admin-toolbar-space-40);
   }
 }
 

core/modules/navigation/layouts/navigation.html.twig

@@ -6,14 +6,13 @@
  * Available variables:
  * - content: The content for this layout.
  * - attributes: HTML attributes for the layout <div>.
- * - hide_logo: Whether to hide the logo.
- * - logo_path: The path to the logo image if logo_managed in
- *   navigation.settings configuration has been set.
- * - logo_width: The width of the logo image. Available if
+ * - content.settings.hide_logo: Whether to hide the logo.
+ * - content.settings.logo_path: The path to the logo image if logo_managed
+ *   in navigation.settings configuration has been set.
+ * - content.settings.logo_width: The width of the logo image. Available if
  *   logo_path points to a valid image file.
- * - logo_height: The height of the logo image. Available if
+ * - content.settings.logo_height: The height of the logo image. Available if
  *   logo_path points to a valid image file.
- *
  * @ingroup themeable
  */
 #}
@@ -38,16 +37,15 @@
 
   <div class="admin-toolbar__scroll-wrapper">
     {% set title_menu = 'admin-toolbar-title'|clean_unique_id %}
-
     {# @todo - We should get rid of this ID below. #}
     <nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>
       <h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>
       {# @todo - Needs to be placed here so we can have the header footer on mobile. #}
       <div class="admin-toolbar__header">
-        {% if not hide_logo %}
+        {% if not content.settings.hide_logo %}
           <a class="admin-toolbar__logo" href="{{ path('<front>') }}">
-            {% if logo_path %}
-              <img alt="{{ 'Navigation logo'|t }}" src="{{ file_url(logo_path) }}" loading="eager" width="{{ logo_width|default(40) }}" height="{{ logo_height|default(40) }}">
+            {% if content.settings.logo_path is not null %}
+              <img alt="{{ 'Navigation logo'|t }}" src="{{ content.settings.logo_path }}" loading="eager" width="{{ content.settings.logo_width|default(40) }}" height="{{ content.settings.logo_height|default(40) }}">
             {% else %}
               {% include '@navigation/logo.svg.twig' with {
                 label: 'Navigation logo'|t

core/modules/navigation/navigation.module

@@ -207,13 +207,6 @@ function navigation_block_alter(&$definitions): void {
   }
 }
 
-/**
- * Implements hook_preprocess_HOOK().
- */
-function template_preprocess_navigation(array &$variables): void {
-  $variables['hide_logo'] = $variables['content']['#hide_logo'] ?? TRUE;
-}
-
 /**
  * Implements hook_element_info_alter().
  */

core/modules/navigation/src/NavigationRenderer.php

@@ -125,7 +125,7 @@ public function buildNavigation(array &$page_top): void {
     $asset_url = $module_path . '/assets/fonts/inter-var.woff2';
 
     $defaults = [
-      '#hide_logo' => $logo_provider === self::LOGO_PROVIDER_HIDE,
+      'settings' => ['hide_logo' => $logo_provider === self::LOGO_PROVIDER_HIDE],
       '#attached' => [
         'html_head_link' => [
           [
@@ -149,11 +149,11 @@ public function buildNavigation(array &$page_top): void {
         if ($logo_managed instanceof File) {
           $logo_managed_uri = $logo_managed->getFileUri();
           $logo_managed_url = $this->fileUrlGenerator->generateAbsoluteString($logo_managed_uri);
-          $page_top['navigation']['#logo_path'] = $logo_managed_url;
+          $page_top['navigation'][0]['settings']['logo_path'] = $logo_managed_url;
           $image = $this->imageFactory->get($logo_managed_uri);
           if ($image->isValid()) {
-            $page_top['navigation']['#logo_width'] = $image->getWidth();
-            $page_top['navigation']['#logo_height'] = $image->getHeight();
+            $page_top['navigation'][0]['settings']['logo_width'] = $image->getWidth();
+            $page_top['navigation'][0]['settings']['logo_height'] = $image->getHeight();
           }
         }
       }

core/modules/navigation/tests/src/Functional/NavigationLogoTest.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\navigation\Functional;
+
+use Drupal\Core\Entity\EntityStorageException;
+use Drupal\file\Entity\File;
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * Tests for \Drupal\navigation\Form\SettingsForm.
+ *
+ * @group navigation
+ */
+class NavigationLogoTest extends BrowserTestBase {
+
+  /**
+   * The file system service.
+   *
+   * @var \Drupal\Core\File\FileSystemInterface
+   */
+  protected $fileSystem;
+
+  /**
+   * The config factory.
+   *
+   * @var \Drupal\Core\Config\ConfigFactoryInterface
+   */
+  protected $configFactory;
+
+  /**
+   * A user with administrative permissions.
+   *
+   * @var \Drupal\user\UserInterface
+   */
+  protected $adminUser;
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  protected static $modules = [
+    'navigation',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    // Inject the file_system and config.factory services.
+    $this->fileSystem = $this->container->get('file_system');
+    $this->configFactory = $this->container->get('config.factory');
+
+    // Create and log in an administrative user.
+    $this->adminUser = $this->drupalCreateUser([
+      'administer site configuration',
+      'access navigation',
+    ]);
+    $this->drupalLogin($this->adminUser);
+  }
+
+  /**
+   * Tests Navigation logo configuration base options.
+   */
+  public function testSettingsLogoOptionsForm() {
+    // Navigate to the settings form.
+    $this->drupalGet('/admin/config/user-interface/navigation/settings');
+    $this->assertSession()->statusCodeEquals(200);
+
+    // Option 1. Check the default logo provider.
+    $this->assertSession()->fieldValueEquals('logo_provider', 'default');
+    $this->assertSession()->elementExists('css', 'a.admin-toolbar__logo > svg');
+
+    // Option 2: Set the logo provider to hide and check.
+    $edit = [
+      'logo_provider' => 'hide',
+    ];
+    $this->submitForm($edit, t('Save configuration'));
+    $this->assertSession()->pageTextContains('The configuration options have been saved.');
+    $this->assertSession()->elementNotExists('css', 'a.admin-toolbar__logo');
+
+    // Option 3: Set the logo provider to custom and upload a logo.
+    $logo_file = $this->createFile();
+    $this->assertNotEmpty($logo_file, 'File entity is not empty.');
+
+    // Preset the configuration to verify a custom image is being seen.
+    $config = $this->configFactory->getEditable('navigation.settings');
+    $config->set('logo_provider', 'custom');
+    $config->set('logo_managed', [$logo_file->id()]);
+    $config->save();
+    // Refresh the page to verify custom logo is placed.
+    $this->drupalGet('/admin/config/user-interface/navigation/settings');
+    $this->assertSession()->elementExists('css', 'a.admin-toolbar__logo > img');
+    $this->assertSession()->elementAttributeContains('css', 'a.admin-toolbar__logo > img', 'src', $logo_file->getFilename());
+  }
+
+  /**
+   * Helper function to create a file entity.
+   *
+   * @return \Drupal\file\FileInterface
+   *   The file entity.
+   *
+   * @throws \Drupal\Core\Entity\EntityStorageException
+   */
+  protected function createFile() {
+    // Define the file URI and path.
+    $file_name = 'test-logo.png';
+    $temp_dir = $this->fileSystem->getTempDirectory();
+    $file_uri = 'public://' . $file_name;
+    $logo_path = __DIR__ . '/../../assets/image_test_files/' . $file_name;
+    $file_contents = file_get_contents($logo_path);
+    file_put_contents($temp_dir . '/' . $file_name, $file_contents);
+
+    // Create a file entity for testing.
+    $file = File::create([
+      'uri' => $file_uri,
+    ]);
+
+    try {
+      $file->setPermanent();
+      $file->save();
+    }
+    catch (EntityStorageException $e) {
+      $this->fail(sprintf('Failed to create file entity: %s', $e->getMessage()));
+    }
+
+    return $file;
+  }
+
+}