• Important Notes
• Get Started
• Hooks References
• Packages
  • Animation
  • Assets
  • Backend
  • Blocks
  • Components
  • Config
  • Controls
  • Dashboard
  • Data
  • Editor Helper
  • Externals
  • Frontend
  • Helper
  • Higher Order Components
  • Hooks
  • Icons
  • Requests
  • Router
  • Store
  • Toolbars
  • Util

Please use this version of node and npm in case higher versions are not compatible.

• node : v14.20.1
• npm : 6.14.17

Any hooks before init and using init will not be triggered inside the framework. This is because the framework is initialized using the init hook it self.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "gutenverse-core/*": ["./gutenverse-core/src/*"],
        }
    },
}

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "rules": {
        "react/react-in-jsx-scope": "off",
    }
}

Open the gutenverse-core root folder in terminal and do npm install and then either npm start for development or npm run build for production.

Symlink or include folder framework in gutenverse-core to the plugin folder, then add below codes inside your plugin php file.

defined( 'GUTENVERSE_FRAMEWORK_URL' ) || define( 'GUTENVERSE_FRAMEWORK_URL', plugins_url( GUTENVERSE ) . '/lib/framework' );

import example :

import * from 'gutenverse-core/animation';

package inside window object : gutenverseCore.animation

import example :

import * from 'gutenverse-core/assets';

package inside window object : gutenverseCore.assets

import example :

import * from 'gutenverse-core/backend';

package inside window object : gutenverseCore.backend

import example :

import * from 'gutenverse-core/blocks';

package inside window object : gutenverseCore.blocks

import example :

import * from 'gutenverse-core/components';

package inside window object : gutenverseCore.components

import example :

import * from 'gutenverse-core/config';

package inside window object : gutenverseCore.config

import example :

import * from 'gutenverse-core/controls';

package inside window object : gutenverseCore.controls

import example :

import * from 'gutenverse-core/dashboard';

package inside window object : gutenverseCore.dashboard

import example :

import * from 'gutenverse-core/data';

package inside window object : gutenverseCore.data

import example :

import * from 'gutenverse-core/editor-helper';

package inside window object : gutenverseCore.editorHelper

import example :

import * from 'gutenverse-core/externals';

package inside window object : gutenverseCore.externals

import example :

import * from 'gutenverse-core/frontend';

package inside window object : gutenverseCore.frontend

import example :

import * from 'gutenverse-core/helper';

package inside window object : gutenverseCore.helper

import example :

import * from 'gutenverse-core/hoc';

package inside window object : gutenverseCore.hoc

import example :

import * from 'gutenverse-core/hooks';

package inside window object : gutenverseCore.hooks

import example :

import * from 'gutenverse-core/icons';

package inside window object : gutenverseCore.icons

import example :

import * from 'gutenverse-core/requests';

package inside window object : gutenverseCore.requests

import example :

import * from 'gutenverse-core/router';

package inside window object : gutenverseCore.router

Components :

• Routing : Which is the root component that you will use to wrap your components. It will pass two props (location & updateLocation) to the children component.

• Link : Which you will use to navigate/change the location variable. This component receive 5 variables:

  • location, data auto provided by the store, you don't need to change it.
  • updateLocation, data auto provided by the store, you don't need to change it.
  • to, an object contain two parameters (pathname & search)
  • className, a custom class name string
  • children, child components wrapped by Link

Variables :

• location : contain two sub-variables (pathname & search)
• updateLocation : function for updating the location variable, receive location variable.

import example :

import * from 'gutenverse-core/store';

package inside window object : gutenverseCore.store

First you need to import the store you want to use in the root component, so it will initialize the store. After that, you can call the store by using select/dispatch. Below are the store name list:

gutenverse/blocklist

is used to handle block list data

example:

select('gutenverse/blocklist').getList()

gutenverse/global-style

is used to handle global variable data

example:

select('gutenverse/global-style').getVariable()

gutenverse/library

is used to handle library data

example:

select('gutenverse/library').getLibraryData()

gutenverse/router

this store already auto included when you use the Routing component, but if you need to modify it you can use this store name.

example:

select('gutenverse/router').getLocation()

import example :

import * from 'gutenverse-core/toolbars';

package inside window object : gutenverseCore.toolbars

import example :

import * from 'gutenverse-core/util';

package inside window object : gutenverseCore.util