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

@@ -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 lint:php` : checks all PHP files for syntax errors.
-- `Composer make-pot` : generates a .pot file in the `language/` directory.
+- `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/).

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';

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 {
+.gallery-columns-2 {
-	max-width: 50%;
+	grid-template-columns: repeat(2, 1fr);
 }
 
-.gallery-columns-3 .gallery-item {
+.gallery-columns-3 {
-	max-width: 33.33%;
+	grid-template-columns: repeat(3, 1fr);
 }
 
-.gallery-columns-4 .gallery-item {
+.gallery-columns-4 {
-	max-width: 25%;
+	grid-template-columns: repeat(4, 1fr);
 }
 
-.gallery-columns-5 .gallery-item {
+.gallery-columns-5 {
-	max-width: 20%;
+	grid-template-columns: repeat(5, 1fr);
 }
 
-.gallery-columns-6 .gallery-item {
+.gallery-columns-6 {
-	max-width: 16.66%;
+	grid-template-columns: repeat(6, 1fr);
 }
 
-.gallery-columns-7 .gallery-item {
+.gallery-columns-7 {
-	max-width: 14.28%;
+	grid-template-columns: repeat(7, 1fr);
 }
 
-.gallery-columns-8 .gallery-item {
+.gallery-columns-8 {
-	max-width: 12.5%;
+	grid-template-columns: repeat(8, 1fr);
 }
 
-.gallery-columns-9 .gallery-item {
+.gallery-columns-9 {
-	max-width: 11.11%;
+	grid-template-columns: repeat(9, 1fr);
 }
 
 .gallery-caption {