Introducing Block Patterns

import { useState } from “react”; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, ResponsiveContainer } from “recharts”; const NI_RATE = 0.15; const NI_THRESHOLD_WEEK = 5000 / 52; // £5,000/yr secondary threshold, per employee (weekly) const VAT_RATE = 0.20; const n = (v) => parseFloat(v) || 0; const money = (v) => (v < 0 ? "−" : "") + "£" + Math.abs(Math.round(v)).toLocaleString("en-GB"); const money2 = (v) => (v < 0 ? "−" : "") + "£" + Math.abs(v).toLocaleString("en-GB", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); function Field({ label, value, onChange, step = "1", w }) { return ( ); } function PLRow({ label, value, muted, tag }) { return ( ); } export default function DarkKitchenPL() { const [sales, setSales] = useState(“15.00”); const [comm, setComm] = useState(30); const [foodCost, setFoodCost] = useState(“3.20”); const [packCost, setPackCost] = useState(“0.60”); const [drinkCost, setDrinkCost] = useState(“0.70”); const [unitsDay, setUnitsDay] = useState(“40”); const [days, setDays] = useState(“7”); const [rent, setRent] = useState(“2000”); const [insurance, setInsurance] = useState(“150”); const [otherFixed, setOtherFixed] = useState(“100”); const [gas, setGas] = useState(“200”); const [elec, setElec] = useState(“400”); const [water, setWater] = useState(“80”); const [holidayPct, setHolidayPct] = useState(“12.07”); const [pensionPct, setPensionPct] = useState(“3”); const [employees, setEmployees] = useState([ { rate: “13.50”, hours: “40” }, { rate: “12.50”, hours: “40” }, { rate: “12.50”, hours: “25” }, ]); const addStaff = () => setEmployees([…employees, { rate: “12.50”, hours: “40” }]); const removeStaff = () => setEmployees(employees.slice(0, -1)); const updateEmp = (i, field, val) => { const next = employees.map((e, idx) => (idx === i ? { …e, [field]: val } : e)); setEmployees(next); }; // —- calculations (weekly) —- const daysPerWeek = n(days); const units = n(unitsDay) * daysPerWeek; // orders per week const salesTotal = units * n(sales); const commission = salesTotal * (n(comm) / 100); const cosFood = units * n(foodCost); const cosPack = units * n(packCost); const cosDrink = units * n(drinkCost); const cos = cosFood + cosPack + cosDrink; const grossProfit = salesTotal – commission – cos; // overheads entered as monthly bills -> weekly share (× 12 ÷ 52) const M2W = 12 / 52; const fixed = (n(rent) + n(insurance) + n(otherFixed)) * M2W; const variable = (n(gas) + n(elec) + n(water)) * M2W; const weeklyWages = employees.reduce((sum, e) => sum + n(e.rate) * n(e.hours), 0); const wages = weeklyWages; // weekly const monthlyWagesEquiv = (weeklyWages * 52) / 12; const staffCount = employees.length; const holiday = (n(holidayPct) / 100) * wages; const payrollBase = wages + holiday; const employerNI = NI_RATE * Math.max(0, payrollBase – staffCount * NI_THRESHOLD_WEEK); const pension = (n(pensionPct) / 100) * payrollBase; const staffCost = wages + holiday + employerNI + pension; const netProfit = grossProfit – fixed – variable – staffCost; const perDay = daysPerWeek > 0 ? netProfit / daysPerWeek : 0; const outputVat = salesTotal – salesTotal / (1 + VAT_RATE); const inputVatComm = commission * VAT_RATE; const inputVatPack = cosPack – cosPack / (1 + VAT_RATE); // VAT inside packaging cost const inputVatDrink = cosDrink – cosDrink / (1 + VAT_RATE); // VAT inside drinks cost const inputVat = inputVatComm + inputVatPack + inputVatDrink; const vatOwed = outputVat – inputVat; // —- break-even (annual) —- const vPerOrder = n(sales) * (n(comm) / 100) + n(foodCost) + n(packCost) + n(drinkCost); // variable cost / order const contribution = n(sales) – vPerOrder; // gross profit per order const weeklyFixed = fixed + variable + staffCost; // costs that don’t move with volume const annualFixed = weeklyFixed * 52; const beOrdersYear = contribution > 0 ? annualFixed / contribution : Infinity; const beOrdersDay = contribution > 0 && daysPerWeek > 0 ? beOrdersYear / (daysPerWeek * 52) : Infinity; const xMax = Math.max(isFinite(beOrdersDay) ? beOrdersDay * 1.6 : 0, n(unitsDay) * 1.6, 10); const chartData = []; const STEPS = 24; for (let i = 0; i <= STEPS; i++) { const od = (xMax / STEPS) * i; const oy = od * daysPerWeek * 52; chartData.push({ orders: Math.round(od * 10) / 10, Revenue: Math.round(n(sales) * oy), Cost: Math.round(annualFixed + vPerOrder * oy), }); } const kFmt = (v) => “£” + Math.round(v / 1000) + “k”; const pct = (part) => (salesTotal > 0 ? “(” + ((part / salesTotal) * 100).toFixed(0) + “%)” : “”); const npClass = netProfit < 0 ? "text-red-600" : "text-green-700"; return ( ); }

Moreover, the WordPress community and theme developers are actively contributing to a growing library of block patterns, making it easier for users to find a pattern that suits their needs. Whether you`re building a landing page, a photo gallery, or a complex layout, there`s likely a block pattern ready to use.

This democratizes design for non-technical users while offering developers a way to extend WordPress functionality and provide more options to their clients.