=== HTML5 Semantic Elements ===
Contributors: niw2cp
Tags: html5, article, aside, block, semantic 
Requires at least: 5.8
Tested up to: 6.8
Stable tag: 1.0.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Adds HTML5 `<article>` and `<aside>` semantic elements as blocks in the Gutenberg editor.

== Description ==

The **HTML5 Semantic Elements** plugin introduces two custom Gutenberg blocks — *Article* and *Aside* — that allow you to structure your WordPress content with proper semantic HTML5 elements.

Use the **Article block** for self-contained content such as blog posts or news items, and the **Aside block** for related or supplementary information such as sidebars, pull quotes, or callouts.

These semantic elements improve both **SEO** and **accessibility** by clearly defining the roles of different content sections.

== Installation ==

1. Upload the `html5-semantic-elements` folder to `/wp-content/plugins/`
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Start using the **Article** and **Aside** blocks in your posts and pages

== How to Use ==

=== Adding Blocks ===
1. Edit any post or page in the block editor
2. Click the “+” button to add a new block
3. Search for “Article” or “Aside”
4. Click the desired block to insert it into your content

=== Article Block ===
The Article block creates an HTML5 `<article>` element, ideal for:
- Blog posts
- News articles
- Forum posts
- Comments
- Independent, self-contained content

**Features**
- Nest any blocks inside (headings, paragraphs, images, etc.)
- Wide and Full alignment support
- Custom CSS classes
- Anchor ID support
- “Remove Article” button to unwrap the block while keeping its inner content

**Removing the Article wrapper**
- **Toolbar**: Select the Article block → click the “Remove Article” (X) button
- **Menu**: Use the three-dot menu → “Ungroup”

=== Aside Block ===
The Aside block creates an HTML5 `<aside>` element, perfect for:
- Sidebars
- Pull quotes
- Related content
- Callout boxes
- Supplementary information

**Features**
- Add any blocks inside
- Left, Right, Wide, and Full alignment options
- Default styling with background color and left border
- Custom CSS classes
- Anchor ID support
- Transform paragraphs, headings, lists, or quotes into Asides
- “Remove Aside” button to unwrap the content

**Transforming existing blocks**
1. Select an existing block (paragraph, heading, list, quote, pullquote, or group)
2. Click the block icon or three-dot menu
3. Choose “Transform to” → “Aside”

**Removing the Aside wrapper**
- **Toolbar**: Select the Aside block → click the “Remove Aside” (X) button
- **Transform**: Convert to “Group”
- **Menu**: Use the three-dot menu → “Ungroup”

== Styling ==

Both blocks include basic styling. To customize:

1. Add a custom CSS class in the **Advanced** panel of the block settings.
2. Add your own CSS under **Appearance → Customize → Additional CSS**.

Example CSS:

```css
/* Custom Article styling */
.wp-block-html5-semantic-article {
    padding: 2em;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Custom Aside styling */
.wp-block-html5-semantic-aside {
    background-color: #fffbea;
    border-left: 4px solid #f59e0b;
    padding: 2em;
}
== Block Settings ==

Block Tab: Alignment options

Advanced Tab: Add custom CSS classes, anchor IDs

== Tips ==

Nest Blocks: Combine headings, text, and media inside semantic containers

SEO Benefits: Helps search engines interpret your content hierarchy

Accessibility: Improves screen reader navigation and content structure

== Frequently Asked Questions ==

= Will this plugin work with classic editor? =
No. It only works with the block editor (Gutenberg).

= Can I use it with page builders? =
It’s designed for the WordPress block editor, not for third-party builders.

== Changelog ==

= 1.0.2 =

Initial release — adds Article and Aside semantic HTML5 blocks.

== License ==

This plugin is licensed under the GPL v2 or later.