Replace Gulp & Bower with npm

[coreymcollins]

DESCRIPTION

• Completely removes Gulp and Bower in favor of npm
• Updates jQuery to vanilla JavaScript*
  • Excludes Slick Carousel which seemed like a bear to do, and we might be replacing it as a carousel anyway... so I didn't too in the weeds with it.
• Updates the structure of the theme with src and dist directories
• Resolves SassLint issues

There are a handful of SassLint issues still needing to be resolved, but I wanted to get the ball rolling on a PR and update progress along the way.

I'll post the full PR update once things are 💯.

[gregrickaby]

Tried to break this PR again today by styling the footer and... everything seems to be fine.

I also reconfigured our blocks to use the left-tabbed interface, which greatly improves the UX while inside the new block editor:

The only thing left to do is: make sure WDS Coding Standards are being installed correctly and the linting in package.json is pointing at the new rulesets. cc @aubreypwd

Once that's done, I can setup the Status Checks in Buddy.

[aubreypwd]

I will add this to my list of things to do on Friday

[vegasgeek]

I added ticket #508
I'm using this branch locally.

I see @gregrickaby's gif above and it shows the block editor being nice and wide. Mine is wedged on the right side of the screen. I provided a link to a screenshot of what I'm seeing. Happy to screenshare if it would be useful.

[gregrickaby]

@vegasgeek Looks like this is a CSS issue (or more like oversight) with ACF.

If I add:

.acf-tab-wrap.-left .acf-tab-group li a {
    word-wrap: break-word;
}

it's not as terrible (but still pretty bad):

I wish I could increase the width of the sidebar in the post editor... 😞

[vegasgeek]

@gregrickaby in your gif from 4 days ago, it's showing a nice wide version of the block with plenty of room for the side tabs. Is there a trick to moving to that layout rather than having the block settings smashed to the right side column?

[gregrickaby]

@vegasgeek There is:

[vegasgeek]

WHO KEEPS HIDING THESE THINGS RIGHT IN FRONT OF ME?

Just an FYI, still getting a little bit of CSS funkiness, but that widescreen edit definitely makes this usable. Thanks for that.

[superfein]

Getting errors when running npm run build:js in the terminal.

 8:51  error  Replace `·'.accordion-item'·` with `".accordion-item"`
                                  prettier/prettier
   9:52  error  Replace `·'.accordion-item-content'·` with `".accordion-item-content"`
                                  prettier/prettier
  12:25  error  Replace `·(·accordion·)` with `accordion`
                                  prettier/prettier
  13:51  error  Replace `·'.accordion-item-header'·` with `".accordion-item-header"`
                                  prettier/prettier
  15:36  error  Replace `·'click',·toggleAccordion·` with `"click",·toggleAccordion`
                                  prettier/prettier
  16:3   error  Delete `·`
                                  prettier/prettier
  29:27  error  Replace `·event·` with `event`
                                  prettier/prettier
  30:32  error  Replace `·function(·content·` with `function(content`
                                  prettier/prettier
  31:57  error  Replace `·'.accordion-item-header'·` with `⏎↹↹↹↹".accordion-item-header"⏎↹↹↹`
                                  prettier/prettier
  34:8   error  Replace `·content.previousElementSibling·===·targetParent·)·{⏎` with `content.previousElementSibling·===·targetParent)·{`        
                                  prettier/prettier
  37:9   error  Replace `·'false'·===·content.getAttribute(·'aria-hidden'·)·` with `"false"·===·content.getAttribute("aria-hidden")`
                                  prettier/prettier
  38:27  error  Replace `·'aria-hidden',·'true'·` with `"aria-hidden",·"true"`
                                  prettier/prettier
  39:45  error  Replace `·'open'·` with `"open"`
                                  prettier/prettier
  41:27  error  Replace `·'aria-hidden',·'false'·` with `"aria-hidden",·"false"`
                                  prettier/prettier
  42:42  error  Replace `·'open'·` with `"open"`
                                  prettier/prettier
  45:26  error  Replace `·'aria-hidden',·'true'·` with `"aria-hidden",·"true"`
                                  prettier/prettier
  46:44  error  Replace `·'open'·` with `"open"`
                                  prettier/prettier
  48:4   error  Delete `·`
                                  prettier/prettier
  59:6   error  Replace `·!·window.location.hash·` with `!window.location.hash`
                                  prettier/prettier
  63:51  error  Replace `·window.location.hash·` with `window.location.hash`
                                  prettier/prettier
  65:67  error  Replace `·'.accordion-item-toggle'·` with `⏎↹↹↹".accordion-item-toggle"⏎↹↹`
                                  prettier/prettier
  71:5   error  Replace `·window.acf·` with `window.acf`
                                  prettier/prettier
  72:23  error  Replace `·'render_block_preview/type=superstar-accordion',·superstarAccordion·` with `⏎↹↹"render_block_preview/type=superstar-accordion",⏎↹↹superstarAccordion⏎↹`  prettier/prettier

These errors are occurring for pretty much all the .js files.

There are way more lines in the terminal, but thought to truncate it.

UPDATE
Most of the errors appear to be from spaces around quoted classes or function parameters, too many line breaks, indentation (tabs vs spaces) and single vs double quotes. I changed none of the original formatting from wd_s.

I inserted --fix into the lint: scripts line in the package.json file, that fixed most of the errors, but also removed most of the original formatting done by the wd_s developers, and replaced it with Prettier and Eslint defaults.

OS: Windows 10
NPM v6.13.7
Node v13.8.0

[superfein]

The single quotes in this line:

"serve": "browser-sync start --https --proxy 'https://testing.test' --no-open --files \"dist/css/*.css, dist/js/*.js, **/*.html, **/*.php, !node_modules/**/*.html\"",

...in the package.json file caused an error on Windows 10 OS.

To fix it I just replaced the single quotes here 'https://testing.test' with "https://testing.test" and I also had to escape the double quotes like so \"https://testing.test\". This may only be a Windows 10 issue.

[coreymcollins]

@superfein – the checkbox issue you're reporting looks to be happening on the master branch as well, so doesn't seem specific to this pull request. Could you add an issue with your details there rather than tracking it here?

Thanks!

[aubreypwd]

I was out last Friday, still on my list for this Friday

[superfein]

@superfein – the checkbox issue you're reporting looks to be happening on the master branch as well, so doesn't seem specific to this pull request. Could you add an issue with your details there rather than tracking it here?

Thanks!

@coreymcollins, moved the issue to the master branch.

[coreymcollins]

Going to take a look at the prettier issues noted above. Greg added prettier with one of his last updates, so I think those are fairly new and weren't caught before.

@aubreypwd – since we're pointing to the WDS Coding Standards for ESLint configs, I'm wondering if we can tie this in there as well? The hope is to move away from having any config files in the theme itself and instead have them in our package(s) for ease of updating and consistency.

[aubreypwd]

@aubreypwd – since we're pointing to the WDS Coding Standards for ESLint configs, I'm wondering if we can tie this in there as well? The hope is to move away from having any config files in the theme itself and instead have them in our package(s) for ease of updating and consistency.

You have an:

  "eslintConfig": {
    "extends": [
      "@webdevstudios/js-coding-standards"
    ]
  },

in your package.json file, which is perfect. I have little experience with prettier so may need your input on that.

Getting errors when running npm run build:js in the terminal.

#507 (comment)

These issues are coming from the linters for JS because, actually, these files do not meet the modern standards. We may need to go through these files (once I get proper JS linting installed) and correct these @coreymcollins

Correction, these ARE coming from prettier, and they are giving suggestions that aren't a part of our coding standards from what I can tell.

[coreymcollins]

I'm not super duper familiar with Prettier myself, @gregrickaby added that when he was running through his testing and it seems like it throws a lot of errors/warnings (as seen in the #507 comment) that conflict with rules we have set (i.e., Prettier wants ( '.class-name' ) to become ('.class-name') with no spaces).

It seems like Prettier offers far less customization than ESLint and I'm wondering if we truly need both?

[aubreypwd]

It seems like Prettier offers far less customization than ESLint and I'm wondering if we truly need both?

The last time I was working on Prettier was with Jo when he was here and we found that we were having a hard time getting it to team up with WDS-Coding-Standards (the old one) too, but I do like the fix-it nature of it and still want to bring it in if we can!

[aubreypwd]

I have tested this in terms of linting, and got #511 for you which we should merge in. Also there are some suggestions I have too.