Merge release v1.47.4

Author: elncetoo

README.md

@@ -1,8 +1,165 @@
-# Greenpeace Planet 4 Child Theme for GP Nordic
+c# Greenpeace Planet 4 Nordic Child Theme
 
-Child theme for the Planet 4 Wordpress project.
-The related master theme’s code lives at:
+The **Planet 4 Nordic Child Theme** is a child theme built for the [Planet 4](https://www.greenpeace.org) project. It customizes the parent theme by adding unique features and styles specific to the Nordic region. This child theme customisez the [Planet4 Master Theme](https://github.com/greenpeace/planet4-master-theme) following this [Design System](https://zeroheight.com/05f6e9516/p/76cd7b-planet-4-design-system).
 
-https://github.com/greenpeace/planet4-master-theme.
+## Table of Contents
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [File Structure](#file-structure)
+- [Coding Standards](#coding-standards)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Prerequisites
+
+Make sure you have the following tools installed on your machine:
+
+- [Node.js](https://nodejs.org/en/) (v16 recommended)
+- [npm](https://www.npmjs.com/) (comes with Node.js)
+- [Composer](https://getcomposer.org/) (for PHP dependencies and coding standards)
+- [WordPress](https://wordpress.org/) setup (parent theme and WordPress installation)
+
+## Installation
+
+To install and set up the theme locally, follow these steps:
+
+1. **Clone the repository**:
+
+    ```bash
+    git clone https://github.com/greenpeace/planet4-child-theme-nordic.git
+    ```
+
+2. **Navigate to the theme directory**:
+
+    ```bash
+    cd planet4-nordic-child-theme
+    ```
+
+3. **Install the npm dependencies**:
+
+    Run `npm install` to install all necessary Node.js packages:
+
+    ```bash
+    npm install
+    ```
+
+4. **Install Composer dependencies**:
+
+    Run `composer install` to install PHP dependencies (like coding standards):
+
+    ```bash
+    composer install
+    ```
+
+5. **Activate the theme**:
+
+    - Upload the child theme to your WordPress `/wp-content/themes` directory.
+    - Activate the theme from the WordPress admin dashboard (`Appearance > Themes`).
+
+## Usage
+
+Once installed, the theme can be customized and extended as per the needs of the Nordic campaign. The child theme inherits most of its functionality from the parent theme, but you can add custom styles, templates, and features as needed.
+
+To modify or add features to the theme, navigate to the `planet4-nordic-child-theme` directory, make changes to the appropriate files, and use the provided npm scripts for development.
+
+## Development
+
+### Available npm Scripts
+
+- **Build CSS**: Compiles the SCSS files into a minified CSS file.
+
+    ```bash
+    npm run build:css
+    ```
+
+- **Build**: Compiles all assets for production using Webpack and outputs them to the `build/` directory.
+
+    ```bash
+    npm run build
+    ```
+
+- **Start**: Launches a development server with live reloading and builds assets in development mode.
+
+    ```bash
+    npm run start
+    ```
+
+- **Lint CSS**: Lints the SCSS files to ensure coding standards are followed.
+
+    ```bash
+    npm run lint:css
+    ```
+
+### Composer Scripts for PHP Code Standards
+
+- **Fixes**: Automatically fixes PHP code style issues.
+
+    ```bash
+    composer run fixes
+    ```
+
+- **Sniffs**: Runs PHP CodeSniffer (`phpcs`) to check PHP files against coding standards.
+
+    ```bash
+    composer run sniffs
+    ```
+
+## File Structure
+
+Here's a brief overview of the key directories and files in the project:
+
+```plaintext
+planet4-nordic-child-theme/
+├── assets/             # Compiled theme assets (CSS, JS)
+│   ├── build/          # Output directory for compiled and minified production assets
+│   └── src/            # Source SCSS and JS files
+├── includes/           # Theme-specific PHP includes
+├── page-templates/     # Theme-specific Twig templates 
+├── vendor/             # Composer dependencies
+├── functions.php       # Main theme functions
+├── webpack.config.js   # Webpack configuration for asset bundling
+├── style.css           # Main stylesheet (import parent theme styles)
+├── package.json        # Node.js dependencies and npm scripts
+├── composer.json       # PHP dependencies and Composer scripts
+└── README.md           # Project documentation (this file)
+```
+
+### Customization
+
+To override parent theme styles, place your custom SCSS files in the `assets/src/scss/` directory. These files are automatically compiled and output to `assets/build/` when running the build scripts.
+
+### Coding Standards
+
+We follow [WordPress Coding Standards](https://developer.wordpress.org/coding-standards/) to ensure clean, readable, and maintainable code.
+
+The coding standards are enforced through `phpcs` (PHP CodeSniffer) and can be automatically corrected using `phpcbf`. Composer handles both tools.
+
+To check for coding standard violations:
+
+```bash
+composer run sniffs
+```
+
+To automatically fix issues:
+
+```bash
+composer run fixes
+```
+
+## Contributing
+
+We welcome contributions! To contribute to this project:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feat/my-feature`).
+3. Make your changes.
+4. Push your branch (`git push origin feat/my-feature`).
+5. Open a Pull Request.
+
+Please ensure that your code follows the project's coding standards. Use `npm run lint:css` for CSS and `composer run sniffs` for PHP.
+
+
+## License
+This project is licensed under the [GNU License](LICENSE). See the LICENSE file for details.
 
-Please check the master theme code for more information.

assets/build/index.js

@@ -1,5 +1,9 @@
+import '../scss/style.scss';
+
 //import $ from the global scope
 import $ from 'jquery';
+// import 'core-js/stable'; // for polyfills
+
 // Expose jQuery to the global object
 window.$ = $ || jQuery;
 window.dataLayer = window.dataLayer || [];

assets/build/index.js.map

@@ -203,6 +203,7 @@ strong>a {
     border-bottom: 3px solid $gp-green-50;
     text-decoration: none;
     box-shadow: none;
+    background-image: none;
   }
 }
 
@@ -245,15 +246,31 @@ a.external-link {
   margin-right: 0.3rem;
 }
 
-//deep-dive, issues pattern
-.is-pattern-p4-issues .wp-block-group.container.is-layout-flow h5.wp-block-heading a:hover,
-.wp-block-group.group-stretched-link.is-layout-flow>h5.wp-block-heading>a:hover,
-.wp-block-group.group-stretched-link.is-layout-flow>h5.wp-block-heading>strong>a:hover {
-  text-decoration: none;
-  box-shadow: none;
-  color: $gp-green-80;
+.wp-block-heading > a, 
+.secondary-menu > a,
+.wp-block-heading.is-style-chevron > a,
+.group-stretched-link > .wp-block-heading > a {
+  color: inherit;
+  background-image: none;
+  background-repeat: no-repeat;
+  border-bottom: none;
+  &:hover {
+    // border-bottom: 1.5px solid $gp-green-50;
+    color: $gp-green-60!important;
+  }
 }
 
+//deep-dive, issues pattern
+// .is-pattern-p4-issues .wp-block-heading a:hover,
+// .is-pattern-p4-deep-dive .wp-block-heading a:hover,
+// .group-stretched-link>.wp-block-heading>a:hover,
+// .group-stretched-link>.wp-block-heading>strong>a:hover
+//  {
+//   text-decoration: underline;
+//   box-shadow: none;
+//   color: $gp-green-80;
+// }
+
 //headings on dynamic blocks
 h2.page-section-header {
   color: $black;

assets/build/style.min.css

@@ -13,7 +13,8 @@ a[data-ga-action="Navigation Tag"],
 .wrapper-post-tag a,
 a[data-ga-action="Post Type Tag"],
 a[data-ga-action="Post Type Tag"] span,
-a.tag-item.tag-item--main {
+a.tag-item.tag-item--main,
+.taxonomy-category a {
   font-family: $gp-sans;
   color: $gp-green-80;
   font-weight: 500;
@@ -59,22 +60,46 @@ a.btn.post-tag-button span:nth-child(2) {
 
 //article meta
 .query-list-item-meta,
-.article-list-item-meta {
+.article-list-item-meta,
+.posts-list-meta {
 
   span.article-list-item-author,
-  span.article-list-item-author a {
+  span.article-list-item-author a,
+  .wp-block-post-author-name a {
     font-family: $gp-sans;
     color: $grey-70;
     font-weight: var(--font-weight-regular);
   }
 }
 
+.article-list-item-author,
+.taxonomy-category a {
+  font-family: $gp-sans;
+  font-weight: var(--font-weight-regular) !important;
+
+  a:hover {
+    -webkit-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
+    -o-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
+    -moz-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
+    transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
+    border-bottom: 2px solid $gp-green-50;
+    text-decoration: none!important;
+    box-shadow: none;
+  }
+}
+
+.posts-list .article-list-item-author::after, 
+.posts-list .wp-block-post-author-name::after {
+  margin-top: -15px;
+}
+
 //post info preview
 a.tag-item.tag,
 .single-post-time,
 a.comment-link,
 a.comment-link>span.quiantity,
-a.comment-link>span.display-text {
+a.comment-link>span.display-text,
+a.external-link {
   font-weight: 400;
 
   &:hover {
@@ -90,21 +115,6 @@ a.comment-link>span.display-text {
   }
 }
 
-.article-list-item-author {
-  font-family: $gp-sans;
-  font-weight: var(--font-weight-regular) !important;
-
-  a:hover {
-    -webkit-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
-    -o-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
-    -moz-transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
-    transition: height 0.2s cubic-bezier(.5, 0, 0, 1);
-    border-bottom: 2px solid $gp-green-50;
-    text-decoration: none;
-    box-shadow: none;
-  }
-}
-
 //on listing pages
 div.query-list-item-post-terms div.taxonomy-p4-page-type a[rel="tag"],
 div.wrapper-post-tag div.taxonomy-post_tag.wp-block-post-terms a[rel="tag"],
@@ -127,9 +137,12 @@ div.query-list-item-body div.query-list-item-post-terms div.wrapper-post-term di
 
 }
 
-//on listing pages
-.query-list-item-headline.wp-block-post-title a {
+//on listing pages & included articles
+.query-list-item-headline.wp-block-post-title a,
+.wp-block-query.posts-list.p4-query-loop .wp-block-post-title a,
+h2.wp-block-post-title a {
   color: $black;
+  font-weight: 700;
 
   &:hover {
     border-bottom: none;
@@ -138,6 +151,13 @@ div.query-list-item-body div.query-list-item-post-terms div.wrapper-post-term di
   }
 }
 
+//on single posts
+.wp-block-post-title {
+  @include x-large-and-up {
+    margin-bottom: 24px;
+  }
+}
+
 
 div.wrapper-post-tag ::before,
 .query-list-item-body:has(.taxonomy-p4-page-type):has(.taxonomy-post_tag) .wrapper-post-tag:before {

assets/build/style.min.css.map

@@ -52,4 +52,10 @@ li.search-result-list-item:hover {
 //editor page layouts
 .block-editor-block-patterns-list__item[role="option"] {
   height: auto !important;
+}
+
+.page-content p:not(.article-list-item-meta) a,
+.page-content>ol li a,
+.page-content>ul li a {
+  background-image: none !important;
 }

assets/src/js/app.js

@@ -7,8 +7,22 @@
   background: $gp-nor-green;
   font-family: var(--headings--font-family);
 
-  .country-selector-toggle {
+  .footer-menu ul {
+    width: 100%;
+    text-align: start;
+    column-count: 1;
+
+    @include medium-and-up {
+      font-size: $font-size-md;
+      column-count: 2;
+    }
+
+    @include large-and-up {
+      column-count: 3;
+    }
+  }
 
+  .country-selector-toggle {
     &:hover,
     &:active {
       text-decoration: none !important;