Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 48 additions & 54 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,100 +3,94 @@
<!-- TODO add playground demo link -->

## Overview
A collection of rich text formats for WordPress that enhance the block editor with interactive elements, starting with InfoTip tooltips and Marker highlights. More in the future!
A collection of rich text formats for the WordPress block editor with interactive elements. Starting with InfoTip tooltips and Marker highlights. More to come in the future!

## Features

### 🎯 Marker Format
- **Text Highlighting**: Emphasize important content with customizable markers
- **Visual Styling**: Multiple marker animations, styles and colors.
- **Easy Integration**: Simple toolbar button integration in the block editor

### 🔍 InfoTip Format
- **Interactive Tooltips**: Add contextual information that appears on hover or click
- **Customizable Appearance**: Control background color, text color, and placement
- **Flexible Positioning**: 12 placement options (top, bottom, left, right with start/end variants)
- **Smart Placement**: Automatic fallback positioning to ensure tooltips stay visible
- **Responsive Design**: Works seamlessly across desktop and mobile devices
## Requirements
- WordPress 6.6+
- Modern browser with JavaScript enabled
- Floating UI library (included)


## Installation

1. Download the latest release zip file from GitHub <!--TODO - GH link to be added for release -->
2. Upload to your WordPress `/wp-content/plugins/` directory
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Start using the new formats in your block editor
1. Download the latest release from GitHub <!--TODO - GH link to be added for release -->
2. Browse to `WP Admin > Plugins > Add New`
3. Upload the `blablablocks-formats.zip` file
4. Activate `BlaBlaBlocks Formats` from the plugins page

## Usage

### InfoTip Format

<!-- TODO - add recording -->

1. Select any text in the block editor
2. Click the InfoTip button in the formatting toolbar
3. Configure your tooltip with custom text, colors, and overlay placement


### Marker Format

<!-- TODO - add recording -->

1. Select text you want to highlight
2. Click the Marker button in the formatting toolbar
3. Choose your preferred highlighting style and animation

## Technical Details

### Requirements
- WordPress 5.0+
- Modern browser with JavaScript enabled
- Floating UI library (included)
## Development

### Technologies Used
- **WordPress Block Editor API**: Native integration with Gutenberg via the [Rich Text API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-rich-text/).
- **Floating UI**: Advanced positioning system for tooltips
- **Web Components**: Custom elements for frontend rendering
- **React**: Editor interface components
- **SCSS**: Modular styling system
### 1. Clone the repository
Clone the repository to your local system:

```bash
git clone git@github.com:lubusIN/blablablocks-formats.git
```

## Development
### 2. Go to the plugin folder

### Building the Plugin
```bash
cd blablablocks-formats
```

### 3. Install dependencies

```bash
# Install dependencies
npm install
```

# Build
npm run build
### 4. Build plugin
Build or start the development environment:

```bash
npm run build # Compile the source files
# OR
npm run start # Watch for changes and auto-compile
```
### 5. Launch Playground

# Watch for changes
npm run start
```bash
npm run serve
```

## Contributing
## Meet Your Artisans

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
[LUBUS](http://lubus.in) is a web design agency based in Mumbai.

## Changelog
<a href="https://cal.com/lubus">
<img src="https://raw.githubusercontent.com/lubusIN/.github/refs/heads/main/profile/banner.png" />
</a>

### 1.0.0
- Initial release
- InfoTip format with advanced positioning
- Marker format for text highlighting
- Web Components for frontend rendering
- Comprehensive editor integration
## Credits
<!-- TODO check if this works after repo is made public -->
<a href="https://github.com/lubusIN/blablablocks-formats/graphs/contributors">
<img height="36px" src="https://contrib.rocks/image?repo=lubusIN/blablablocks-formats"/>
</a>

## Support
* [Marker](https://thenounproject.com/icon/marker-7644139/) icon by [Amir Ali](https://thenounproject.com/amirali) from [Noun Project](https://thenounproject.com/browse/icons/term/marker/) (CC BY 3.0)

For support, feature requests, or bug reports, please open an issue on the project repository.

## License

This project is licensed under the MIT license.

## Credits

* [Marker](https://thenounproject.com/icon/marker-7644139/) icon by [Amir Ali](https://thenounproject.com/amirali) from [Noun Project](https://thenounproject.com/browse/icons/term/marker/) (CC BY 3.0)
70 changes: 29 additions & 41 deletions readme.txt
Original file line number Diff line number Diff line change
@@ -1,52 +1,40 @@
=== Blablablocks Formats ===
Contributors: Lubus
Tags: format
Tested up to: 6.7
Stable tag: 0.1.0
Contributors: lubus, ajitbohra, punitv342, nagpai
Tags: format, rich text format, BlaBlaBlocks
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Stable tag: 1.0
License: MIT
License URI: https://www.gnu.org/licenses/MIT

== Description ==

This is the long description. No limit, and you can use Markdown (as well as in the following sections).

For backwards compatibility, if this section is missing, the full length of the short description will be used, and
Markdown parsed.

== Installation ==

This section describes how to install the plugin and get it working.

e.g.

1. Upload the plugin files to the `/wp-content/plugins/blablablocks-formats` directory, or install the plugin through the WordPress plugins screen directly.
1. Activate the plugin through the 'Plugins' screen in WordPress

Interactive rich text formats for the WordPress block editor.

== Frequently Asked Questions ==

= A question that someone might have =

An answer to that question.

= What about foo bar? =
== Description ==
A collection of rich text formats for the WordPress block editor with interactive elements. Starting with InfoTip tooltips and Marker highlights. More to come in the future!

Answer to foo bar dilemma.
=== What makes BlaBlaBlocks Formats special? ===
* **Simple usage** - Add interactive tooltips and animated highlights with the ease of adding any simple text format.
* **More control** - A variety of customization possible in behavior, colors and animation for each format
* **Editor Compatibility** – fully integrated with the Block Editor’s UI and server-side rendering pipeline.

== Screenshots ==
( TODO add screenshots )

1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
(or jpg, jpeg, gif).
2. This is the second screen shot
1. **Marker settings** - Select and adjust Marker type and settings.
2. **InfoTip settings** - Add InfoTip text and adjust settings.
3. **Frontend view of Marker**
4. **Frontend view of InfoTip**

== Changelog ==

= 0.1.0 =
* Release
== Installation ==
1. Download the latest release from GitHub ( TODO - add link to latest release )
2. Browse to `WP Admin > Plugins > Add New`
3. Upload the `blablablocks-formats.zip` file
4. Activate `BlaBlaBlocks Formats` from the plugins page

== Arbitrary section ==
== Changelog ==

You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
= 1.0.0 =
* Initial release 🎉
* InfoTip format - Add customizable tooltips to any text in the editor.
* Marker format - Add customizable animated or static text highlights.