A modular template system for building marketing pages at Sample.
The Sample Web Modules Page Template is entirely comprised of Advanced Custom Fields Flexible Content layouts, which allow us to build in a modular, componentized way. By adding, removing, or adapting modules, our marketing team can build any number of page designs with greatly reduced developer support.
MWM provides a framework for easy "plug-and-play" development of modules. See detailed instructions for creating new modules and partials using the MWM CLI for more information.
- Installation instructions
- Development
- Deployment instructions
- Deployment Pipeline
- Code Standards
- Naming conventions
- Templates
- Scripts and Styles
- Themes
- Color Palettes
- Creating New Modules/Partials
- Using Modules
- Using Partials
- Gated Content - Module
- Gated Content - Article
- Migrations
- PHPUnit Tests
- Search Index
- Localization
- Taxonomies
- Signals Tracking
- Composer 1.8.x >= 2.3.7
- Node 14.x.x >= 14.17.0
- npm 6.4.x >= 6.14.17
- PHP 7.3 >= 7.4.33
cd marketing-web-modules
composer install
npm config set registry https://nexus.corp.sample.com/repository/npm/
npm i
npm run devNote: The actual "cloning" of the repo is done automatically as part of the wpdev provisioning workflow.
| Branch | Description |
|---|---|
origin/development |
This is our primary working branch. All work should be based and branched off from here. |
origin/staging |
This is our staging branch. All feature branches should be merged into staging before development |
origin/jira/[user_id]/[jira-ticket] |
Feature branch format. Pull Requests made to origin/development |
Note: You should NOT be creating feature branches from staging. All feature branches should be brached off of development.
Advanced Custom Fields, or ACF is the backbone to our backend experience. Currently, we mostly utilize this through an abstraction called Extended ACF.
Extended ACF is how we add different fields to a module or partial.
- Update or Add to
wp-config.phpthe following lines setting ENVIRONMENT = 'development'.
# if ENVIRONMENT === development : Use local assets, otherwise use S3 assets
if ( ! defined( 'ENVIRONMENT' ) ) {
define( 'ENVIRONMENT', 'development' );
}- Run the commands listed below to compile assets during development using Webpack.
npm run watch # Watch and compile css and js files
npm run dev # Build assets for local development
npm run build # Build assets for production: minified css and js files
npm run deploy # Builds and Deploys assets to S3 (This should not be done locally)
npm run bump-staging # Bumps version numbers (This should not be done locally)
npm run bump-prod # Bumps version numbers to the next minor number
npm run bump-prod-major # Bumps version numbers to the next major number npm test # run all unit tests on each save of JS files
npm test-once # run all unit tests once
mocha test/FILENAME.js # run a specific unit test once
mocha test/FILENAME.js --watch # run a specific unit test on each save of JS filesAll asset building and deployment is handled in Gitlab CI. Locally we only need to merge into staging or development then bump the version number (production only) for the updated assets.
To deploy to Staging follow the below example.
git checkout staging
git pull
git merge jira/user_id/WORDPRESS-####
git pushYou no longer need to bump version numbers for staging.
After the push Gitlab will take over the deployment. See Deployment Pipeline.
To deploy to Production follow the below example.
First, merge the current development branch into your feature branch.
git checkout development
git pull
git checkout jira/user_id/WORDPRESS-####
git merge development
git pushThen, merge your feature branch into development to trigger the deployment.
git checkout development
git merge jira/user_id/WORDPRESS-####
npm run bump-prod
git commit -am "bump to v[version number]"
git pushAfter the push Gitlab will take over the deployment. See Deployment Pipeline.
CSS, JS, and Image files are typically deployed via our deployment pipeline. If you must deploy locally, you'll need to add a credentials.json file in the root folder.
Then you can run the command:
npm run bump-<environment> (optional)
npm run deployExample credentials.json
{
"accessKeyId": "SECRETKEY_ID",
"secretAccessKey": "SECRETKEY"
}Gitlab CI is how we test and deploy our code to the world.
We have some robust coding standards. Be sure to have the following installed and available within your code editor: