rockiger

Hello @jjnash01,

the user logs in via WP. The WP will set the HTTP header accordingly. To access the user object via JS, here is one global JS variable ‘rp-react-app-asset-0’. It has two properties, user and usermeta.

If the user is logged in, the properties hold the user data, otherwise, they are empty.

To access other WP data/functions, you have to use the WP-API at your-domain/wp-json. Alternatively, you can use the WP GraphQL plugin.

PS: If you like the plugin, please consider writing a review.

There is one global js variable ‘rp-react-app-asset-0’. It has two properties user and usermeta.

If the user is logged in, the holds the user data, otherwise, they are empty.

@rittermobile Cool, I would be happy to see the result, when it goes live.

@rittermobile Could you solve your problems with the CSS?

@jjnash01 Do you have any other plugins installed?

Hi @sarahmariecarter,

when setting the slug it should update the package.json. I don’t know why it didn’t work. Is localWP on Windows a POSIX environment?

Otherwise you will probably need WSL2 for ReactPress to work. Nevermind, if it works for you as is.

@afshinmoshrefi the folder moved to wp-content/reactpress/apps. It is not located in the plugin folder anymore.

Sorry for the confusion.

If there is a simple call provided by Gutenberg, I can’t find it.

Right now, my best bet is using the current window selection to insert text at the current cursor position:

function insertTextAtCaret(text) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

At the end Gutenberg uses contentEditable.

Uff, it probably makes sense to use different css class names in your react app than in your WP theme.

I don’t know your WP theme and where in the HTML it loads the css. Maybe it makes sense the put the line

@import '~antd/dist/antd.css';

at the end in the WP theme, instead of calling it in your react app.

Ant uses Less, maybe there a way to bump the specificity of there created css classes.

Hope that helps.

To fully use react-router you would probably need to configure your web server, that it doesn’t route the URL you would like to use.

As an alternative, you could use search parameters instead of using path variables / subdirectories. I don’t know if you need to save that state in your URL?

You could manage your views with a different way of state management. Like state hooks, redux, localstorage, etc.

Hello @sarahmariecarter,

something went wrong with the update process of your package.json

As I said your build command should have look something like this:

...
  "scripts": {
    "start": "react-scripts start",
    "build": "PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

Adjusted to your app of course.

The conversion to base64 works to, because doesn’t rely on the right path.

Hello @sarahmariecarter,

can you check if there is an alternative build path in you package.json? Something like:

"PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",

Best
Marco

Hello @afsheen001,

this is probably caused by build path in package.json.

ReactPress changes the build command to somthing like:

"PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",

I don’t know enough about the inner workings of react-router to tell you what the problem is. Maybe react router allows for some configuration.

For now, you will have to investigate this or don’t use react-router. Without the build changed PUBLIC_URL images won’t work as expected.

Edit: This doc looks promising: https://create-react-app.dev/docs/deployment/#building-for-relative-paths

Best
Marco

• This reply was modified 3 years, 7 months ago by rockiger.
• This reply was modified 3 years, 7 months ago by rockiger.

A .keep file you can tell git to add an empty directory.

This won’t help you in any way. I will change the plugin as fast as possible.

Arrrr, I add a .keep file, to the apps directory. I guess that is the problem. The update overwrites the apps directory.

I have to release another version and create the directory by hand.

Thinking about it, it will probably make sense to move the apps directory out of the plugins directory.