diff --git a/README.md b/README.md index 10b58ff..1d085f1 100644 --- a/README.md +++ b/README.md @@ -3,34 +3,27 @@ ## 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 -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 +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 + + 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 @@ -38,65 +31,66 @@ A collection of rich text formats for WordPress that enhance the block editor wi ### Marker Format + + 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 + + + -### 1.0.0 -- Initial release -- InfoTip format with advanced positioning -- Marker format for text highlighting -- Web Components for frontend rendering -- Comprehensive editor integration +## Credits + + + + -## 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) diff --git a/readme.txt b/readme.txt index 17f9e88..1d8b826 100644 --- a/readme.txt +++ b/readme.txt @@ -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.