From cf4410cb1fe413324ed1efc9f5ba094423fdd86c Mon Sep 17 00:00:00 2001
From: Said El Bakkali <contact@saidelbakkali.com>
Date: Wed, 6 May 2020 09:20:29 +0200
Subject: [PATCH] Replace className.indexOf with classList.contains (#1422)

* Compile rlt styles

* Replace className.indexOf with classList.contains

* Fix the composer comand

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>
---
 README.md        |  4 ++--
 js/navigation.js |  8 ++++----
 style-rtl.css    | 35 ++++++++++++++++++-----------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 8e2837d0..d2beab0f 100644
--- a/README.md
+++ b/README.md
@@ -56,8 +56,8 @@ $ npm install
 `_s` comes packed with CLI commands tailored for WordPress theme development :
 
 - `composer lint:wpcs` : checks all PHP files against [PHP Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/).
-- `Composer lint:php` : checks all PHP files for syntax errors.
-- `Composer make-pot` : generates a .pot file in the `language/` directory.
+- `composer lint:php` : checks all PHP files for syntax errors.
+- `composer make-pot` : generates a .pot file in the `language/` directory.
 - `npm run compile:css` : compiles SASS files to css.
 - `npm run compile:rtl` : generates an RTL stylesheet.
 - `npm run lint:scss` : checks all SASS files against [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/).
diff --git a/js/navigation.js b/js/navigation.js
index cf5a0b06..5d7cada0 100644
--- a/js/navigation.js
+++ b/js/navigation.js
@@ -25,12 +25,12 @@
 		return;
 	}
 
-	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
+	if ( ! menu.classList.contains( 'nav-menu' ) ) {
 		menu.className += ' nav-menu';
 	}
 
 	button.onclick = function() {
-		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
+		if ( container.classList.contains( 'toggled' ) ) {
 			container.className = container.className.replace( ' toggled', '' );
 			button.setAttribute( 'aria-expanded', 'false' );
 		} else {
@@ -65,10 +65,10 @@
 		var self = this;
 
 		// Move up through the ancestors of the current link until we hit .nav-menu.
-		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
+		while ( ! self.classList.contains( 'nav-menu' ) ) {
 			// On li elements toggle the class .focus.
 			if ( 'li' === self.tagName.toLowerCase() ) {
-				if ( -1 !== self.className.indexOf( 'focus' ) ) {
+				if ( self.classList.contains( 'focus' ) ) {
 					self.className = self.className.replace( ' focus', '' );
 				} else {
 					self.className += ' focus';
diff --git a/style-rtl.css b/style-rtl.css
index 4d09ae1b..f664744b 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -906,45 +906,46 @@ object {
 --------------------------------------------------------------*/
 .gallery {
 	margin-bottom: 1.5em;
+	display: grid;
+	grid-gap: 1.5em;
 }
 
 .gallery-item {
 	display: inline-block;
 	text-align: center;
-	vertical-align: top;
 	width: 100%;
 }
 
-.gallery-columns-2 .gallery-item {
-	max-width: 50%;
+.gallery-columns-2 {
+	grid-template-columns: repeat(2, 1fr);
 }
 
-.gallery-columns-3 .gallery-item {
-	max-width: 33.33%;
+.gallery-columns-3 {
+	grid-template-columns: repeat(3, 1fr);
 }
 
-.gallery-columns-4 .gallery-item {
-	max-width: 25%;
+.gallery-columns-4 {
+	grid-template-columns: repeat(4, 1fr);
 }
 
-.gallery-columns-5 .gallery-item {
-	max-width: 20%;
+.gallery-columns-5 {
+	grid-template-columns: repeat(5, 1fr);
 }
 
-.gallery-columns-6 .gallery-item {
-	max-width: 16.66%;
+.gallery-columns-6 {
+	grid-template-columns: repeat(6, 1fr);
 }
 
-.gallery-columns-7 .gallery-item {
-	max-width: 14.28%;
+.gallery-columns-7 {
+	grid-template-columns: repeat(7, 1fr);
 }
 
-.gallery-columns-8 .gallery-item {
-	max-width: 12.5%;
+.gallery-columns-8 {
+	grid-template-columns: repeat(8, 1fr);
 }
 
-.gallery-columns-9 .gallery-item {
-	max-width: 11.11%;
+.gallery-columns-9 {
+	grid-template-columns: repeat(9, 1fr);
 }
 
 .gallery-caption {