You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://github.com/lubusIN/blablablocks-formats/wiki) [](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/lubusIN/blablablocks-formats/playground/_playground/blueprint-github.json) [](https://wordpress.org/plugins/blablablocks-formats/)
6
6
7
7
## Overview
8
8
@@ -16,28 +16,28 @@ A collection of rich text formats for the WordPress block editor with interactiv
16
16
17
17
## Installation
18
18
19
-
1. Download the latest release from GitHub
20
-
2. Visit `Plugins > Add New`
21
-
3. Upload the `blablablocks-formats.zip` file
22
-
4. Activate `BlaBlaBlocks Formats` from plugins page
19
+
### Automatic
23
20
24
-
## Usage
21
+
1. Go to Plugins → Add New in your WordPress dashboard.
22
+
2. Search for BlaBlaBlocks Formats.
23
+
3. Click Install Now and then Activate.
25
24
26
-
### InfoTip Format
25
+
### Manual
27
26
28
-
<!-- TODO - add recording -->
27
+
1.[Download](https://github.com/lubusIN/blablablocks-formats/releases) latest release from GitHub
28
+
2. Visit `Plugins > Add New`
29
+
3. Upload the `blablablocks-formats.zip` file
30
+
4. Activate `BlaBlaBlocks Formats` from the plugins page
29
31
30
-
1. Select any text in the block editor
31
-
2. Click the InfoTip button in the formatting toolbar
32
-
3. Configure your tooltip with custom text, colors, and overlay placement
32
+
## Usage
33
33
34
-
### Marker Format
34
+
### Available Formats
35
35
36
-
<!-- TODO - add recording -->
36
+
-**Marker**: Add a hand-drawn style highlight to text.
37
+
-**InfoTip**: Add a tooltip to any inline text.
37
38
38
-
1. Select text you want to highlight
39
-
2. Click the Marker button in the formatting toolbar
40
-
3. Choose your preferred highlighting style and animation
39
+
> [!NOTE]
40
+
> Refer to the [documentation](https://github.com/lubusIN/blablablocks-formats/wiki) for detailed guidance on using formats.
41
41
42
42
## Development
43
43
@@ -77,6 +77,9 @@ npm run start # Watch for changes and auto-compile
77
77
npm run serve
78
78
```
79
79
80
+
> [!NOTE]
81
+
> Refer to `package.json` for additional available npm commands.
82
+
80
83
## Meet Your Artisans
81
84
82
85
[LUBUS](http://lubus.in) is a web design agency based in Mumbai.
@@ -88,9 +91,8 @@ npm run serve
88
91
## Credits
89
92
90
93
-[Infotip](https://thenounproject.com/icon/tooltip-383461/) icon by [Icon Island](https://thenounproject.com/iconisland) from [Noun Project](https://thenounproject.com/browse/icons/term/tooltip/) (CC BY 3.0)
91
-
92
94
-[Marker](https://thenounproject.com/icon/highlighter-7628276/) icon by [Muhammad Nur Auliady Pamungkas](https://thenounproject.com/mnauliady) from [Noun Project](https://thenounproject.com/browse/icons/term/highlighter/) (CC BY 3.0)
93
95
94
96
## License
95
97
96
-
BlaBlaBlocks Formats is open-sourced plugin licensed under the [MIT license](LICENSE)
98
+
BlaBlaBlocks Formats is an open-sourced plugin licensed under the [MIT license](LICENSE)
<p>BlablaBlocks formats bring a collection of rich text tools to the WordPress block editor—starting with interactive elements like InfoTip tooltips and Marker highlights. And there's more to come!</p>
51
+
<p><strong><tatva-infotip content="A set of custom formats that add interactivity and visual emphasis to your content." overlay-placement="left-start" overlay-background-color="#503AA8" overlay-text-color="#FFEE58" icon-enabled="true" icon-type="info" class="has-infotip-format">BlaBlaBlocks formats</tatva-infotip></strong> bring a collection of rich text tools to the WordPress block editor—starting with interactive elements like <strong><tatva-marker type="double" class="has-marker-format">InfoTip</tatva-marker></strong> tooltips and <strong><tatva-marker type="double" class="has-marker-format">Marker</tatva-marker></strong> highlights. And there's more to come!</p>
52
+
<!-- /wp:paragraph -->
53
+
54
+
<!-- wp:paragraph -->
55
+
<p>With <strong><tatva-marker type="circle" class="has-marker-format">Circle</tatva-marker></strong>, you can wrap important words and make them pop.</p>
56
+
<!-- /wp:paragraph -->
57
+
58
+
<!-- wp:paragraph -->
59
+
<p><strong><tatva-marker type="double-underline" class="has-marker-format">Double Underline</tatva-marker></strong> is perfect for drawing extra focus on key phrases.</p>
60
+
<!-- /wp:paragraph -->
61
+
62
+
<!-- wp:paragraph -->
63
+
<p><strong><tatva-marker type="underline-zigzag" color="#2000ff" animation-function="steps(5, end)" class="has-marker-format">Zigzag</tatva-marker></strong> gives a creative and fun underline style for special points.</p>
64
+
<!-- /wp:paragraph -->
65
+
66
+
<!-- wp:paragraph -->
67
+
<p>Want to show edits? Use <strong><tatva-marker type="strikethrough" animation="false" class="has-marker-format">Strikethrough</tatva-marker></strong> or <strong><tatva-marker type="cross" animation="false" class="has-marker-format">Cross</tatva-marker></strong> to mark changes.</p>
68
+
<!-- /wp:paragraph -->
69
+
70
+
<!-- wp:paragraph -->
71
+
<p>Add some personality with <strong><tatva-marker type="curly" animation-function="ease" animation-duration="5" class="has-marker-format">Curly Underline</tatva-marker></strong> for a stylish touch.</p>
72
+
<!-- /wp:paragraph -->
73
+
74
+
<!-- wp:paragraph -->
75
+
<p>These tools make blogs, tutorials, and product pages look sharp and easy to follow.</p>
0 commit comments