#633: refactor: move frontend source from assets/src to top-level src#668
Conversation
Reorganize the theme's frontend source into a top-level src/ directory
with context-based subdirectories (frontend/, admin/, editor/) that
webpack discovers automatically via readAllFileEntries. This separates
source from compiled output (assets/build/) and removes the need for
manual webpack entry configuration.
- Move CSS and JS source files into src/{css,js}/frontend/
- Add placeholder directories for admin, editor, shared, globals, mixins
- Update readAllFileEntries to scan context subdirectories automatically
- Integrate font copying and SVGO optimization into the webpack pipeline
- Update lint scripts to target src/
- Remove unused cross-env dependency, add copy-webpack-plugin and svgo
- Update README.md and docs to reflect new structure
There was a problem hiding this comment.
Pull request overview
Refactors the theme’s frontend asset source layout by moving files from assets/src/ to a top-level src/ tree and updating the webpack pipeline so entry points are auto-discovered by context (frontend/, admin/, editor/), with additional build-time copying/optimization for fonts and SVGs.
Changes:
- Update
webpack.config.jsto discover JS/CSS entries fromsrc/js/**andsrc/css/**(context-aware) and to copy fonts + optimize/copy SVGs intoassets/build/. - Update npm scripts/dependencies to match the new build pipeline (remove
cross-env, addcopy-webpack-plugin+svgo, retarget linting to./src). - Add/move initial
src/scaffolding (context directories, shared partial locations) and update docs/README to reflect the new structure.
Reviewed changes
Copilot reviewed 9 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
webpack.config.js |
Entry auto-discovery from src/, plus CopyWebpackPlugin + SVGO integration. |
package.json |
Build/lint script updates; devDependency changes for the new pipeline. |
package-lock.json |
Lockfile updates reflecting dependency additions/removals. |
src/js/frontend/core-navigation.js |
Updates SCSS import path to the new src/css/frontend/ location. |
src/js/frontend/modules/media-text.js |
Adds an Interactivity API module entry under the new modules path. |
src/css/frontend/styles.scss |
Adds initial frontend global stylesheet entry. |
src/css/frontend/core-navigation.scss |
Adds initial frontend stylesheet entry for core navigation. |
src/css/shared/README.md |
Documents that shared styles aren’t compiled as entries. |
src/css/mixins/_index.scss |
Adds mixin barrel placeholder. |
src/css/globals/_index.css |
Adds globals placeholder for custom properties/media. |
src/js/admin/.gitkeep |
Keeps new directory structure in git. |
src/js/editor/.gitkeep |
Keeps new directory structure in git. |
src/js/shared/.gitkeep |
Keeps new directory structure in git. |
src/css/admin/.gitkeep |
Keeps new directory structure in git. |
src/css/editor/.gitkeep |
Keeps new directory structure in git. |
src/fonts/.gitkeep |
Keeps new directory structure in git. |
src/images/svg/.gitkeep |
Keeps new directory structure in git. |
docs/asset-building-process.md |
Updates build documentation for the new structure and copy/optimize steps. |
README.md |
Updates repository structure documentation to reflect src/ move. |
.stylelintignore |
Ignores markdown files now that lint-style ./src traverses docs/READMEs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Refactors the theme’s frontend asset source layout by moving from assets/src/ to a top-level src/ with context subdirectories, and updates the Webpack build pipeline to auto-discover entries and copy/optimize static assets into assets/build/.
Changes:
- Updated
webpack.config.jsto auto-discover JS/CSS entry points undersrc/{js,css}/{frontend,admin,editor}and added copying of fonts + SVGO optimization/copying of SVGs intoassets/build/. - Updated PHP asset registration paths to match the new nested output structure (e.g.
js/frontend/...,css/frontend/...) and adjusted build-time file version typing. - Updated npm scripts/dependencies, docs, and ignore files to reflect the new source structure.
Reviewed changes
Copilot reviewed 11 out of 23 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Switches to dynamic entry discovery from top-level src/, adds CopyWebpackPlugin for fonts/SVGs, updates module entry location. |
| package.json | Removes cross-env, adds copy-webpack-plugin + svgo, updates build/lint scripts to target src/. |
| package-lock.json | Locks dependency changes for added/removed build tooling packages. |
| inc/Framework/Traits/AssetLoaderTrait.php | Adjusts filemtime version to be returned as a string. |
| inc/Core/Assets.php | Updates registered/enqueued asset paths to match new nested build outputs. |
| docs/asset-building-process.md | Documentation updates for new src/ structure and build pipeline behavior (including fonts/SVG handling). |
| README.md | Updates documented repo structure to reflect src/ and assets/build/ split. |
| .stylelintignore | Ignores Markdown files (to avoid linting non-styles content under src/). |
| .gitignore | Adds .vscode to ignored files. |
| src/js/frontend/core-navigation.js | Updates SCSS import path for relocated stylesheet. |
| src/js/frontend/modules/media-text.js | Adds an Interactivity API module entry under the new src/js/frontend/modules/ path. |
| src/js/shared/.gitkeep | Keeps shared/ directory present in the repository. |
| src/js/admin/.gitkeep | Keeps admin/ directory present in the repository. |
| src/js/editor/.gitkeep | Keeps editor/ directory present in the repository. |
| src/css/frontend/styles.scss | Adds frontend global styles entry under new structure. |
| src/css/frontend/core-navigation.scss | Adds frontend styles entry for core navigation (new location). |
| src/css/admin/.gitkeep | Keeps admin/ styles directory present. |
| src/css/editor/.gitkeep | Keeps editor/ styles directory present. |
| src/css/shared/README.md | Documents that shared styles are partials and not entry points. |
| src/css/mixins/_index.scss | Adds mixin barrel for Sass module usage. |
| src/css/globals/_index.css | Adds globals index file (currently documented as Sass-loadable). |
| src/fonts/.gitkeep | Keeps fonts directory present for CopyWebpackPlugin input. |
| src/images/svg/.gitkeep | Keeps SVG directory present for CopyWebpackPlugin + SVGO input. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * Recurses one level into each context subdirectory (frontend/, admin/, | ||
| * editor/) inside the given directory, collecting every file whose name | ||
| * does not start with `_` or `.`. If none of the context subdirectories | ||
| * exist, the directory itself is scanned instead. |
- Exclude modules/ from scripts entry scan to prevent duplicate compilation of media-text.js (compiled only as ES module now) - Rename src/css/globals/_index.css to _index.scss (Sass module) - Skip dotfiles in fonts CopyWebpackPlugin pattern to prevent .gitkeep from being copied to build output
Description
Move frontend source from
assets/src/to a top-levelsrc/directory with context-based subdirectories (frontend/,admin/,editor/). New files added undersrc/are compiled automatically without editing the webpack config.Technical Details
readAllFileEntriesinwebpack.config.jsnow scansfrontend/,admin/,editor/subdirectories within a given base directory, skipping files prefixed with_or.. Falls back to a flat scan if no context directories exist (used forsrc/js/frontend/modules/).scriptswebpack entry changed from a hardcoded path to dynamic discovery viareadAllFileEntries('./src/js').CopyWebpackPlugincopies fonts fromsrc/fonts/and optimizes SVGs fromsrc/images/svg/(via SVGO transform) intoassets/build/duringbuild:dev,build:prod, andstart.shared/,globals/, andmixins/directories are intentionally excluded from entry point scanning — they hold partials loaded via@use/@forward.cross-envdevDependency; addedcopy-webpack-pluginandsvgoas explicit devDependencies.Checklist
assets/src/removed; all frontend source lives undersrc/npm run build:devandnpm run build:prodproduce correct output inassets/build/npm startwatches and rebuilds on file changessrc/assets/src/path references remain in any config or scriptsrc/css/admin/orsrc/js/editor/is auto-discovered without webpack config changes_are not compiled as entry pointsREADME.mdanddocs/asset-building-process.mdupdated to reflect new structureScreenshots
N/A — no visual changes; this is a build tooling and source layout refactor.
Fixes/Covers issue
Fixes #633