You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -31,52 +31,52 @@ This plugin serves as a foundational template for WordPress block development, u
31
31
32
32
The plugin provides a structured approach to managing multiple block types:
33
33
34
-
-Static Blocks: Traditional Gutenberg blocks rendered entirely in JavaScript
35
-
-Dynamic Blocks: Server-side rendered blocks using PHP for dynamic content
36
-
-Interactive Blocks: Client-side interactive blocks with JavaScript functionality
34
+
- Static Blocks: Traditional Gutenberg blocks rendered entirely in JavaScript
35
+
- Dynamic Blocks: Server-side rendered blocks using PHP for dynamic content
36
+
- Interactive Blocks: Client-side interactive blocks with JavaScript functionality
37
37
38
38
#### Efficient Asset Loading
39
39
40
40
Each block operates as an independent unit, similar to single-block plugins, with:
41
41
42
-
-Isolated asset loading - scripts and styles load only when blocks are used
43
-
-Separate frontend and editor bundles to optimize performance
44
-
-Smart asset versioning through WordPress's build process (the asset.php files automatically track dependencies and versions based on content changes)
42
+
- Isolated asset loading - scripts and styles load only when blocks are used
43
+
- Separate frontend and editor bundles to optimize performance
44
+
- Smart asset versioning through WordPress's build process (the asset.php files automatically track dependencies and versions based on content changes)
45
45
46
46
### Build System
47
47
48
48
#### Asset Management
49
49
50
50
The plugin uses WordPress's modern build system with some notable features:
51
51
52
-
-Automatic version hashing through `.asset.php` files
53
-
-The version numbers in `Enqueues.php` are dynamically generated during build, preventing cache issues and ensuring users always get the latest block versions
54
-
-Dependencies are automatically tracked and included in the build process
52
+
- Automatic version hashing through `.asset.php` files
53
+
- The version numbers in `Enqueues.php` are dynamically generated during build, preventing cache issues and ensuring users always get the latest block versions
54
+
- Dependencies are automatically tracked and included in the build process
55
55
56
56
The build process supports loading an additional script into the block editor for:
57
57
58
-
-Block variations and modifications
59
-
-Custom style variations
60
-
-Custom block categories
61
-
-Other block related functionality
58
+
- Block variations and modifications
59
+
- Custom style variations
60
+
- Custom block categories
61
+
- Other block related functionality
62
62
63
63
### Technical Implementation
64
64
65
65
The plugin demonstrates modern WordPress development practices:
66
66
67
-
-Proper namespacing and class structure
68
-
-Clean separation of concerns between editor and frontend code
69
-
-WordPress coding standards compliance
70
-
-Development tooling for code quality (ESLint, PHP_CodeSniffer, Prettier)
67
+
- Proper namespacing and class structure
68
+
- Clean separation of concerns between editor and frontend code
69
+
- WordPress coding standards compliance
70
+
- Development tooling for code quality (ESLint, PHP_CodeSniffer, Prettier)
71
71
72
72
### Development Environment
73
73
74
74
The plugin includes a complete development environment with:
75
75
76
-
-Docker-based local WordPress setup through `wp-env`
77
-
-Hot reloading for development
78
-
-Automated build processes for production
79
-
-Comprehensive linting and formatting tools
76
+
- Docker-based local WordPress setup through `wp-env`
77
+
- Hot reloading for development
78
+
- Automated build processes for production
79
+
- Comprehensive linting and formatting tools
80
80
81
81
This structure provides a robust foundation for building complex block-based solutions while maintaining clean code organization and optimal performance.
82
82
@@ -86,10 +86,10 @@ This structure provides a robust foundation for building complex block-based sol
86
86
87
87
Before you begin, ensure you have the following installed:
This project includes [@wordpress/env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) as an optional local development environment. You can run the following to start and stop the Docker container:
108
109
109
-
-`npm run wp-env start`
110
-
-`npm run wp-env stop`
110
+
-`npm run wp-env start`
111
+
-`npm run wp-env stop`
111
112
112
113
### Local Site Info
113
114
114
-
-Site: http://localhost:8888
115
-
-Admin: http://localhost:8888/wp-admin
116
-
-Login: `admin`
117
-
-Password: `password`
115
+
- Site: http://localhost:8888
116
+
- Admin: http://localhost:8888/wp-admin
117
+
- Login: `admin`
118
+
- Password: `password`
118
119
119
120
### Troubleshooting
120
121
121
122
If wp-env issues occur try the following:
122
123
123
-
-`npm run wp-env stop`
124
-
-`npm run wp-env clean`
125
-
-`npm run wp-env start`
124
+
-`npm run wp-env stop`
125
+
-`npm run wp-env clean`
126
+
-`npm run wp-env start`
126
127
127
128
## Development Commands
128
129
129
-
-`npm start` - Start development mode with hot reloading
130
-
-`npm run build` - Build production assets
131
-
-`npm run lint:js` - Lint JavaScript files
132
-
-`npm run lint:css` - Lint CSS files
133
-
-`npm run format` - Format code using WordPress standards
130
+
-`npm start` - Start development mode with hot reloading
131
+
-`npm run build` - Build production assets
132
+
-`npm run lint:js` - Lint JavaScript files
133
+
-`npm run lint:css` - Lint CSS files
134
+
-`npm run format` - Format code using WordPress standards
134
135
135
136
## Coding Standards
136
137
137
138
This project follows WordPress coding standards using:
0 commit comments