I direct AI agents to ship your WordPress, Shopify and SaaS builds — faster.

1import { useBlockProps, RichText } from '@wordpress/block-editor';2 3export default function Edit({ attributes, setAttributes }) {4  const { plan, price, features } = attributes;5  const blockProps = useBlockProps({ className: 'pricing-card' });6 7  return (8    <div {...blockProps}>9      <RichText tagName="h3" value={plan}10        onChange={(plan) => setAttributes({ plan })} />11      <p className="price">12        <RichText tagName="span" value={price}13          onChange={(price) => setAttributes({ price })} />/mo14      </p>15      <RichText tagName="ul" multiline="li" value={features}16        onChange={(features) => setAttributes({ features })} />17    </div>18  );19}

1{%- assign product = section.settings.product -%}2<section class="featured-product">3  <img src="{{ product.featured_image | image_url: width: 640 }}"4       alt="{{ product.featured_image.alt | escape }}" loading="lazy">5  <div class="info">6    <p class="tag">{{ section.settings.eyebrow }}</p>7    <h2>{{ product.title }}</h2>8    <p class="price">{{ product.price | money }}</p>9    {%- form 'product', product -%}10      <button type="submit">Add to cart</button>11    {%- endform -%}12  </div>13</section>14 15{% schema %}16{ "name": "Featured product",17  "settings": [18    { "type": "product", "id": "product", "label": "Product" },19    { "type": "text", "id": "eyebrow", "default": "New drop" } ] }20{% endschema %}

1import { Card, Sparkline } from '@/components/ui';2import { formatCurrency, percentChange } from '@/lib/format';3 4export function MrrCard({ series }: { series: number[] }) {5  const current = series.at(-1) ?? 0;6  const change = percentChange(series.at(-2) ?? 0, current);7 8  return (9    <Card title="Monthly recurring revenue">10      <p className="text-3xl font-semibold tabular-nums">11        {formatCurrency(current)}12      </p>13      <p className={change >= 0 ? 'text-up' : 'text-down'}>14        {change >= 0 ? '▲' : '▼'} {Math.abs(change)}% vs last month15      </p>16      <Sparkline data={series} label="MRR, last 12 months" />17    </Card>18  );19}