I'm trying to use Composer with WordPress plugin - wordpress

My source file starts like this:
<?php
/**
* #package JpLists
*/
namespace Inc\Pages;
use WP_List_Table;
class ListTable extends WP_List_Table {
I end up with the following error in the browser when trying to extend a standard WordPress class:
Fatal error: Class 'WP_List_Table' not found in /srv/www/wordpress/wp-content/plugins/jpLists/inc/Pages/ListTable.php on line 9
This post suggests Composer + WordPress plugins is a bad idea
I'm just about to throw in the towel and go back to hard-coded require_once() calls, but the idea of namespaces & autoloading appeals to me.
my composer.json file looks like:
{
"name": "jp/jp-lists",
"description": "WordPress plugin",
"type": "wordpress-plugin",
"license": "GPL",
"authors": [
{
"name": "JP",
"email": "jp#example.com"
}
],
"minimum-stability": "dev",
"require": {},
"autoload": {
"psr-4":{"Inc\\": "./inc"}
}
}

It turns out if you just add a '\' before the name, PHP knows that you are referring to a class in global namespace and not the namespace specified at the beginning fo the file.
use \WP_List_Table;
I had abandoned my effort to use namespaces and composer for a couple of months, but after some diligent studying on namespaces, I decided to tackle the problem again and it was a simple fix.

Composer's autoloader will take care of autoloading classes in your namespace (Inc). You have a problem with loading WP_List_Table, but this is not your class - it is WordPress core class and autolader from your project will not even try to load it (since it does not have any definition where to search it).
Also this class is marked as internal and WordPress documentation discourage from using it in plugins or themes. This is probably the reason why it is not available by default. If you really need it, you should require it manually:
if (!class_exists('WP_List_Table')) {
require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
}
Or just copy it to your project under different name and use it, just like documentation recommends:
This class's access is marked as private. That means it is not intended for use by plugin and theme developers as it is subject to change without warning in any future WordPress release. If you would still like to make use of the class, you should make a copy to use and distribute with your own project, or else use it at your own risk.
https://codex.wordpress.org/Class_Reference/WP_List_Table

Please add the following to composer.json.
[example case: wp-content/plugins/example/src/composer.json]
"autoload": {
"files": ["../../../../wp-admin/includes/class-wp-list-table.php"]
}
and Generating autoload files
composer dumpautoload
write into class file
use WP_List_Table;
class Test_WP_List_table extentds WP_List_Table {
.....
but i don't know use ABSPATH method
I am using Google Translate because I can not understand English very well.

Related

Failed to load config "next/babel" to extend from eslintrc.json

When I'm trying to build the Next.Js app then the below error is coming with a successful build. This error is showing when I deploy the app in Vercel.
error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
This is my .eslintrc.json
{
"extends": ["next/babel","next/core-web-vitals"]
}
I've also added .babelrc
{
"presets": ["next/babel"],
"plugins": []
}
I also found a solution when I change the eslintrc.json file like below:
{
"extends": ["next","next/core-web-vitals"]
}
then no error is showing while building the app. But there is another problem showing when I use the above solution and the problem is:
Parsing error: Cannot find module 'next/babel'
This is shown in all the imports with red marks.
I tried to search the solution but did not found any solution for this.
I think, this might have to do with this weird hackfix that is being touted in a bunch of places that tells you to place next/babel in your eslint config file for some reason (e.g. here).
It probably was a hackfix for an old bug in older next.js versions. But as of (at least) summer 2022, it makes little sense to do so, considering that next/babel is a babel preset, not an eslint preset. Instead, in recent next.js versions, just reset your .eslintrc.json:
{
"extends": [
"next"
]
}
With this setup, things don't error out, as of next#12.2.*.
You also might want to take a look next's eslint customization options. For example, some people might be confused why eslint is seemingly not working.
In that case, consider this solution and the next.js docs on eslint.
If you have this problem, but you did not copy+paste your .eslintrc.json from the interwebz, then you might need to describe your situation in more detail.
my problem has been solved by this code. just copy and paste it into the eslintrc.json file.
{
"extends": ["next/babel","next/core-web-vitals"]
}
Or just replace "next" and "next/core-web-vitals" to
"plugin:#next/next/recommended"
https://nextjs.org/docs/basic-features/eslint
I had this issue when working with TurboRepo. The solution for me was to add next as a devDependency in the root of the monorepo.
Same Turborepo issue using pnpm. This solved it for me: https://github.com/vercel/next.js/issues/40687#issuecomment-1275184829
Essentially add this to your settings.json
// .vscode/settings.json
{
"eslint.workingDirectories": [
{ "pattern": "apps/*/" },
{ "pattern": "packages/*/" }
]
}

How do I change sass output directory?

I have this folder structure:
sass/main.sass
css/main.css
js/...
img/...
I want the sass output to go to the css folder, but each time I run sass watcher it creates a new css file within the sass directory among sass files.
Thx for information about using 'Live SASS Compiler' in VS Code.
To set special otuput pathes to your project you need to add the settings for output pathes to the settigns.json of your project:
File: `projectDIR/.vscode/settings.json'
Example for setting the save pathes to output directory:
"settings": {
// output: generate files to ...
// ~ = path starts relative from scss-file
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../assets"
},
// ad a compressed version
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../assets"
}
// optional: add more outputs ...
],
}
See also official example in web: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Additional hint:
VERSION OFF 'LIVE SASS COMPILER' MAY BE OUTDATED
The actual commmon used Extension Live Sass Compiler is not longer supported (for years now). It uses an outdated SASS Version. The most recent features like #use are not supported in that version. You use that outdated version if author is 'Ritwick Dey'.
But there is an active supported fork with same name 'Live SASS Compiler' build by 'Glenn Marks'. As fork it works the same way and the settings are almost the same. Or you can use another actual compiler which is faster as you can use an direct installed SASS Version on your system. In that case you need to change the settings for your project.
Information about that you will find here:
https://stackoverflow.com/a/66207572/9268485
Updated: Correction name of author of supported extension 'Live SASS Compiler' to correct identification of extension.
Go to path: C:\Users\your user\AppData\Roaming\Code\User\settings.json
and change there the "liveSassCompile.settings.formats" section
for example:
the parameter : "savePath": "/Python/CSS",

Using a Composer class in functions.php

I'm trying to add a shortcode to my Wordpress site to pull a piece of data from a Google spreadsheet and drop it into a page. To do this, I'm trying to use Sheetsu. The php libraries for Sheetsu are managed through Composer.
I've got a working piece of standalone code, but when I drop it in functions.php, like this...
function do_sheetsu() {
require('vendor/autoload.php');
use Sheetsu\Sheetsu;
$sheetsu = new Sheetsu(['sheetId' => '8b297aa81110']);
$response = $sheetsu->search(['id' => '2.05.1']);
$collection = $response->getCollection();
echo $collection->get(0)->answer;
}
add_shortcode('sheetsu','do_sheetsu');
...it blanks my site. If I comment out the use Sheetsu\Sheetsu; line, my site comes back, but I get no output, and the error "PHP Fatal error: Class 'Sheetsu' not found" which I suppose makes perfectly good sense.
I know enough php to be able to break things, apparently, and my knowledge of Composer comes mostly from messing around with Flarum a little bit.
I'm sure I'm missing something obvious here, I'm guessing involving namespace declarations or something, but I can't put the pieces together.
I'm looking suspiciously at my composer.json file, as well—something doesn't seem right, but I'm not sure what to fix.
For the record, my composer.json, composer.lock, and vendor folder are in my theme folder with functions.php. My composer.json file looks like this:
{
"require": {
"emilianozublena/sheetsu-php": "^0.0.6"
}
}
and I'm not sure it should.
But what's more troubling is finding a way around that use Sheetsu\Sheetsu line that seems to totally break Wordpress...
Thanks for any help!
I assume here you have installed the package using command line running composer install or composer require emilianozublena/sheetsu-php.
You cannot use the use php keyword inside function. The use keyword must be declared in the outermost scope of a file (the global scope). Refer to this answer for more detail here
So, in this condition you can chain the namespace while instantiating your class. In our case new Sheetsu(['sheetId' => '8b297aa81110']) becomes new \Sheetsu\Sheetsu(['sheetId' => '8b297aa81110']);
Try this code below
function do_sheetsu() {
require('vendor/autoload.php');
$sheetsu = new \Sheetsu\Sheetsu(['sheetId' => '8b297aa81110']);
$response = $sheetsu->search(['id' => '2.05.1']);
$collection = $response->getCollection();
echo $collection->get(0)->answer;
}
add_shortcode('sheetsu','do_sheetsu');

Path Issue with Wordpress + Composer on Heroku

I am a newbie in composer and Heroku cloud and here has a may-be-stupid question about the path in composer.
I am trying to deploy a Wordpress on Heroku, following the code/instruction here: https://github.com/ellefsen/wordpress-heroku-php
In concept, I should use S3 to store any media content. However, my case is quite special: there are two and only two images for my site, now and in future. So I:
removed all S3 related code and configs;
add two images in public/content/uploads/ as: public/content/uploads/2016/08/one.png and public/content/uploads/2016/08/another.png;
adjust the .gitignore accordingly (remove the public/content/uploads);
Modify the composer.json as:
"extra": {
"webroot-dir": "public/wp",
"webroot-package": "wordpress",
"installer-paths": {
"public/content/plugins/{$name}/": [
"type:wordpress-plugin"
],
"public/content/mu-plugins/{$name}/": [
"type:wordpress-muplugin"
],
"public/content/uploads/{$name}/": [
"public/wp/wp-content/uploads/{$name}"
],
"public/content/themes/{$name}/": [
"type:wordpress-theme"
]
}
},
For item "public/content/uploads/{$name}/", I tried:
public/wp/wp-content/uploads/{$name}
wp-content/uploads/{$name}
But in any case, within the WP dashboard, I cannot see any image in the media lib. Could someone please give me a hand? Thanks!
I would not bother with the Media Library in WP as long as you are only dealing with two images. Just put them in your theme directory and reference them directly.
That way you won't have to deal with S3 or Heroku's ephemeral file storage as they would all be committed and included with your repository as part of your project.

Proper way to include react js in wordpress roots theme

https://roots.io/
I am using the Wordpress roots theme for the first time and also bower for first time. I want to include react js in my theme and was just wondering the correct steps to take.
I ran "bower install --save react"...
So I now have "react" folder at "/wp-content/themes/mytheme/bower_components"
I need it to load 2 files:
"/wp-content/themes/mytheme/bower_components/react/react.min.js"
"/wp-content/themes/mytheme/bower_components/react/JSXTransformer.js"
From here I am not sure the correct steps, I edited the "bower.json" file directly like so...
"overrides": {
"modernizr": {
"main": "./modernizr.js"
},
"react":{
"main":[
"./react.min.js",
"./JSXTransformer.js"
]
}
},
Then I edited the file at "wp-content/themes/mytheme/lib/assets.php" like so...
wp_enqueue_script('react', asset_path('scripts/react.js'), [], null, true);
wp_enqueue_script('JSXTransformer', asset_path('scripts/JSXTransformer.js'), [], null, true);
It is not loading. And how can I change the "type" parameter on the JSXTransformer script to be "text/jsx"
Im not using wordpress so this answer would be based on assumption, but on my experience with bower, you dont need to require the files after being compiled. you can directly call it depends on how they defined the variable. you will just need to require the compiled file.
so for react they use it like React
and there you can add it on your code like
React.createClass({
render() {
return <div>blah</div>;
}
})
hope it helps

Resources