digitoimistodude / air-light

💨 WordPress starter theme - designed to be minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects. 7+years/1000+hours of development and still updating daily! We prefer the original WordPress way of doing things so no strange templating languages or frameworks here.
https://airwptheme.com
MIT License
957 stars 141 forks source link

phpcs.xml Error. #126

Closed SteveJonesDev closed 3 years ago

SteveJonesDev commented 3 years ago

I'm getting the error below when editing PHP. I didn't see a phpcs.xml file in the theme directory. Does this need to be install via composer or something? Thanks for your help?

Screen Shot 2021-10-06 at 12 26 30 PM

ronilaukkarinen commented 3 years ago

Can you give me a little bit more information:

SteveJonesDev commented 3 years ago

II followed the steps in the Wiki "Using with Local by Flywheel or other 3rd party development environment".

SteveJonesDev commented 3 years ago

The only difference is that I don't have WP core included in my project folder. I just created a symbolic link from the theme directory to my Local by Flywheel install's themes folder.

ronilaukkarinen commented 3 years ago

It's hard to say without knowing your setup exactly. I have no experience in Local by Flywheel but I'm trying to help.

The fact your are missing phpcs.xml either sounds like you missed the part in development steps where you should copy our devtools or install debuggers or your themeDir just points out to wrong directory (I wonder where did that "resourcessharingproject/phpcs.xml" path came from?)

Are you running gulp from project root or from theme folder? Our setup relies that you run your own dev tools in project base and setup them correctly OR you use our devpackages (as explained in wiki and in this comment).

Theme base gulp is meant strictly to [air-light development](), I mean developing the starter theme itself and NOT the theme created based on the starter theme.

SteveJonesDev commented 3 years ago

I think Local by Flywheel is irrelevant in this case.

If you look at your devtools repo there isn't a phpcs.xml file.

resourcessharingproject/phpcs.xml came from the config.js file.

Screen Shot 2021-10-07 at 11 20 29 AM

Yes, I'm running gulp from the project root.

Also, there are issues with the theme installed directly from the WordPress theme repo. You have paths to 'content' rather than 'wp-content'. Anyone installing the theme from WordPress theme repo would most likely be using 'wp-content'.

Screen Shot 2021-10-07 at 11 15 25 AM

This prevent the Gutenberg editor from working at all. You can't add blocks because the errors.

Screen Shot 2021-10-07 at 11 14 49 AM
ronilaukkarinen commented 3 years ago

Good points. But.

Our theme is originally meant to be used with our bedrock based WordPress stack dudestack and is not thoroughly tested with other stacks. Glad to have you testing it right now, we can update our documentation if needed.

WordPress theme directory version doesn't include dev files (because those are starter theme development files anyway and they do not belong to the production version any way) and that's why most of the dev stuff come from our separate devpackages repo. However, the phpcs.xml comes from Air-light dev version (here) because the start script (this part to be exact) uses the development (GitHub-)-version of the theme and not the WP theme directory one, that's why we dudestack/lemp users have the phpcs.xml file. Confusing, huh? Yes, I know. But it's really hard to support all different stacks at the same time when the base is built for modded bedrock. We have warned about this, but at the same time we aknowledge this should be documented better.

So, get your phpcs.xml (here). Sorry that it got left out from 3rd party stack users, I'll add the step into Wiki soon.

As for the Gutenberg styles, fonts alone shouldn't break anything, fonts will revert to next default. Have you configured any blocks?

It looks like you haven't compiled your JavaScript after replaces and it shows the dev version of uncompiled ja right after downloading the theme? Run gulp js once or save the js/src/front-end.js while watching the file. Let me know whether it fixes the problem or not.

The relative path needs to be hard coded for dev theme for us to keep on developing it without having to change it every time. Too bad CSS doesn't have a thing like dotENV support. So I guess other stack users should replace font paths manually by hand. In dudestack the path is content. But like I said it's assumed fonts are to be changed anyway.

rahuldhangar commented 3 years ago

Hey @ronilaukkarinen I also face the same issue with the Wordpress Theme version of Air-light theme. I am too using Local by flywheel because it very very intuitive and easy way of setting up LEMP stack on a Windows machine. After activating the theme, I too find similar problem of Gutenberg blocks not working as shown in the screenshot by @SteveJonesDev

Please do let me know how to solve it and also, please tell me how to proceed further with development of an AdobeXD or Figma or Sketch design into fully functional WP theme based on Air-light ?

Any help/suggestion is highly appreciated!

ronilaukkarinen commented 3 years ago

Hey @ronilaukkarinen I also face the same issue with the Wordpress Theme version of Air-light theme. I am too using Local by flywheel because it very very intuitive and easy way of setting up LEMP stack on a Windows machine.

I do know the advantages of Local for its easiness. If you are anything of a tinkering sort, there is a proven way for Windows 10 to use our stack and Air-light, if you might not know about it. However, it's not recommended if you are not comfortable with setting up servers or living in the command line interface.

After activating the theme, I too find similar problem of Gutenberg blocks not working as shown in the screenshot by @SteveJonesDev

Have you tried running gulp js or saving js/src/front-end.js while gulp watch process is running? What kind of errors are outputted in console?

Please do let me know how to solve it and also, please tell me how to proceed further with development of an AdobeXD or Figma or Sketch design into fully functional WP theme based on Air-light ?

I'm not sure what you mean exactly. Care to elaborate?

ronilaukkarinen commented 3 years ago

I have provided answers in my best knowledge on how to improve these workflows. If you have still the same challenges, please reopen the issue or open a new one with more specific information. Closing this due lack of activity.

xyeres commented 1 year ago

Not to be “that guy” digging up an old issue but today I noticed the missing phpcs.xml in the current setup docs for third party stacks. There was no mention of it being necessary until I had an error from phpcs. I figured out that I needed to copy phpcs.xml over to my project to get it setup. Something to add to the instructions I think!

ronilaukkarinen commented 1 year ago

Third party stacks are always a bit unsure ground for us, because our full focus is dudestack and the LEMP of our own.

Added to Wiki.

xyeres commented 1 year ago

Thanks for lending supporting to us third-party folks :) I'm working for a small agency and we've used air-light for several recent projects, we are now working to integrate it as the base for our new workflow. I hope to contribute back to air-light as I understand it more

ronilaukkarinen commented 1 year ago

Thanks for lending supporting to us third-party folks :) I'm working for a small agency and we've used air-light for several recent projects, we are now working to integrate it as the base for our new workflow. I hope to contribute back to air-light as I understand it more

Glad you like and use the theme! 👍