If you intend to clone the repository for custom development or contributions, please:

• Review the Contribution Guidelines
• Review the Coding Standards
• Review the Code of Conduct

Then you can follow these instructions:

• Node.js (LTS version recommended)
• npm (Node Package Manager)
• nvm (Node Version Manager) – recommended for managing multiple Node.js versions
• Composer – required for managing PHP dependencies

1. Clone the Repository:

   git clone https://github.com/schlotterer/flexline.git
   cd flexline

2. Switch to the Recommended Node.js Version:

   • Ensure you are using the correct version of Node.js as specified in the .nvmrc file.

   nvm use

   • If the required version is not installed, nvm will prompt you to install it.

3. Install Node.js Dependencies:

   npm install

4. Install PHP Dependencies:

   • Ensure Composer is installed on your system.

   composer install

5. Development Build:

   • Compiles assets without minification for easier debugging.

   npm run dev

6. Watch Mode:

   • Automatically rebuilds assets when files change, useful during active development.

   npm run watch

7. Production Build:

   • Minifies assets for production use.

   npm run prod

To maintain code quality and ensure consistency across contributions, our project utilizes linting tools for PHP, JavaScript, and SCSS, and enforces these standards through pre-commit hooks managed by Husky.

Pre-commit hooks are set up to run automatically on every commit to ensure that changes adhere to our coding standards. When you attempt to commit changes, the following linting processes are triggered:

• PHP files are automatically fixed and checked with PHP_CodeSniffer.
• JavaScript files are linted and automatically fixed with ESLint.
• SCSS files are linted and automatically fixed with Stylelint.

If there are any linting errors that cannot be automatically fixed, the commit will be aborted, and you will need to manually resolve these issues.

If you wish to manually lint your files prior to committing, you can use the following commands:

• Lint PHP files:

  npm run lint-php

• Automatically fix PHP files:

  npm run fix-php

• Lint JavaScript files:

  npm run lint-js

• Lint SCSS files:

  npm run lint-style

These commands provide a way to proactively check and fix your code, helping you avoid surprises during the commit process.

Reusable React helpers for block controls live in src/js/blocks/utils.js.

• getVisibilityControls( props ) – renders ToggleControls to hide blocks on desktop, tablet, or mobile.
• getContentShiftControls( props ) – outputs the Content Shift/Slide panel for applying negative margins and transforms.

FlexLine shortcodes remain available for backward compatibility, and the same values can be used as token placeholders inside block content and patterns. Tokens are replaced at render time using double braces, for example:

• {{flexline_copyright_year}}
• {{flexline_site_name}}
• {{flexline_page_title}}

Empty token values render as blank strings.

FlexLine ships opinionated styling for several third-party plugins so they feel native without extra CSS tweaks:

• Gravity Forms – aligns form fields, buttons, and validation messages with the theme’s typography and spacing.
• Events Manager – keeps event lists, single templates, and the bundled starter settings consistent with FlexLine layouts.
• Query Loop Filters – matches filter bars and control states from Human Made’s Query Loop Filters plugin to the theme’s navigation spacing and button treatments.
• Yoast SEO – required for patterns that reference the Yoast Breadcrumbs block; install the plugin to render those patterns as intended.

WordPress 6.9 ships a native accordion/accordion-item/heading/panel family. FlexLine automatically injects its visibility toggles and card/glass style variations into each of those blocks, so editors can keep using the same FlexLine controls—such as Card, Card w/ Padding, Outline, Glass, and Glass Card—without depending on a third-party accordion plugin.