Skip to content

Commit 9a49de6

Browse files
adrolliadrolli
committed
WP plugin finished, untested
1 parent f99d20a commit 9a49de6

File tree

7 files changed

+1081
-3
lines changed

7 files changed

+1081
-3
lines changed

‎packages/bpmn/README.md‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,27 @@ The package is part of the **Moox ecosystem** — a suite of Filament packages t
1616

1717
Learn more about [Moox](https://moox.org).
1818

19+
## Warning!
20+
21+
This package is under hard development.
22+
23+
## Todo
24+
25+
- [ ] Test the package and plugin
26+
- [ ] Catch all bugs and fix them
27+
- [ ] Installer, WP installer
28+
- [ ] Polish, add Translations
29+
- [ ] Publish on Packagist, Release
30+
1931
## Installation
2032

21-
To install this package, require it via Composer and run the Moox Installer:
33+
To install the Laravel package, require it via Composer and run the Moox Installer:
2234

2335
```bash
2436
composer require moox/skeleton
25-
php artisan moox:install
2637
```
2738

28-
Learn more about the [Moox Installer or common requirements](https://moox.org/installer).
39+
To install the WordPress Plugin copy the complete folder /wordpress/plugins/moox-bpmn into your WP plugins folder and activate the plugin afterwards.
2940

3041
## Screenshot
3142

‎packages/bpmn/wordpress/plugins/moox-bpmn/README.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Moox BPMN WordPress Plugin
2+
3+
A WordPress plugin for uploading, viewing and editing BPMN 2.0 models made with [BMPN.io](https://bpmn.io/) or [Camunda](https://camunda.com).
4+
5+
## Features
6+
7+
- **Gutenberg Block**: `moox/bpmn-viewer` block for easy BPMN integration
8+
- **Media Library Integration**: Upload and manage .bpmn files in WordPress Media Library
9+
- **Inline Editing**: Edit BPMN diagrams directly in the block editor
10+
- **Frontend Rendering**: Display BPMN diagrams on the frontend
11+
- **Self-contained**: No external dependencies, includes bpmn-js library
12+
13+
## Installation
14+
15+
1. Upload the plugin files to `/wp-content/plugins/moox-bpmn/`
16+
2. Activate the plugin through the 'Plugins' screen in WordPress
17+
3. Start using the BPMN Viewer block in your posts and pages
18+
19+
## Usage
20+
21+
### Gutenberg Block
22+
23+
1. Add the "BPMN Viewer" block to your post or page
24+
2. Click "Select BPMN File" to choose a .bpmn file from your Media Library
25+
3. Configure the block settings:
26+
- **Mode**: View Only or Edit
27+
- **Height**: Custom height for the BPMN viewer
28+
4. Save your post or page
29+
30+
### Block Settings
31+
32+
- **Mode**:
33+
- `View Only`: Display the BPMN diagram (read-only)
34+
- `Edit`: Allow editing of the BPMN diagram
35+
- **Height**: CSS height value (e.g., 500px, 50vh)
36+
37+
### Frontend Display
38+
39+
The BPMN diagrams are automatically rendered on the frontend using bpmn-js Viewer. Users can interact with the diagrams but cannot edit them unless in edit mode.
40+
41+
## File Support
42+
43+
The plugin supports BPMN 2.0 files with the following characteristics:
44+
45+
- File extension: `.bpmn`
46+
- MIME type: `application/xml`
47+
- Compatible with BPMN.io and Camunda Modeler
48+
49+
## Technical Details
50+
51+
### Dependencies
52+
53+
- **bpmn-js**: BPMN 2.0 rendering library
54+
- **WordPress 5.0+**: Required for Gutenberg blocks
55+
- **Modern browsers**: ES6+ support required
56+
57+
### File Structure
58+
59+
```
60+
moox-bpmn/
61+
├── moox-bpmn.php # Main plugin file
62+
├── js/
63+
│ ├── bpmn-block.js # Gutenberg block JavaScript
64+
│ └── bpmn-viewer.js # Frontend BPMN viewer
65+
├── css/
66+
│ ├── bpmn-block.css # Block editor styles
67+
│ └── bpmn-viewer.css # Frontend styles
68+
└── README.md # This file
69+
```
70+
71+
### AJAX Endpoints
72+
73+
- `wp_ajax_moox_bpmn_save`: Save BPMN content to media file
74+
75+
## Security
76+
77+
- All AJAX requests are protected with WordPress nonces
78+
- File uploads are restricted to .bpmn files
79+
- User permissions are checked before allowing edits
80+
81+
## Browser Support
82+
83+
- Chrome 60+
84+
- Firefox 55+
85+
- Safari 12+
86+
- Edge 79+
87+
88+
## License
89+
90+
MIT License - see the main Moox project for details.
91+
92+
## Support
93+
94+
For support and questions, please visit [Moox.org](https://moox.org).

‎packages/bpmn/wordpress/plugins/moox-bpmn/css/bpmn-block.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
.moox-bpmn-block-editor {
2+
border: 1px solid #e5e7eb;
3+
border-radius: 0.375rem;
4+
padding: 1rem;
5+
margin: 1rem 0;
6+
}
7+
8+
.moox-bpmn-preview {
9+
width: 100%;
10+
}
11+
12+
.moox-bpmn-preview-header {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
padding: 0.75rem;
17+
background-color: #f9fafb;
18+
border-bottom: 1px solid #e5e7eb;
19+
margin-bottom: 1rem;
20+
}
21+
22+
.moox-bpmn-file-info {
23+
display: flex;
24+
align-items: center;
25+
gap: 1rem;
26+
}
27+
28+
.moox-bpmn-file-info strong {
29+
color: #374151;
30+
}
31+
32+
.moox-bpmn-preview-content {
33+
position: relative;
34+
min-height: 300px;
35+
border: 1px solid #e5e7eb;
36+
border-radius: 0.375rem;
37+
overflow: hidden;
38+
}
39+
40+
.moox-bpmn-editor {
41+
height: 100%;
42+
min-height: 300px;
43+
}
44+
45+
.moox-bpmn-editor-toolbar {
46+
display: flex;
47+
justify-content: flex-end;
48+
padding: 0.75rem;
49+
background-color: #f9fafb;
50+
border-top: 1px solid #e5e7eb;
51+
margin-top: 1rem;
52+
}
53+
54+
.moox-bpmn-loading {
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
height: 200px;
59+
color: #6b7280;
60+
font-size: 0.875rem;
61+
}
62+
63+
/* Block editor specific styling */
64+
.block-editor-block-list__block[data-type="moox/bpmn-viewer"] {
65+
margin: 1rem 0;
66+
}
67+
68+
.block-editor-block-list__block[data-type="moox/bpmn-viewer"] .wp-block {
69+
margin: 0;
70+
}
71+
72+
/* Inspector controls styling */
73+
.components-panel__body .components-base-control {
74+
margin-bottom: 1rem;
75+
}
76+
77+
.components-panel__body .components-base-control__label {
78+
font-weight: 600;
79+
margin-bottom: 0.5rem;
80+
}
81+
82+
/* Media upload styling */
83+
.block-editor-media-placeholder {
84+
border: 2px dashed #cbd5e1;
85+
border-radius: 0.375rem;
86+
padding: 2rem;
87+
text-align: center;
88+
background-color: #f8fafc;
89+
}
90+
91+
.block-editor-media-placeholder .components-button {
92+
margin-top: 1rem;
93+
}
94+
95+
/* Responsive design */
96+
@media (max-width: 768px) {
97+
.moox-bpmn-preview-header {
98+
flex-direction: column;
99+
gap: 0.5rem;
100+
align-items: flex-start;
101+
}
102+
103+
.moox-bpmn-file-info {
104+
flex-direction: column;
105+
gap: 0.5rem;
106+
align-items: flex-start;
107+
}
108+
109+
.moox-bpmn-editor-toolbar {
110+
justify-content: center;
111+
}
112+
}
113+
114+
/* WordPress admin styling */
115+
.wp-admin .moox-bpmn-block-editor {
116+
background-color: #fff;
117+
}
118+
119+
.wp-admin .moox-bpmn-preview-header {
120+
background-color: #f1f1f1;
121+
}
122+
123+
.wp-admin .moox-bpmn-editor-toolbar {
124+
background-color: #f1f1f1;
125+
}
126+
127+
/* Dark mode support */
128+
@media (prefers-color-scheme: dark) {
129+
.moox-bpmn-block-editor {
130+
background-color: #1f2937;
131+
border-color: #374151;
132+
}
133+
134+
.moox-bpmn-preview-header {
135+
background-color: #111827;
136+
border-color: #374151;
137+
}
138+
139+
.moox-bpmn-preview-content {
140+
border-color: #374151;
141+
}
142+
143+
.moox-bpmn-editor-toolbar {
144+
background-color: #111827;
145+
border-color: #374151;
146+
}
147+
148+
.moox-bpmn-file-info strong {
149+
color: #f3f4f6;
150+
}
151+
152+
.moox-bpmn-loading {
153+
color: #9ca3af;
154+
}
155+
}

0 commit comments

Comments
 (0)