Update GCWeb footer structure with new global footer design

Created on 20 January 2023, almost 2 years ago
Updated 28 April 2023, over 1 year ago

Problem/Motivation

The Government of Canada's design team has mandated changes to the common footer blocks and menu structures which require some updates be made:

Governance details: https://design.canada.ca/common-design-patterns/site-footer.html
CODE template references: https://wet-boew.github.io/GCWeb/sites/footers/footers-en.html

Proposed resolution

Update existing footer structure to include new contextual menu and adjust footer markup to reflect new elements (visible and not visible).
We should ensure the Multilingual links (which are currently separate French and English links) be considered.

Live examples

Health Canada Recalls - https://recalls-rappels.canada.ca/en

Feature request
Status

Fixed

Version

4.4

Component

User interface

Created by

🇨🇦Canada RobinGalipeau

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Status changed to Needs review almost 2 years ago
  • 🇨🇦Canada RobinGalipeau

    Thank Steven, nice that its a patch you can easily install now... will this be default install in future version?

  • 🇨🇦Canada smulvih2 Canada 🍁

    I have tested this on a fresh install of WxT and it works well, just need to select GCWeb from wxt_library config page and run the migrations (English and French) to get the desired output. Once this gets tested some more and merged into a release this will be available out-of-the-box.

  • 🇨🇦Canada smulvih2 Canada 🍁

    Update patches to ensure French footer menu uses proper characters in machine name: footer_fr -> footer-fr

    This ensures the menu UI can be used to update footer links without throwing an error.

  • 🇨🇦Canada smulvih2 Canada 🍁

    Added two GitHub PRs to make it easier to see changes and to merge:

    drupalwxt/wxt - https://github.com/drupalwxt/wxt/pull/293
    drupalwxt/wxt_bootstrap - https://github.com/drupalwxt/wxt_bootstrap/pull/29

  • 🇨🇦Canada sylus

    Hey @smulvih2 so I took a look and appreciate all the great work you did here.

    A few things I was happy were done:

    a) You added enforced to all the migrations which is good since it is a dependency
    b) All of the menu links were updated which they were due for a while
    c) Added the new footer system

    On my initial code review I didn't notice much so I'm going to merge into the codebase.

    Is there any notes we need to add for the upgrade path?

    Committed and attributed but will leave open until can update document with update path if there is one.

  • Status changed to RTBC almost 2 years ago
  • Status changed to Fixed almost 2 years ago
  • 🇨🇦Canada smulvih2 Canada 🍁

    @sylus thanks for the review and merge! I’m glad you noticed the enforced key, it was added so that in the future the wxt_ext_migrations module could be uninstalled and installed again if needed, and all configs get uninstalled with the module.

    In order to get this added to an existing project, the new configs in wxt_bootstrap are needed that define the new menu systems. Also the migration config updates are needed to get the new menu links. There are a few ways to go about getting these new configs. One option is you can take the new config YAML files and import them through the UI. What I did for the project I was developing this for was uninstall the wxt_bootstrap theme and the wxt_ext_migrations module and reinstall them. This ensures the new configs are installed properly.

    When uninstalling wxt_ext_migrations and installing it again, you will run into an issue where the configs already exist (which the enforce key fixes for the future). I just did a drush cdel on all the configs it complains about and then I was able to install the module again.

    You may run into an issue where your footer menu machine names don’t match. There have been some changes to these machine names over the last year or so, replacing underscores with dashes. This was done because underscores in menu machine names don’t pass validation so the menus can’t be edited and saved in the future. I made sure that all machine names use dashes in this feature request.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Status changed to Fixed over 1 year ago
  • 🇨🇦Canada joseph.olstad

    I must be missing a step, we're not seeing the new links in the migrations, perhaps we're missing the config update from menu_block that is above mentioned must be changed to system_menu_block? so I have to modify my own config/sync/ files manually or run some sort of wxt drush command or wxt config command?

  • 🇨🇦Canada smulvih2 Canada 🍁

    Posted this in the wrong thread:

    @joseph, since the migration scripts are actually config, you will need to import the new scripts or what I did was uninstall the wxt_ext_migration module, then enable it again to get the new scripts. This will throw error on install due to config already existing (not using enforced key), so just drush cdel the migration configs it complains about and you should have the new links ready to import.

    We added the enforced key to all migration scripts, so in the future the error on install for wxt_ext_migration will not occur.

  • 🇨🇦Canada jamesyao

    Hi @smulvih2,
    I followed the instructions to add the new contextual footer blocks into the footer region and run importing scripts.

    The contextual footer header h2 and GC-main-footer h3 are not shown up in my local DEV. Did i miss any steps of the new GCWeb footer structure? Please advise! Thank you!

  • 🇨🇦Canada smulvih2 Canada 🍁

    @jamesyao I believe the block titles are being used, so try enabling block titles for the blocks in question and set the title value as needed. Hope this helps!

  • 🇨🇦Canada joseph.olstad

    Enabling block titles doesn't seem to work, I'll have a closer look at vanilla wxt

  • 🇨🇦Canada smulvih2 Canada 🍁

    Try enabling twig debug to see which block template file is being used. If you don't have changes from the starterkit for wxt_bootstrap in your *.theme then the block suggestions might not be targeting the correct template file.

  • 🇨🇦Canada joseph.olstad

    @smulvih2, ok ya for some reason I had to copy the twigs from a vanilla 4.4.2 wxt_bootstrap/templates/twig and the naming was different due to some theming suggestion differences on our sub theme

    so once I renamed the twig files as expected by our sub theme for the block twigs then it is good on the "upgraded" environment.

    Looks great thanks :)

  • 🇨🇦Canada smulvih2 Canada 🍁

    Awesome, glad you got it working!

  • 🇨🇦Canada jamesyao

    Thanks @joseph.olstad and @smulvih2!
    @joseph.olstad updated 10 twigs to make the new global footer work well.

  • 🇨🇦Canada smulvih2 Canada 🍁
Production build 0.71.5 2024