Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - EssentialBlocks/infobox · GitHub
Skip to content

Repository files navigation

Infobox

Highlight Your Key Features & Hold Audience Attention with Info Box Block.

Infobox is a WordPress Gutenberg block that lets you present features, key points, services and statistics in an attractive, fully customizable info box — without writing any CSS.

Features

  • Completely customizable — content, icons, colors, spacing and typography.
  • Super light-weight — no extra resources loaded, optimized for fast rendering and instant live editing.
  • Native block editor experience — full inspector controls with responsive settings.
  • Dedicated support — via the plugin support forum.

Requirements

Minimum
WordPress6.0
PHP7.4
Tested up to (WP)7.0

Installation

From WordPress admin

  1. Go to Plugins → Add New and search for Infobox.
  2. Install and activate.
  3. Add the Infobox block from the block inserter in the editor.

Manually

  1. Download the plugin zip and upload it to wp-content/plugins/.
  2. Activate Infobox from Plugins in wp-admin.

Development

Clone with submodules — controls/ and lib/style-handler/ are git submodules and the plugin does not build (or run) without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/infobox.git
# already cloned?
git submodule update --init --recursive

The block is built with @wordpress/scripts.

npm ci # install exactly what package-lock.json pins
npm run start # development build with watch
npm run build # production build into dist/
npm run format # format source
npm run lint:js # lint JavaScript
npm run lint:css # lint styles

package-lock.json is committed and CI installs with npm ci, so a release build resolves to exactly the dependency tree that was tested. Use npm ci rather than npm install unless you are deliberately changing a dependency.

Source lives in src/, shared controls in controls/, PHP entry point is infobox.php, and compiled assets are written to dist/.

Node version

.nvmrc pins Node 14, matching node-version in .github/workflows/deploy.yml. Run nvm use to match the release environment.

Node 14 reached end of life on 2023-04-30. It is pinned deliberately, and it is technical debt — not a recommendation:

  • The root build is not the problem. It has been verified on Node 20 / npm 10 and produces a byte-identical dist/index.js. It would move to a current LTS today.
  • The controls/ submodule is the constraint. Its dependency tree only resolves on npm 6, which ships with Node 14:
    • react-sortable-hoc@2.0.0 declares peer react@"^16.3.0 || ^17.0.0", while the @wordpress/* packages require React 18. npm 7+ enforces peer ranges, so npm install fails with ERESOLVE.
    • npm install --legacy-peer-deps gets past that, then the build fails with Cannot find module 'ajv/dist/compile/codegen' — flattening hoists ajv@6 (required by eslint 8) while ajv-keywords@5 needs the ajv@8 API. --legacy-peer-deps is therefore not a fix and must not be adopted in CI.
    • Bumping the submodule does not help: controls master still declares react-sortable-hoc@^2.0.0 with no overrides and no engines.

Before the pipeline can move to Node 22+, controls must migrate off react-sortable-hoc (the upstream successor is @dnd-kit, which controls master already depends on for other code). Raising node-version on its own would break the ability to build controls at all. Track this as a separate task and change .nvmrc, engines, and deploy.yml together with that migration.

dist/ is a committed build artifact

dist/ is committed, and CI only rebuilds part of it. npm run build at the repo root emits onlydist/index.js and dist/style.css. The rest — dist/modules.js (the controls UI layer), dist/frontend.js, dist/style-modules.css — is produced by a second build inside controls/, which deploy.yml does not run.

The pinned controls commit matches the committed dist/modules.js. Do not bump the controls submodule without rebuilding and committing dist/modules.js, or the release will ship a stale bundle against newer source.

Branches

BranchPurpose
masterStable, released code. Default branch.
latestStaging for the next release.
devActive development. Open pull requests against this branch.

Contributing

Issues and pull requests are welcome at EssentialBlocks/infobox. Please branch off dev and target dev with your pull request.

Contributors

Support & Documentation

License

Licensed under the GNU General Public License v3.0 or later.

Releases

Contributors

Languages