@rnaga/wp-next-ui 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +54 -66
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,37 +1,35 @@
1
1
  # WP-Next
2
2
 
3
- WP-Next is built with [Next.js](https://nextjs.org/) and [WP-Node](https://github.com/rnaga/wp-node). It provides two complementary products for building WordPress-powered applications where every layer is written from scratch in TypeScript and React — **no PHP involved**.
4
-
5
- ---
6
-
7
3
  ## 📖 [Full Documentation → rnaga.github.io/wp-next](https://rnaga.github.io/wp-next/)
8
4
 
9
5
  > For guides, concepts, and examples, the documentation site is the best starting point.
10
6
 
7
+ **WP-Next** is a **TypeScript-first** toolkit for building **WordPress-powered Next.js applications** — with a visual drag-and-drop editor, a modern React admin dashboard, and **first-class AI support** built in from day one.
8
+
9
+ <a href="https://vimeo.com/1185738064?share=copy#t=0" target="_blank" rel="noopener">
10
+ <img width="1200" height="699" alt="WP-Next Editor canvas demo" src="https://rnaga.github.io/wp-next/assets/editor/canvas/drag-drop-0.gif" />
11
+ </a>
12
+
13
+ <a href="https://vimeo.com/1112693769?share=copy#t=0" target="_blank" rel="noopener">
14
+ <img width="1200" height="699" alt="WP-Next Admin dashboard demo" src="https://rnaga.github.io/wp-next/images/dashboard-vimeo.png" />
15
+ </a>
16
+
11
17
  ---
12
18
 
13
- ## WP-Next Editor
19
+ ## Two Products, One Stack
14
20
 
15
- WP-Next Editor is a visual, drag-and-drop page editor for building public-facing pages directly connected to your WordPress database. Pages are stored as structured [Lexical](https://lexical.dev/docs/intro) JSON in the WordPress database — making them version-controllable, programmatically manipulable, and AI-ready.
21
+ WP-Next ships as two products you can use together or independently:
16
22
 
17
- <a href="https://vimeo.com/1185738064?share=copy#t=0" target="_blank" rel="noopener">
18
- <img width="1200" height="699" alt="WP-Next Editor canvas demo" src="https://rnaga.github.io/wp-next/assets/editor/canvas/canvas.png" />
19
- </a>
23
+ - **WP-Next Editor** — visual site builder with live preview, responsive breakpoints, dynamic WordPress data binding, and AI-powered template authoring. Includes Admin automatically.
24
+ - **WP-Next Admin** — standalone React admin dashboard you can adopt without the editor.
20
25
 
21
- ### Key Features
26
+ Use both as one stack, or start with Admin alone.
22
27
 
23
- - **Drag-and-drop canvas** — build pages visually with a live preview. Select, resize, nest, and animate elements directly on the canvas.
24
- - **Responsive design** — set per-device breakpoints (desktop, tablet, mobile) and CSS states (hover, focus, etc.). Each device gets its own `@media` query at render time.
25
- - **Dynamic data binding** — pull posts, users, taxonomies, and options directly from the WordPress database into any element. No custom API endpoints required.
26
- - **Widget system** — embed sub-templates (widgets) inside other templates for reusable headers, footers, and components. Widget variants let the same widget render different content per embedding.
27
- - **CSS variables** — define design tokens at the template level and reference them across all elements for consistent theming.
28
- - **Animations** — attach CSS keyframe animations (98 Animate.css presets) to any element, triggered by hover, click, scroll, and more.
29
- - **JSON editor** — edit the raw Lexical JSON directly in a built-in code editor for precise control over template structure.
30
- - **Save history** — create and manage template save points with preview and restore support.
28
+ ---
31
29
 
32
- ### Quick Demo
30
+ ## Quick Demo
33
31
 
34
- Run a ready-made WP-Next Editor example using Docker:
32
+ Run a ready-made WP-Next Editor example using Docker. This is the recommended demo because it includes the editor and the admin dashboard in one setup:
35
33
 
36
34
  ```bash
37
35
  docker run --rm --init -it --name wp-next-editor-example -p 3000:3000 \
@@ -56,7 +54,17 @@ To stop the container:
56
54
  docker stop wp-next-editor-example
57
55
  ```
58
56
 
59
- ### Initialize the Editor
57
+ ## Prerequisites
58
+
59
+ Both products require a running WordPress database. If you don't already have WordPress installed, see the [WP-Node installation guide](https://rnaga.github.io/wp-node/docs/getting-started/installation#prerequisites).
60
+
61
+ ## Getting Started
62
+
63
+ Choose the setup that matches what you want to build:
64
+
65
+ ### Build WP-Next Editor + Admin
66
+
67
+ Use this if you want the full WP-Next experience. This installs both packages, with WP-Next Admin included as part of the editor setup.
60
68
 
61
69
  ```bash
62
70
  npx @rnaga/wp-next-cli -- initEditor
@@ -64,7 +72,30 @@ npx @rnaga/wp-next-cli -- initEditor
64
72
 
65
73
  See the [Editor Installation guide](https://rnaga.github.io/wp-next/docs/editor/installation) for the full setup walkthrough.
66
74
 
67
- > `wp-next-editor` includes `wp-next-admin` out of the box. See [WP-Next Admin](#wp-next-admin) below for what it provides.
75
+ ### Build WP-Next Admin Only
76
+
77
+ Run this only if you want to start up **WP-Next Admin** without the visual editor:
78
+
79
+ ```bash
80
+ npx @rnaga/wp-next-cli -- initAdmin
81
+ ```
82
+
83
+ See the [Admin Getting Started guide](https://rnaga.github.io/wp-next/docs/admin/getting-started) for the full setup walkthrough.
84
+
85
+ ## WP-Next Editor
86
+
87
+ WP-Next Editor is a visual, drag-and-drop website builder for building public-facing WordPress sites directly connected to your WordPress database. Templates and pages are stored as structured [Lexical](https://lexical.dev/docs/intro) JSON in the WordPress database — making them version-controllable, programmatically manipulable, and AI-ready.
88
+
89
+ ### Key Features
90
+
91
+ - **Drag-and-drop canvas** — build pages visually with a live preview. Select, resize, nest, and animate elements directly on the canvas.
92
+ - **Responsive design** — set per-device breakpoints (desktop, tablet, mobile) and CSS states (hover, focus, etc.). Each device gets its own `@media` query at render time.
93
+ - **Dynamic data binding** — pull posts, users, taxonomies, and options directly from the WordPress database into any element. No custom API endpoints required.
94
+ - **Widget system** — embed sub-templates (widgets) inside other templates for reusable headers, footers, and components. Widget variants let the same widget render different content per embedding.
95
+ - **CSS variables** — define design tokens at the template level and reference them across all elements for consistent theming.
96
+ - **Animations** — attach CSS keyframe animations (98 Animate.css presets) to any element, triggered by hover, click, scroll, and more.
97
+ - **JSON editor** — edit the raw Lexical JSON directly in a built-in code editor for precise control over template structure.
98
+ - **Save history** — create and manage template save points with preview and restore support.
68
99
 
69
100
  ### AI-Powered Template Authoring — Built-in Agent Skills
70
101
 
@@ -99,11 +130,7 @@ See [Using AI](https://rnaga.github.io/wp-next/docs/editor/concepts-features/usi
99
130
 
100
131
  ## WP-Next Admin
101
132
 
102
- WP-Next Admin is a **React-based Admin Dashboard** — a headless CMS that serves as a modern alternative to the traditional WordPress Admin Dashboard.
103
-
104
- <a href="https://vimeo.com/1112693769?share=copy#t=0" target="_blank" rel="noopener">
105
- <img width="1200" height="699" alt="WP-Next Admin dashboard demo" src="https://rnaga.github.io/wp-next/images/dashboard-vimeo.png" />
106
- </a>
133
+ WP-Next Admin is a **React-based Admin Dashboard** that serves as a modern alternative to the traditional WordPress Admin Dashboard. It can be used on its own, and it is also the admin layer that ships with WP-Next Editor.
107
134
 
108
135
  ### Key Features
109
136
 
@@ -122,39 +149,6 @@ In **multisite mode**, it also supports:
122
149
  - Sites
123
150
  - Blogs (per-site content such as posts, media, comments)
124
151
 
125
- ### Quick Demo
126
-
127
- Run a ready-made WP-Next example using Docker:
128
-
129
- ```bash
130
- docker run --rm --init -it --name wp-next-example -p 3000:3000 \
131
- -v wp-next-example_public:/app/admin/public \
132
- -v wp-next-example_db:/var/lib/mysql \
133
- -v wp-next-example_html:/app/html \
134
- rnagat/wp-next-example:latest
135
- ```
136
-
137
- Visit [http://localhost:3000/admin](http://localhost:3000/admin) and log in with:
138
-
139
- ```text
140
- Username: wp
141
- Password: wp
142
- ```
143
-
144
- To stop the container:
145
-
146
- ```bash
147
- docker stop wp-next-example
148
- ```
149
-
150
- ### Initialize the Admin Dashboard
151
-
152
- ```bash
153
- npx @rnaga/wp-next-cli -- initAdmin
154
- ```
155
-
156
- See the [Admin Getting Started guide](https://rnaga.github.io/wp-next/docs/admin/getting-started) for the full setup walkthrough.
157
-
158
152
  ### Extensibility
159
153
 
160
154
  WP-Next Admin supports **custom pages** and a **hook system** (filters and actions) inspired by WordPress hooks but built for TypeScript and Node.js. Frontend hooks extend the Admin UI in the browser; backend hooks handle server-side concerns such as authentication, media uploads, and integrations.
@@ -163,12 +157,6 @@ See [Hooks](https://rnaga.github.io/wp-next/docs/admin/concepts-features/hooks)
163
157
 
164
158
  ---
165
159
 
166
- ## Prerequisites
167
-
168
- Both products require a running WordPress database. If you don't already have WordPress installed, see the [WP-Node installation guide](https://rnaga.github.io/wp-node/docs/getting-started/installation#prerequisites) for instructions on running it with Docker.
169
-
170
- ---
171
-
172
160
  ## License
173
161
 
174
162
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rnaga/wp-next-ui",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "scripts": {
5
5
  "build": "node ../../scripts/build-ui.mjs",
6
6
  "release-old": "node ../../scripts/release.mjs",