Feat(formats): Add gradient text

package.json

@@ -17,12 +17,15 @@
 	},
 	"prettier": "@wordpress/prettier-config",
 	"devDependencies": {
+		"@wordpress/eslint-plugin": "^17.8.0",
 		"@wordpress/icons": "^10.22.0",
 		"@wordpress/prettier-config": "^4.22.0",
 		"@wordpress/scripts": "^30.15.0",
-		"@wordpress/eslint-plugin": "^17.8.0",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^15.1.0"
 	}
 }

src/gradient-text/edit.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InlineUI from './inline-ui';
+import GradientTextIcon from './icon';
+
+/**
+ * Edit component for the Infotip format.
+ *
+ * @param {Object}   props                  - The component properties.
+ * @param {Object}   props.value            - The current value of the rich text.
+ * @param {Function} props.onChange         - Function to update the rich text value.
+ * @param {Function} props.onFocus          - Function to handle focus events.
+ * @param {boolean}  props.isActive         - Indicates if the format is currently active.
+ * @param {Object}   props.contentRef       - Reference to the editable content element.
+ * @param {Object}   props.activeAttributes - The currently active attributes.
+ * @return {JSX.Element} - The rendered gradient text button.
+ */
+export function Edit({
+    value,
+    onChange,
+    onFocus,
+    isActive,
+    contentRef,
+    activeAttributes,
+}) {
+    const [isSettingOpen, setIsSettingOpen] = useState(false);
+
+    return (
+        <>
+            <RichTextToolbarButton
+                icon={<GradientTextIcon />}
+                title={__('Gradient Text', 'blablablocks-formats')}
+                onClick={() => setIsSettingOpen(true)}
+                isActive={isActive}
+            />
+            {isSettingOpen && (
+                <InlineUI
+                    activeAttributes={activeAttributes}
+                    onClose={() => setIsSettingOpen(false)}
+                    contentRef={contentRef.current}
+                    isActive={isActive}
+                    value={value}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                />
+            )}
+        </>
+    );
+}

src/gradient-text/editor.scss

@@ -0,0 +1,17 @@
+.block-editor-format-toolbar__blablablocks-gradient-text-popover .components-popover__content {
+    padding: 16px;
+    width: 260px;
+}
+
+.block-editor-format-toolbar__blablablocks-gradient-text-popover .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
+    padding: 0px;
+}
+
+.block-editor-format-toolbar__blablablocks-gradient-text-popover {
+
+    .reset-button {
+        margin-top: 1rem;
+        display: block;
+        margin-left: auto;
+    }
+}

src/gradient-text/icon.js

@@ -0,0 +1,24 @@
+/**
+ * GradientText component renders an SVG icon that represents a gradient text.
+ *
+ * @return {JSX.Element} SVG component for a gradient text icon.
+ */
+function GradientTextIcon() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlSpace="preserve"
+            style={{
+                enableBackground: "new 0 0 32 32",
+            }}
+            width={"24px"}
+            height={"24px"}
+            viewBox="0 -4 32 40"
+        >
+            <path d="M26 3H6C4.3 3 3 4.3 3 6v20c0 1.7 1.3 3 3 3h20c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zm0 24h-1v-2h-3v2h-3v-2h-3v2h-3v-2h-3v2H7v-2H5v-3h2v-3H5V6c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v10h-2v3h2v3h-2v3h2v1c0 .6-.4 1-1 1z" />
+            <path d="M7 22h3v3H7zM13 22h3v3h-3zM19 22h3v3h-3zM10 19h3v3h-3zM16 19h3v3h-3zM22 19h3v3h-3zM7 16h3v3H7zM13 16h3v3h-3zM19 16h3v3h-3z" />
+        </svg>
+    );
+}
+
+export default GradientTextIcon;

src/gradient-text/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerFormatType } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+import { Edit } from './edit';
+
+/**
+ * Registers the Gradient Text format type.
+ */
+registerFormatType('blablablocks/gradient-text', {
+    title: __('Gradient Text', 'blablablocks-formats'),
+    tagName: 'gradient-text',
+    className: 'has-gradient-text',
+    edit: Edit,
+    attributes: {
+        style: 'style',
+    },
+});

src/gradient-text/inline-ui.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { removeFormat, useAnchor } from '@wordpress/rich-text';
+import {
+    __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
+} from '@wordpress/block-editor';
+import { Button, Popover, GradientPicker } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { createFormatHelpers } from '../utils';
+
+/**
+ * InlineUI component for handling Gradient text formatting options.
+ *
+ * @param {Object}   props                  - The component properties.
+ * @param {Object}   props.activeAttributes - The currently active attributes.
+ * @param {Object}   props.value            - The current value of the rich text.
+ * @param {Function} props.onChange         - Function to update the rich text value.
+ * @param {Function} props.onClose          - Function to close the popover.
+ * @param {Object}   props.contentRef       - Reference to the editable content element.
+ * @param {boolean}  props.isActive         - Indicates if the format is currently active.
+ * @return {JSX.Element} - The rendered InlineUI component.
+ */
+function InlineUI({
+    activeAttributes,
+    value,
+    onChange,
+    onClose,
+    contentRef,
+    isActive,
+}) {
+    const name = 'blablablocks/gradient-text'; // Format type name
+    const PREFIX = 'background:';
+
+    // safely extract the raw gradient for the picker
+    const stored = activeAttributes?.style ?? '';
+    const pickerValue = stored.startsWith(PREFIX) ? stored.slice(PREFIX.length) : stored;
+
+    const { update } = createFormatHelpers({
+        value,
+        onChange,
+        formatType: name,
+        activeAttributes,
+    });
+
+    const anchor = useAnchor({
+        editableContentElement: contentRef,
+        settings: { isActive },
+    });
+
+    const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+    return (
+        <Popover
+            anchor={anchor}
+            className="block-editor-format-toolbar__blablablocks-gradient-text-popover"
+            position="middle center"
+            onClose={onClose}
+            offset={30}
+            shift
+            __unstableSlotName="__unstable-block-tools-after"
+        >
+            <GradientPicker
+                value={pickerValue || undefined}
+                gradients={colorGradientSettings.gradients}
+                onChange={(gradient) => {
+                    if (!gradient) {
+                        // remove the style
+                        return update({ style: '' });
+                    }
+                    update({ style: `${PREFIX}${gradient}` });
+                }}
+                clearable={false}
+            />
+            <Button
+                accessibleWhenDisabled
+                className="reset-button"
+                onClick={() => {
+                    onChange(removeFormat(value, name))
+                    onClose();
+                }}
+                variant="tertiary"
+                __next40pxDefaultSize
+            >
+                {__('Clear', 'blablablocks-formats')}
+            </Button>
+        </Popover>
+    );
+}
+
+export default InlineUI;

src/gradient-text/style.scss

@@ -0,0 +1,4 @@
+gradient-text {
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent;
+}

src/index.js

@@ -3,5 +3,6 @@
  */
 import './marker';
 import './infotip';
+import './gradient-text';
 import './font-size';
 import './clear-formats';