Sticky Header & Floating Bar Block by WPWing

A Gutenberg container block that sticks to the top or bottom of the viewport as visitors scroll. Drop any blocks inside and they follow the reader down the page - no coding required.

---

Requirements

• PHP 7.4 or higher
• WordPress 5.8 or higher
• Node.js + npm
• Docker and Docker Compose

---

Local development setup

1. Add the local domain to your hosts file

echo "127.0.0.4 sticky-block.local" | sudo tee -a /etc/hosts

2. Configure the database (optional)

cp .env.example .env

The defaults work out of the box.

3. Install dependencies

npm install

4. Build the block

npm run build

5. Start WordPress

make dev

Docker starts MySQL, WordPress, WP-CLI, and Caddy. The src/ directory is bind-mounted as the plugin directory into WordPress, so changes are available without rebuilding the containers.

Open:

• Site: https://sticky-block.local
• Admin: https://sticky-block.local/wp-admin
• Credentials: admin / password

On the first visit, the browser may warn about Caddy's local certificate. Run make caddy-trust once to trust it on the host.

6. Start the dev build watcher

npm run start

The block is compiled to src/assets/public/ and recompiled on every file change. Activate the plugin in WordPress and the changes are live immediately.

Stop the stack with make dev-stop. To remove the containers and database volume, run make env-reset.

Docker commands

Command	Description
make dev	Start the local WordPress environment
make build	Build the block assets
make dist	Build the plugin distribution zip
make test-e2e	Run all Playwright tests
make test-e2e-backend	Run WordPress backend Playwright tests
make lint-js	Lint JavaScript
make lint-css	Lint CSS
make version V=x.y.z	Bump version strings across the plugin
make check	Verify version strings are consistent
make caddy-trust	Trust Caddy's local HTTPS certificate
make dev-stop	Stop the Docker services
make env-reset	Stop services and remove Docker volumes
make demo-content	Create any missing sticky behavior demo pages
make demo-reset	Delete and recreate all sticky behavior demo pages

---

On startup, WP-CLI creates four ready-to-test pages if they do not already exist:

• sticky-demo-article - long article with a percentage-triggered top block
• sticky-demo-sidebar - two-column layout with a parent-confined sidebar block
• sticky-demo-reveal - delayed bottom block with enough content to scroll
• sticky-demo-multiple - independent top and bottom blocks on one page

npm scripts

Command	Description
npm run start	Start the dev build watcher
npm run build	Production build
npm run lint:js	Lint JavaScript with ESLint
npm run lint:css	Lint SCSS with Stylelint
npm run format	Auto-format files
npm run packages-update	Update @wordpress/scripts and block dependencies

---

Project structure

├── src/                        - everything the plugin ships
│   ├── wpwing-sticky-block.php - plugin entry point
│   ├── readme.txt              - wordpress.org listing
│   ├── docs/                   - in-plugin documentation page
│   ├── languages/              - translation files
│   └── assets/
│       ├── src/                - block source
│       │   ├── block.json      - block metadata and attributes
│       │   ├── index.js        - block registration
│       │   ├── edit.js         - block editor UI and sidebar controls
│       │   ├── save.js         - saved markup
│       │   ├── frontend.js     - sticky logic (plain JS, no jQuery)
│       │   ├── variations.js   - preset block variations
│       │   ├── editor.scss     - editor-only styles
│       │   └── style.scss      - frontend styles
│       ├── public/             - compiled output (git-ignored)
│       └── blueprints/         - WordPress Playground blueprint
├── docs/                       - competitor, update, and marketing plans
├── dist/                       - release zip (git-ignored)
├── docker/                     - Caddy and WordPress bootstrap configuration
├── tests/                      - Playwright specs and static fixtures
├── tools/                      - screenshot capture for the wordpress.org listing
├── .distignore                 - paths excluded from the release zip
├── docker-compose.yml          - local WordPress development stack
└── Makefile                    - build, release, and Docker commands

---

Building a release zip

make dist

The zip is written to dist/wpwing-sticky-block.zip. It stages src/ through .distignore, so the block sources and the Playground blueprint are left out - only assets/public/ ships.