Adds a chic and modernist "Abstract" section to posts via a shortcode [abstract], with schema.org JSON-LD structured data.
The Abstract Box plugin (developed and maintained by Mohd Elfie Nieshaem Juferi) allows you to add a stylish, modern “Abstract” section to your WordPress posts using a simple shortcode. Ideal for academic papers, research summaries, or any content that benefits from a prominent callout.
Features:
- Seven distinct box styles: Modern, Academic, Minimal, Card, Ruled, Editorial, and Summary
- Style-specific hover effects — each style responds in a way native to its character
- Live admin preview — changes to style, colours, font, and border radius reflect instantly without saving
- Fully configurable colour scheme with five pickers and eight one-click colour presets
- Six font family options: Sans-Serif, Serif, Humanist Sans, Monospace, Slab Serif, System Default
- Tabbed settings page (Appearance, Schema, Advanced)
- Customizer integration with live colour preview
- Schema.org JSON-LD structured data output (CreativeWork, ScholarlyArticle, or Article)
- Per-instance colour and style overrides via shortcode attributes
- Native Gutenberg block with inspector controls
- Optional hover effect (desktop only, respects prefers-reduced-motion)
- Custom CSS class support for theme-level targeting
- Full internationalisation (i18n) support
Usage
Basic
[abstract]Your abstract content here.[/abstract]
With title
[abstract title="Key Findings"]Your abstract content here.[/abstract]
With subtitle
[abstract title="Abstract" subtitle="A brief summary"]Your content.[/abstract]
Custom Settings (Override Per-Box)
[abstract title="Important" bg_color="#ffcccc" title_color="#cc0000" accent_color="#aa0000"]This abstract will be red regardless of your global settings.[/abstract]
Screenshots
FAQ
Can I use my theme’s styles instead?
Yes. Enable “Use Theme CSS” in the settings to prevent the plugin from loading its own stylesheet. The abstract box will use BEM classes (abstract-box, abstract-box__title, abstract-box__subtitle, abstract-box__content) that you can target in your theme.
What schema type should I use?
CreativeWork (the default) is recommended as it avoids conflicts with Article graphs generated by SEO plugins. Use ScholarlyArticle for academic content if your SEO plugin does not already output an Article graph.
ChangeLog
2.2.9
- Added: Bullet Dots colour setting — independently configures the bullet and ol marker colour, falling back to Accent Colour if not set.
- Added: Bulletin Stripe colour setting — independently configures the Bulletin style border and stripe colour, falling back to Accent Colour if not set.
- Both settings appear in the Colours card on the Appearance tab and update the live preview immediately.
2.2.8
- Added: Bulletin box style (Style 8) — full accent-colour border with diagonal hazard-stripe on right and bottom edges via CSS repeating-linear-gradient.
- Added: Bulletin available in shortcode (style=”bulletin”), Gutenberg block inspector, and admin visual selector (8 columns).
- Added: block-editor.css — list bullet and marker styles now render correctly inside the Gutenberg editor, matching frontend output.
- Added: style attribute in Gutenberg block — per-block style override in the inspector, separate from the global setting.
- Added: style attribute in shortcode — any style can now be set per-instance (e.g. style=”bulletin”), overriding the global setting.
- Changed: allowedBlocks on InnerBlocks restricted to paragraph, list, heading, quote, separator.
2.2.7
- Added: List styles inside box content — ul items use accent-coloured circular bullets, ol items use accent-coloured decimal markers. Nested lists supported. Theme CSS resets no longer affect list rendering.
2.2.6
- Changed: css/ and js/ moved to assets/css/ and assets/js/.
- Changed: inc/ renamed to includes/ (WordPress Core convention).
- Changed: views/ moved to includes/views/ (internal templates belong with internal code).
- Changed: All path references updated throughout the plugin.
- Added: upgrading.md — per-version upgrade notes and feature roadmap.
2.2.5
- Fixed: Preview panel now appears on the Appearance tab only; was incorrectly shown on Schema and Advanced tabs.
2.2.4
- Changed: Colours section — five individual picker cards replaced with one compact card; each picker is a label + swatch row.
- Changed: Typography & Shape — Border Radius and Font Family combined into one compact two-row card.
2.2.3
- Fixed: Live preview was static (server-rendered from saved settings only). Now updates immediately on every change — Box Style, colours, font, border radius, and presets — without saving.
- Fixed: Preview element now uses real .abstract-box CSS classes and CSS custom properties, identical to frontend output.
- Changed: Frontend stylesheet enqueued on admin settings page; font stacks passed to JS via wp_localize_script.
2.2.2
- Changed: Hover effects redesigned — each style now has a character-appropriate effect rather than a generic lift.
- Modern: deeper lift + gradient brightens. Academic: border solidifies to accent + faint tint. Minimal: upward glow from accent line. Card: lift + scale + deep shadow. Ruled: nudge right + left bar grows (no layout shift). Editorial: border activates to accent + ring. Summary: background brightens + tinted glow.
- Changed: Base transition expanded to cover border-color, background-color, and filter.
2.2.1
- Added: Editorial style — solid full border, flat white background, no shadow (news pull-quote aesthetic).
- Added: Summary style — soft tinted background, no border, generous rounded corners (AI summary aesthetic).
- Changed: Admin visual selector expanded to all 7 styles with CSS mini-previews in a responsive 7-column grid.
- Fixed: Font family allowlist omitted Humanist, Monospace, and Slab — selecting them silently fell back to Sans-Serif.
2.2.0
- Added: Five box styles — Modern, Academic, Minimal, Card, Ruled.
- Added: Eight colour presets — Default, Dark, Sepia, Ocean, Forest, Rose, Midnight, Sand. Each preset also sets the recommended Box Style.
- Added: CSS mini-preview thumbnails on each box style selector card.
- Changed: Style options renamed Default/Custom → Modern/Academic; all styles consolidated into one CSS file.
2.1.9
- Changed: Getting Started and Box Style Reference moved from Usage tab to Appearance tab.
- Changed: CSS Class Reference moved from Usage tab to Advanced tab.
- Changed: Usage tab now contains only shortcode and block editor reference; copy trimmed throughout.
2.1.8
- Changed: Full admin UI rewrite for design_system v1.0.0 — all CSS scoped to plugin wrapper, 97 CSS custom properties, no :root declarations, no !important.
- Changed: Settings rendered as card-based divs; form-table / do_settings_sections() removed.
- Changed: Booleans now use CSS toggle switches; Box Style uses a visual card selector.
- Fixed: SVG tab icons now sanitised via wp_kses() instead of echoed raw.
- Added: Footer credit with GitHub link on all settings tabs.
2.1.7
- Changed: Admin UI redesigned — gradient header banner, card-based layout, SVG tab icons, gradient Save button, responsive layout. Matches MENJ plugin suite design language.
2.1.6
- Fixed: Gutenberg block rewritten to use InnerBlocks — correct pattern for dynamic blocks. Eliminates “Invalid parameter: attributes” REST API error.
- Fixed: save() now returns InnerBlocks.Content; content attribute removed from schema.
2.1.5
- Fixed: “Invalid parameter: attributes” block error — full attribute schema declared in register_block_type(). ServerSideRender no longer receives the content attribute.
2.1.4
- Changed: Font Family selector expanded from 3 to 6 options — Sans-Serif, Serif, Humanist Sans, Monospace, Slab Serif, System Default.
2.1.3
- Added: Usage tab with shortcode reference, block editor guide, copyable examples, style comparison, and CSS class reference.
- Security: JSON-LD output hardened against script-tag injection. Shortcode content passed through wp_kses_post(). Title tag escaped with tag_escape().
- Performance: Block editor script moved to footer.
2.1.2
- Changed: Line endings normalised to LF. get_defaults() memoized. resolve_style() helper extracted. render_preview() redundant re-validation removed.
- Fixed: Gutenberg block now exposes all 8 shortcode attributes (title_tag, bg_color_end, title_color, accent_color were previously silently ignored).
2.1.1
- Fixed: PHP 8 TypeError in Shortcode::render() — $content default changed from null to empty string.
- Fixed: Tab navigation nonce removed; $_GET[‘tab’] validated against known slugs only.
- Fixed: enqueue_frontend() moved to wp_enqueue_scripts hook (was called after wp_head had fired).
- Fixed: Plugin URI and Author URI updated to public GitHub URLs (WordPress.org requirement).
- Fixed: Inline CSS validate-not-escape pattern; JSON-LD unescaped flags removed; double-encoding in render_preview() fixed.
2.1.0
- Added: Conditional asset loading — frontend CSS only loads on pages using the shortcode.
- Added: MVC directory structure (views/, inc/frontend/, inc/admin/).
- Added: WCAG contrast checker in admin settings. Per-instance colour overrides via shortcode attributes. Settings link in plugins table. Native Gutenberg block with SSR. Four colour presets.
- Changed: Full OOP rewrite with Menj\AbstractBox namespace. Configurable title_tag. BEM class naming. Settings migrated from theme_mod to get_option().
2.0.4
- Fixed: Nonce verification added to admin tab navigation (Plugin Check compliance).
2.0.3
- Fixed: phpcs:ignore annotation and wp_unslash() added to $_GET[‘tab’] read.
2.0.2
- Removed: Manual load_plugin_textdomain() call (deprecated since WP 4.6).
2.0.1
- Fixed: All dynamic output in admin preview properly escaped.
2.0.0
- Complete plugin restructure with OOP architecture, asset separation (css/, js/, inc/), tabbed settings page, five colour pickers with CSS custom properties, font family selector, border radius, schema type, hover toggle, Customizer live preview, and uninstall cleanup.
1.1
- Added: Schema.org JSON-LD output. Customizer style selector. apply_filters hooks.
1.0
