A giugno 2026, Automattic ha annunciato che l'accesso MCP di WordPress.com diventa servizio a pagamento per i siti self-hosted che vogliono connettersi al loro agent stack. La notizia ha messo in moto una valanga di traffico verso progetti alternativi: in 6 settimane il repository GitHub homgorn/wp-oss-AI-agent è passato da 1.200 a 14.000 star, Angie (Uncanny Automator) ha rilasciato un connector MCP nativo, e progetti come LangGraph-WordPress e CrewAI-WP Bridge hanno visto la loro prima release production-ready.

In questa guida mettiamo insieme l'intero stack open-source self-hosted che nel 2026 permette a un'agenzia o a un'azienda di orchestrare AI agent su WordPress e WooCommerce senza dipendere da WordPress.com, senza vendor lock-in, e con costi operativi pari a un VPS da 20€/mese. Vediamo i 7 componenti, l'architettura, il codice di setup, i pattern operativi per agenzie e un caso reale di e-commerce B2B che ha migrato da WordPress.com MCP a stack self-hosted in 11 giorni, con saving annuale di 8.700€.

Non è un articolo per chi parte da zero: assumiamo che tu sappia cosa sono MCP e le Abilities API e che tu abbia già esperienza con WP-CLI. Per il quadro complessivo dell'enterprise con AI, leggi anche WordPress AI Bridge layer production-ready, che copre l'aspetto plugin.

I 7 componenti dello stack open-source

Lo stack self-hosted AI agent su WordPress nel 2026 ha sette componenti che si parlano. Non sono tutti obbligatori, ma per un setup production-ready devi averne almeno cinque.

1. WordPress Agent OS (homgorn/wp-oss-AI-agent)

È il sistema operativo di orchestrazione. Espone un gateway unico che parla MCP, OpenAPI, e REST classico. Sostituisce il gateway WordPress.com MCP managed. Il progetto è in PHP 8.2+ nativo, gira come plugin o come container Docker separato, ed è compatibile con tutti i LLM che parlano MCP (Claude, GPT, Gemini, Llama). Il fork attivo è homgorn, ma esistono almeno 4 fork attivi (compreso wp-foundation/wp-agent-os).

2. Angie (Uncanny Automator 6.4)

Uncanny Automator nella versione 6.4 (luglio 2026) include Angie, un agente nativo che gestisce workflow multi-step. Angie sa:

• Parlare con WordPress (post, taxonomies, utenti, media).
• Connettersi a 200+ servizi (Zapier-like, ma locale).
• Eseguire prompt LLM con context grounding (RAG leggero).
• Schedulare azioni ricorrenti con cron WordPress.

La differenza chiave rispetto a MCP puro: Angie mantiene state fra le chiamate, quindi può orchestrare workflow a più step senza che l'LLM debba ricordare tutto.

3. WordPress Abilities API (core 7.0)

Cuore architetturale del pattern agent. Permette di registrare abilities (= tool) che l'agente può chiamare. Il registro è persistente, versionato, e supporta capability check WP permission. Il core WP 7.0 lo include nativamente, e i plugin possono aggiungere le proprie abilities senza conflitti.

4. LangGraph-WordPress bridge

Bridge fra LangGraph (framework Python per agent stateful) e WordPress. Si installa come servizio Python separato, espone endpoint MCP, e permette di scrivere agent complessi in Python (che è più espressivo di PHP per state machine). Bridge bidirezionale: LangGraph può chiamare abilities WordPress, e WordPress può notificare LangGraph di eventi.

5. WP-RAG (Retrieval Augmented Generation)

Layer RAG leggero per dare context all'agente. Quando l'utente chiede "trova articoli che parlano di X e fanne un sommario", l'agente deve poter cercare nei contenuti, estrarre i pezzi rilevanti, e iniettarli nel prompt. WP-RAG fa esattamente questo, con backend vettoriale (Qdrant, Weaviate, pgvector). Open-source, licenza MIT.

6. Ollama / vLLM (LLM runtime locale)

Per il layer inferenza LLM, due opzioni: Ollama (più semplice, single-binary) o vLLM (più performante, richiede GPU). Per la maggior parte degli use case WordPress agent, Ollama è sufficiente. Modelli consigliati: llama-3.3-70b-instruct, qwen-2.5-coder-32b, mistral-large-2.

7. n8n (workflow orchestration)

Per trigger non-LLM (webhook, schedule, eventi WordPress), n8n self-hosted orchestra i workflow. n8n parla MCP dal 2026, quindi può chiamare abilities WordPress e ricevere notifiche. È l'OSS sostituto di Zapier.

Architettura del pattern self-hosted

Il pattern architetturale self-hosted è un layer cake con quattro livelli logici.

Layer 1: WordPress core + plugin agent

A livello WordPress hai il core 7.0 (Abilities API), il plugin Agent OS (homgorn), e Angie come orchestratore di workflow. Questo layer gestisce la registrazione dei tool, l'autenticazione, e la state machine base.

Layer 2: Gateway MCP

Un servizio che espone MCP endpoint pubblico. Può essere lo stesso Agent OS (PHP) o un container Python separato (più performante). Il gateway:

• Autentica la richiesta (token utente, API key).
• Risolve l'agent ID e verifica permessi.
• Instrada la chiamata all'ability corretta.
• Logga azione, response, durata, errori.

Layer 3: LLM + RAG

Il layer inferenza. Ollama o vLLM servono i modelli. WP-RAG indicizza i contenuti WordPress in vettori. L'agent LLM riceve prompt con context retrieval dal RAG.

Layer 4: Storage + observability

• Database: WordPress MySQL classico + Postgres per RAG (se usi pgvector) o Qdrant self-hosted.
• Cache: Redis object cache, edge cache Nginx differenziata AI bot (vedi articolo dedicato).
• Observability: Prometheus + Grafana per metriche, Loki per log, Jaeger per distributed tracing.

Setup completo in 11 giorni: il caso B2B e-commerce

Un'azienda con 3 store WooCommerce B2B (complessivi 14.000 SKU, 28.000 ordini/anno) ha migrato da WordPress.com MCP a stack self-hosted in 11 giorni. La timeline reale:

Giorni 1-2: discovery e procurement

• Identificati i 38 tool agent usati dal sito WordPress.com MCP.
• Mappati 1-a-1 con abilities WordPress Agent OS + Angie.
• 6 tool mancanti, sviluppati internamente in 2 giorni.

Giorni 3-5: setup infrastruttura

• VPS Hetzner AX102 (64 GB RAM, 16 vCPU, 2x1TB NVMe) a 35€/mese + backup 5€/mese.
• Docker Compose con 7 container: WordPress, MySQL, Redis, WordPress Agent OS, Ollama, Qdrant, n8n.
• Nginx reverse proxy con cache AI-aware differenziata.

Giorni 6-8: training modelli e RAG

• Indicizzati 14.000 SKU + 6.000 articoli blog in Qdrant.
• Custom prompt template per il dominio B2B (tono tecnico, focus specifiche, no enfasi vendita).
• Test 200 query reali, 92% soddisfazione, 8% da raffinare.

Giorni 9-10: parallel run

• Stack self-hosted e WordPress.com MCP attivi in parallelo 48 ore.
• A/B testing su 1.200 sessioni reali.
• Zero regression, 4% response time migliore sul self-hosted.

Giorno 11: cutover

• Switch DNS + wp-config: site ora usa self-hosted.
• WordPress.com MCP disattivato, costo -870€/mese.

Costi e saving

Quando il self-hosted non conviene

Da onesti: per un singolo blog o un sito vetrina sotto le 5.000 visite/mese, il self-hosted è overkill. Il break-even è a circa 6 mesi, e serve un DevOps o uno sviluppatore che mantiene il setup. Per sotto quella soglia, resta su WordPress.com MCP o su un piano managed come Pressable, che è nello stesso segmento diAutomattic ma con pricing diverso.

Codice: setup Docker Compose per stack self-hosted

Il setup minimo production-ready in Docker Compose. Puoi adattarlo al tuo caso.

File docker-compose.yml per lo stack self-hosted base.

version: '3.9'

services:
  wordpress:
    image: wordpress:7.0-php8.3
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wp
      WORDPRESS_DB_PASSWORD: changeme
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_CONFIG_EXTRA: |
        define('WP_DEBUG', false);
        define('WP_MEMORY_LIMIT', '512M');
        define('WP_HOME', 'https://example.com');
        define('WP_SITEURL', 'https://example.com');
        define('DISABLE_WP_CRON', true);
    volumes:
      - wp_data:/var/www/html
      - ./wordpress/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    depends_on:
      - db
      - redis

  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: changeme
      MYSQL_ROOT_PASSWORD: rootpw
    volumes:
      - db_data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password

  redis:
    image: redis:7.2-alpine
    restart: always
    volumes:
      - redis_data:/data

  agent-os:
    image: homgorn/wp-agent-os:latest
    restart: always
    ports:
      - 7000:7000
    environment:
      WP_API_URL: http://wordpress/wp-json/wp/v2
      WP_JWT_SECRET: changeme_random_64
      LOG_LEVEL: INFO
      MCP_TRANSPORT: streamable-http
    depends_on:
      - wordpress

  ollama:
    image: ollama/ollama:latest
    restart: always
    ports:
      - 11434:11434
    volumes:
      - ollama_data:/root/.ollama
    deploy:
      resources:
        reservations:
          devices:
            - capabilities: [gpu]

  qdrant:
    image: qdrant/qdrant:latest
    restart: always
    ports:
      - 6333:6333
    volumes:
      - qdrant_data:/qdrant/storage

  n8n:
    image: n8nio/n8n:latest
    restart: always
    ports:
      - 5678:5678
    environment:
      N8N_HOST: n8n.example.com
      WEBHOOK_URL: https://n8n.example.com/
      GENERIC_TIMEZONE: Europe/Rome
    volumes:
      - n8n_data:/home/node/.n8n

volumes:
  wp_data:
  db_data:
  redis_data:
  ollama_data:
  qdrant_data:
  n8n_data:

Setup WordPress Agent OS come plugin

In alternativa al container separato, Agent OS può essere installato come plugin WordPress. Più semplice, meno scalabile.

Installazione plugin tramite WP-CLI.

# installa plugin Agent OS
wp plugin install wp-agent-os --activate --allow-root

# configura abilities base
wp option update wp_agent_os_enabled 1 --allow-root
wp option update wp_agent_os_jwt_secret "$(openssl rand -hex 32)" --allow-root
wp option update wp_agent_os_mcp_transport streamable-http --allow-root

# verifica health
wp agent-os status --allow-root

# lista abilities registrate
wp ability list --allow-root

Configurazione Ollama + WP-RAG

Il setup inferenza LLM + indicizzazione vettoriale richiede un'ora circa. Ecco i passi operativi.

Script bash per setup Ollama + Qdrant + WP-RAG.

#!/bin/bash
# setup-llm-rag.sh
set -e

# 1. Pull modello LLM (richiede ~30min su GPU A100)
ollama pull llama-3.3-70b-instruct
ollama pull qwen-2.5-coder-32b  # per task tecnici

# 2. Avvia Qdrant container (vedi docker-compose)

# 3. Indicizza contenuti WordPress in Qdrant
wp wp-rag index --source=posts --source=products --batch-size=100 --allow-root

# 4. Verifica stato indicizzazione
wp wp-rag status --allow-root

# 5. Test query
wp wp-rag query "articoli su WordPress e AI agent" --top-k=5 --allow-root

Plugin Angie: installazione e primo workflow

Angie è un layer sopra Uncanny Automator. Si installa come plugin aggiuntivo.

Setup Angie con primo workflow di esempio.

# installa Uncanny Automator + Angie
wp plugin install uncanny-automator --activate --allow-root
wp plugin install angie-connector --activate --allow-root

# abilita MCP
wp option update automator_mcp_enabled 1 --allow-root

# assicurati che il connettore sia attivo
wp eval '
if ( class_exists( "Angie\\Connector" ) ) {
    \Angie\Connector::init();
    echo "Angie connector attivato\n";
}
' --allow-root

Dopo l'attivazione, configura il primo workflow dalla UI WordPress: quando un utente pubblica un commento, Angie legge il sentiment via Ollama e tagga il commento come positive/neutral/negative in modo automatico.

Pattern operativi per agenzie

Per le agenzie WordPress che vogliono offrire stack AI-agent self-hosted ai clienti, tre pattern operativi si sono affermati.

Pattern 1: managed self-hosted per cliente singolo

Un VPS per cliente, stack completo. Costo: 35-80€/mese per cliente, fatturato al cliente a 250-450€/mese. Margine: 60-70%. Tempo di setup iniziale: 1-2 giorni. Manutenzione mensile: 2-4 ore. Ideale per clienti con 3+ store WooCommerce o con necessità di compliance (no dati su cloud non-EU).

Pattern 2: shared stack multi-tenant

Un cluster Kubernetes self-hosted (K3s su bare metal) con 1 WordPress per cliente ma Agent OS + Ollama + Qdrant condivisi. Costo per cliente: 15-30€/mese. Complessità setup: 3-5 giorni. Manutenzione: 8-12 ore/mese. Ideale per agenzie con 10+ clienti che vogliono centralizzare. Richiede DevOps senior.

Pattern 3: ibrido self-hosted + managed

Stack agent self-hosted (Agent OS, RAG) ma LLM inference su Anthropic API o OpenAI API. Costo: 30-100€/mese per LLM (dipende da volume). Vantaggio: qualità LLM top-tier, no GPU da gestire. Svantaggio: dati escono dall'azienda. Per clienti enterprise con compliance leggero.

Le 4 trappole più grandi

Trappola 1: pensare che Ollama sia production-ready

Ollama è ottimo per sviluppo e per carichi bassi. In produzione con centinaia di richieste/giorno, ha memory leak noti su llama 70b. Per produzione, usa vLLM o un servizio cloud (Anthropic, OpenAI). Ollama va bene per dev/test.

Trappola 2: non backuppare il vettoriale

Il database vettoriale (Qdrant, pgvector) contiene il "knowledge" del tuo agente. Se lo perdi, l'agente riparte da zero. Backuppare quotidianamente Qdrant su S3 o Hetzner Storage Box. Costo: 2-5€/mese. Costo di non averlo: settimane di reindicizzazione.

Trappola 3: ignorare la sicurezza del gateway MCP

Il gateway MCP è esposto pubblicamente. Se non lo metti dietro autenticazione forte (token firmato, rate limit per IP, mTLS per servizi interni), diventa un vettore di attacco. Il caso B2B sopra ha subito 3 tentativi di prompt injection nei primi 30 giorni. Tutti respinti da un middleware di validazione. Mai aprire MCP senza autenticazione.

Trappola 4: non avere un fallback umano

Il 5-10% delle richieste agent fallisce (modello sbaglia, context troppo lungo, abilità mancante). Devi avere un fallback umano automatico: se l'agent score < 0.7 di confidenza, trasferisci la richiesta a un operatore umano con notifica email. Risultato: recuperi 70% della UX.

Le 5 metriche operative da monitorare

1. Agent success rate (target >85%)

% di richieste che l'agent risolve senza fallback umano. Misurato via Angie analytics o plugin custom Agent OS stats.

2. Response time P95 (target <3s)

Tempo medio del 95° percentile per la risposta. Dipende dal modello LLM: llama 70b self-hosted >2s, Claude API <1s.

3. Cost per request (target <0,05€)

Costo medio per singola richiesta agent. Include inferenza LLM + retrieval RAG + storage. Da ottimizzare se sopra 0,10€.

4. RAG retrieval precision (target >0.8)

Su 100 query di test, quante sono risposte correttamente con il primo chunk retrieved. Se sotto 0.7, migliora chunking o embeddings.

5. Agent uptime (target >99.5%)

Tempo in cui l'agent è disponibile. Dipende da Ollama uptime, Qdrant uptime, WordPress uptime. Monitoring con Prometheus + Alertmanager.

FAQ su stack AI agent WordPress self-hosted

Quali sono i vantaggi reali del self-hosted rispetto a WordPress.com MCP managed?

I vantaggi sono tre: (1) controllo totale dei dati (no dati su cloud non-EU, compliance GDPR semplificata), (2) no lock-in (se domani Automattic alza il prezzo 5x, cambi stack in 2 settimane), (3) modelli custom (puoi fine-tunare su dati tuoi, cosa che con Claude API non puoi). Svantaggi: richiede DevOps, costo setup iniziale più alto.

Ollama o vLLM per uso produzione?

Ollama per dev/test, vLLM per produzione. vLLM ha throughput 10-20x superiore e memory management migliore. Richiede GPU NVIDIA con 24+ GB VRAM (es. RTX 4090, A5000). Su CPU-only Ollama è la sola opzione realistica.

Quanto costa realisticamente il setup self-hosted?

Setup minimo: 35-50€/mese VPS + 0€ per Ollama se CPU-only. Setup medio (GPU on-demand): 150-300€/mese. Setup enterprise (cluster K8s self-hosted): 800-1500€/mese. Comparato con WordPress.com MCP a 870€/mese per 3 store, il break-even dello stack self-hosted è 6-12 mesi.

Posso usare il mio provider hosting attuale (es. SiteGround, Kinsta)?

Parzialmente. Kinsta e SiteGround non permettono di installare Ollama o container Docker custom sui loro piani managed. Le uniche opzioni sono: (1) hosting con root (Hetzner, OVH, DigitalOcean), (2) servizio agent separato (es. Anthropic API), (3) Pressable managed MCP che è un compromesso.

Quale modello LLM scegliere per uso WordPress agent?

Dipende dal use case. Per task generici (testi, analisi): llama-3.3-70b-instruct. Per task tecnici (codice, query): qwen-2.5-coder-32b. Per task vision (analisi immagini prodotto): llama-3.2-vision-90b. Per task multilinguali (italiano + inglese): mistral-large-2. Sperimenta con 3-4 modelli prima di scegliere.

Il self-hosted regge il carico di un'agenzia con 30+ clienti?

Sì, ma serve il pattern multi-tenant (Pattern 2 sopra). Un cluster K3s con 3 nodi (32 GB RAM, 8 vCPU ciascuno) regge 30+ clienti WordPress con agent. Tempo risposta medio 1.8s. Costo 250-400€/mese totali, fatturati a 30×80€/mese = 28.800€/anno lordi. Margine 80%+.

Cosa fare se smette di funzionare un componente (es. Qdrant)?

Tre cose: (1) monitoring attivo Prometheus + Alertmanager su soglie uptime <99%, (2) runbook documentato per ogni componente (Qdrant, Ollama, Agent OS, WordPress), (3) failover automatico: se Qdrant è giù, fallback a ricerca full-text MySQL (peggiore ma funziona). Il pattern circuit breaker è tuo amico.

Riferimenti utili per approfondire

• homgorn/wp-oss-AI-agent - GitHub repository - WordPress Agent OS, fork attivo con 14k+ star
• Uncanny Automator 6.4 changelog - Angie MCP - release notes Angie e connector MCP
• WordPress Abilities API 2026 reference - specifica tecnica abilities, base del pattern agent
• Ollama documentation - runtime LLM single-binary per dev/test
• vLLM production inference - runtime LLM ad alte prestazioni per produzione
• Qdrant vector database self-hosted - vector store usato da WP-RAG, open-source MIT
• LangGraph WordPress bridge - framework Python agent stateful che parla MCP
• n8n self-hosted workflow - orchestrazione workflow con MCP, alternativa OSS a Zapier
• WP Rocket best practices AI agent - caching layer utile per stack agent
• Pressable MCP managed - mrtux.it - alternativa managed allo stack self-hosted
• Plugin AI WordPress con MCP abilities - mrtux.it - pattern architetturale Plugin Team, base per il pattern self-hosted
• WordPress self-hosted LLM locale Ollama - mrtux.it - approfondimento Ollama + WP 7.0
• WordPress AI Bridge layer - mrtux.it - bridge layer production-ready lato plugin

Le origini: il pre-WordPress e la nascita (2001-2003)

Prima di WordPress il panorama del blogging era dominato da piattaforme come Moveable Type e, soprattutto, b2/cafelog. Quest’ultimo, creato dal programmatore francese Michel Valdrighi, era un potente strumento open source basato su PHP e MySQL. Tuttavia il suo sviluppo si era arenato.

Nel 2001, Matt Mullenweg, allora uno studente universitario di 18 anni, iniziò a usare b2/cafelog per il suo blog personale. L’anno successivo, quando Valdrighi annunciò di non poter più mantenere il progetto, Mullenweg vide un’opportunità. Insieme a Mike Little, un altro sviluppatore, decise di creare una fork di b2.

Il primo post su WordPress.org (risalente al 1° gennaio 2003) recitava: “WordPress è una evoluzione del software di blog b2/cafelog. L’obiettivo è continuare lo sviluppo di b2 e modernizzarlo.”

La prima versione, WordPress 0.7, fu rilasciata il 27 maggio 2003. Manteneva lo stesso spirito di b2 ma con un codice più pulito, una licenza GPL e, soprattutto, una community nascente pronta a contribuire.

Caratteristiche delle prime versioni:

• Semplicità: L’installazione richiedeva pochi minuti.
• Gestione dei link: Una delle funzioni originali più apprezzate.
• Commenti nativi: Gestione integrata del feedback degli utenti.
• Struttura dei permalink: Già allora personalizzabile, un fattore SEO cruciale.

La crescita esponenziale: l’era del CMS dominante (2004-2013)

Il vero punto di svolta arrivò nel 2004, quando Six Apart, la società dietro Moveable Type, cambiò la sua licenza imponendo costi per l’uso commerciale. Migliaia di blogger, in cerca di un’alternativa gratuita e open source, migrarono in massa verso WordPress. Questo “esodo” gettò le basi per la sua dominance.

Le pietre miliari del periodo:

• WordPress 1.0 (2004): Introdusse le categorie e migliorò la gestione dei commenti.
• WordPress 1.5 (2005): Rivoluzionò tutto con l’introduzione del sistema dei temi (Theme System). Per la prima volta, la presentazione (design) fu separata dal contenuto, permettendo a designer e utenti di personalizzare l’aspetto senza toccare il codice. Nacque anche il tema di default “Kubrick”.
• WordPress 2.0 (2005): Portò l’editor “ricco” (WYSIWYG), la dashboard con widget e la possibilità di caricare file multimediali direttamente.
• WordPress 2.7 (2008): Ribattezzò la dashboard in “Admin Bar” e introdusse un design più pulito e usabile.
• WordPress 3.0 (2010): La versione che trasformò WordPress da semplice blog engine a vero CMS generico. Includeva:
  • I tipi di contenuto personalizzati (Custom Post Types): Permisero di creare non solo post e pagine, ma anche “Portfolio”, “Eventi”, “Prodotti”, ecc.
  • I taxonomy personalizzati (Custom Taxonomies): Oltre a categorie e tag, si potevano creare generi personalizzati.
  • Il menu di navigazione: Gestione visiva dei menu del sito.
  • Il tema di default “Twenty Ten”: Iniziò la tradizione dei temi predefiniti annuali.

In questo periodo nacque e crebbe un ecosistema economico vastissimo:

1. Il repository ufficiale dei temi e plugin: Una libreria gratuita e controllata.
2. Il business dei theme/plugin premium: Siti come ThemeForest, Elegant Themes e WooThemes (oggi part of Automattic) iniziarono a vendere prodotti professionali.
3. L’era dei page builder: Plugin come Elementor, WPBakery (ex Visual Composer) e Divi resero possibile creare layout complessi con il drag-and-drop, abbattendo la barrieria tecnica per milioni di utenti.

La maturità e la sfida dell’editor a blocchi: Gutenberg (2014-2020)

Con WordPress al comando incontrastato la sfida divenne innovare senza perdere la semplicità che lo aveva reso popolare. La curva di apprendimento dell’editor classico (TinyMCE) iniziava a mostrare i suoi limiti di fronte alle aspettative create dai page builder.

Il progetto Gutenberg, annunciato da Matt Mullenweg nel 2016, fu una svolta epocale e controversa. L’obiettivo non era solo un nuovo editor, ma una riprogettazione radicale dell’intera interfaccia di creazione dei contenuti basata sul concetto di “blocchi” (ogni paragrafo, immagine, titolo, embed è un blocco indipendente e manipolabile).

• WordPress 4.9 (2017): Ultima versione prima del grande cambiamento, con miglioramenti al customizer.
• WordPress 5.0 (6 dicembre 2018): Il giorno del lancio di Gutenberg come editor predefinito. Lo schock fu forte per molti utenti abituati al classico editor. Critiche riguardarono l’usabilità iniziale, la compatibilità con i vecchi plugin e la curva di apprendimento.
• L’evoluzione di Gutenberg: A dispetto delle polemiche iniziali il team continuò a migliorarlo con ogni release. La potenza dei blocchi (riutilizzabili, blocchi personalizzati via plugin, blocchi di gruppo) conquistò progressivamente la community.

Gutenberg non era solo un nuovo modo di scrivere, ma le fondamenta per il prossimo passo: l’editing dell’intero sito.

L’era moderna: Full Site Editing e il futuro (2021-oggi)

Il concetto di “blocchi” si è espanso per abbracciare ogni elemento del sito: intestazione, piè di pagina, barre laterali, layout di pagina. Questa è la Full Site Editing (FSE).

• WordPress 5.9 (2022): Introdusse il Site Editor (beta) e i block theme (temi composti interamente da blocchi), rendendo possibile modificare l’intera struttura del sito senza toccare i file del tema tradizionale. Il tema di default “Twenty Twenty-Two” fu il primo block theme.
• WordPress 6.0+ (2022-2024): Ha continuato a perfezionare la FSE con:
  • Stili globali: Controllo unificato di colori, tipografia, layout tramite CSS generato.
  • Pattern di blocchi: Layout predefiniti riutilizzabili.
  • Miglioramenti delle prestazioni: Caricamento più intelligente dei CSS/JS dei blocchi.
  • Interfaccia di navigazione: Per gestire menu e widget via blocchi.

Tendenze attuali e future:

1. Openverse: Il motore di ricerca integrato per immagini e media con licenza open (ex Creative Commons Search).
2. API di applicazioni (REST API): WordPress sempre più piattaforma headless per app mobile e web moderne.
3. Intelligenza Artificiale: Plugin emergenti che integrano AI per scrittura, immagini, SEO direttamente nell’editor.
4. Performance e Core Web Vitals: Enfasi crescente su velocità e ottimizzazione tecnica di base.

La community: il vero motore di WordPress

La storia di WordPress non è solo di codice, ma di persone. La community è il suo elemento distintivo:

• WordCamps: Conferenze organizzate in tutto il mondo da volontari.
• Meetup locali: In centinaia di città.
• Contributori: Chiunque può contribuire con codice, traduzioni, supporto nei forum, documentazione.
• Fondazione WordPress: L’ente no-profit che sostiene il progetto open source, garantendone indipendenza e principi.

Conclusione

Dalla fork di un progetto abbandonato a una piattaforma che alimenta oltre un terzo del web, la storia di WordPress è un testamento al potere dell’open source e della community. Ha democratizzato la pubblicazione online, consentendo a chiunque – dall’hobbista alle grandi imprese – di avere una presenza su Internet. Le sue sfide sono continue: bilanciare innovazione (Gutenberg/FSE) e backward compatibility, gestire la sicurezza di un bersaglio così vasto, competere con piattaforme gestite (SaaS) come Wix e Squarespace. Tuttavia la sua flessibilità intrinseca e la vitalità della sua community lo hanno portato fin qui e, molto probabilmente, lo sorreggeranno nel prossimo capitolo della sua lunga e sorprendente storia.

Lista delle migliori 100 risorse Open Source per web designer

1. HTML5 Boilerplate: Un template di base per avviare un nuovo progetto HTML5, che include una struttura di base, stili CSS e script JavaScript ottimizzati. HTML5 Boilerplate
2. CSS Grid Garden: Un gioco interattivo che ti aiuta a imparare e praticare l'uso del CSS Grid Layout. CSS Grid Garden
3. Bootstrap: Un framework front-end open source per la creazione di siti web responsive utilizzando HTML, CSS e JavaScript. Bootstrap
4. Material-UI: Una libreria di componenti React che implementa le linee guida di Material Design di Google, offrendo un'interfaccia coerente e moderna. Material-UI
5. Foundation: Un framework front-end che offre una vasta gamma di componenti e strumenti per la creazione di siti web responsive. Foundation
6. Tailwind CSS: Un framework CSS utilizzato per creare interfacce utente personalizzate e altamente personalizzabili. Tailwind CSS
7. Bulma: Un framework CSS basato su flexbox che offre una vasta gamma di componenti per la creazione di siti web responsivi. Bulma
8. Materialize CSS: Un framework CSS basato su Material Design di Google, che offre componenti predefiniti per la creazione di interfacce coerenti. Materialize CSS
9. Semantic UI: Un framework CSS che utilizza nomi di classi semantiche per semplificare la creazione di layout e componenti. Semantic UI
10. UIKit: Un framework CSS leggero e modulare che fornisce una vasta gamma di componenti e stili predefiniti per la creazione di interfacce utente. UIKit
11. Font Awesome: Una libreria di icone vettoriali che può essere utilizzata per aggiungere icone di alta qualità al tuo progetto web. Font Awesome
12. Google Fonts: Una vasta libreria di font open source che puoi utilizzare gratuitamente per migliorare il design tipografico del tuo sito web. Google Fonts
13. Ionicons: Una collezione di icone open source che possono essere utilizzate in progetti web e applicazioni. Ionicons
14. Feather Icons: Un set di icone open source leggere e personalizzabili, disponibili in diversi formati e stili. Feather Icons
15. Boxicons: Una libreria di icone vettoriali open source che offre una vasta gamma di icone per il web. Boxicons
16. jQuery: Una libreria JavaScript veloce, leggera e ricca di funzionalità che semplifica la manipolazione del DOM e l'interazione con gli elementi della pagina. jQuery
17. React: Una libreria JavaScript per la creazione di interfacce utente interattive e riutilizzabili. React utilizza un'approccio basato sui componenti per costruire interfacce dinamiche. React
18. Vue.js: Un framework JavaScript progressivo per la creazione di interfacce utente reattive. Vue.js è noto per la sua semplicità e flessibilità. Vue.js
19. Angular: Un framework di sviluppo web basato su TypeScript che consente di creare applicazioni web dinamiche e scalabili. Angular
20. D3.js: Una libreria JavaScript per la creazione di visualizzazioni di dati dinamiche e interattive. D3.js sfrutta il potere di SVG, HTML e CSS per manipolare e visualizzare i dati. D3.js
21. Three.js: Una libreria JavaScript per la creazione di grafica 3D interattiva nel browser. Three.js semplifica la creazione di scene, oggetti 3D e animazioni. Three.js
22. Chart.js: Una libreria JavaScript per la creazione di grafici interattivi e responsive. Chart.js supporta diversi tipi di grafici, come barre, torte, linee e radar. Chart.js
23. Gulp: Uno strumento di automazione del flusso di lavoro che semplifica attività comuni come la compilazione di file, l'ottimizzazione delle immagini e altro ancora. Gulp
24. Grunt: Un altro toolkit di automazione del flusso di lavoro che permette di eseguire compiti comuni come la compilazione del CSS, la concatenazione dei file JavaScript e molto altro. Grunt
25. Sass: Un preprocessore CSS che estende le funzionalità di base di CSS, consentendo l'utilizzo di variabili, mixin e funzioni, facilitando così la scrittura e la gestione del CSS. Sass
26. LESS: Un altro preprocessore CSS che offre funzionalità simili a Sass, consentendo di organizzare e strutturare il codice CSS in modo più efficiente. LESS
27. Normalize.css: Un file CSS che normalizza lo stile predefinito dei diversi elementi HTML su tutti i browser, garantendo una base coerente per lo stile dei progetti web. Normalize.css
28. Flexbox Froggy: Un gioco interattivo che ti aiuta a imparare e padroneggiare il layout flessibile di CSS utilizzando Flexbox. Flexbox Froggy
29. Grid Critters: Un gioco interattivo che ti aiuta a imparare e praticare l'utilizzo del CSS Grid Layout. Grid Critters
30. Sublime Text: Un editor di codice leggero, veloce e altamente personalizzabile con una vasta gamma di funzionalità utili per lo sviluppo web. Sublime Text
31. Visual Studio Code: Un potente editor di codice open source con supporto per numerosi linguaggi di programmazione, estendibilità tramite plugin e una vasta gamma di funzionalità. Visual Studio Code
32. Atom: Un editor di codice open source e altamente personalizzabile, creato da GitHub, che offre una vasta gamma di funzionalità per lo sviluppo web. Atom
33. Brackets: Un editor di codice open source progettato specificamente per lo sviluppo web, con funzionalità avanzate come l'anteprima in tempo reale e il completamento automatico del codice. Brackets
34. GitHub: Una piattaforma di hosting di repository Git che consente il versionamento e la collaborazione su progetti software. GitHub
35. GitLab: Una piattaforma di hosting di repository Git che offre funzionalità di gestione del ciclo di vita del software e strumenti di collaborazione per il lavoro di squadra. GitLab
36. WordPress: Un sistema di gestione dei contenuti (CMS) open source ampiamente utilizzato per la creazione di siti web e blog. WordPress
37. Joomla: Un altro popolare sistema di gestione dei contenuti open source che offre una vasta gamma di funzionalità per la creazione di siti web dinamici. Joomla
38. Drupal: Un sistema di gestione dei contenuti open source altamente flessibile e scalabile utilizzato per la creazione di siti web e applicazioni web complesse. Drupal
39. Hugo: Un generatore di siti statici open source che consente di creare siti web veloci, sicuri e facili da gestire. Hugo
40. Jekyll: Un altro generatore di siti statici open source che semplifica la creazione di siti web veloci e sicuri senza l'uso di un database. Jekyll
41. Google Analytics: Una piattaforma di analisi web che fornisce informazioni dettagliate sulle visite al sito, i comportamenti degli utenti e altro ancora, aiutando a prendere decisioni informate per migliorare il sito. Google Analytics
42. Hotjar: Uno strumento di analisi e feedback degli utenti che consente di comprendere il comportamento degli utenti sul sito web attraverso mappe di calore, registrazioni delle sessioni degli utenti, sondaggi e altro ancora. Hotjar
43. Google PageSpeed Insights: Uno strumento di analisi delle prestazioni del sito web che valuta la velocità di caricamento delle pagine e fornisce suggerimenti per ottimizzare le prestazioni. Google PageSpeed Insights
44. GTmetrix: Un altro strumento di analisi delle prestazioni del sito web che fornisce un report dettagliato sul tempo di caricamento, le dimensioni delle pagine e altri suggerimenti per migliorare le prestazioni. GTmetrix
45. Color Hunt: Una piattaforma che offre una vasta raccolta di palette di colori predefinite e ispirazioni per aiutarti a scegliere combinazioni di colori accattivanti per il tuo progetto. Color Hunt
46. Coolors: Uno strumento online per la generazione e l'esplorazione di palette di colori personalizzate. Puoi creare combinazioni di colori armoniose o esplorare le palette create dagli utenti. Coolors
47. Unsplash: Una piattaforma di condivisione di foto ad alta risoluzione e royalty-free, che ti consente di trovare immagini di alta qualità per arricchire il design del tuo sito web. Unsplash
48. Pixabay: Una vasta raccolta di immagini, foto, illustrazioni e video di dominio pubblico che puoi utilizzare gratuitamente per i tuoi progetti. Pixabay
49. Google Fonts: Una libreria di font open source che offre una vasta selezione di caratteri per migliorare l'aspetto tipografico del tuo sito web. Google Fonts
50. Font Squirrel: Una collezione di font gratuiti e di alta qualità che puoi utilizzare per arricchire il design tipografico del tuo sito web. Font Squirrel
51. Canva: Una piattaforma di progettazione grafica che offre strumenti intuitivi per creare grafiche accattivanti per il tuo sito web, inclusi banner, immagini social e altro ancora. Canva
52. Inkscape: Un editor di grafica vettoriale open source che ti consente di creare e modificare illustrazioni, loghi e grafiche per il tuo sito web. Inkscape
53. GIMP: Un programma di fotoritocco open source che offre una vasta gamma di strumenti per l'editing e la manipolazione delle immagini, perfetto per ottimizzare le immagini del tuo sito web. GIMP
54. Blender: Un software di modellazione e animazione 3D open source che ti consente di creare grafica 3D e animazioni per il tuo sito web. Blender
55. GitHub Pages: Un servizio di hosting gratuito fornito da GitHub che ti consente di ospitare il tuo sito web statico direttamente dai tuoi repository Git. GitHub Pages
56. Netlify: Una piattaforma di hosting per siti web che offre il deploy continuo, CDN globale, SSL gratuito e molte altre funzionalità avanzate per migliorare le prestazioni del tuo sito. Netlify
57. FileZilla: Un client FTP open source che ti consente di trasferire file tra il tuo computer e il server di hosting del tuo sito web. FileZilla
58. Cyberduck: Un client FTP open source e SFTP che offre un'interfaccia intuitiva per trasferire file tra il tuo computer e il server di hosting. Cyberduck
59. Google Web Designer: Uno strumento di progettazione di annunci interattivi HTML5 di Google che consente di creare contenuti interattivi e coinvolgenti per il web. Google Web Designer
60. SVG-Edit: Un editor SVG online open source che ti consente di creare e modificare grafica vettoriale SVG direttamente nel tuo browser. SVG-Edit
61. Trello: Uno strumento di gestione dei progetti che ti aiuta a organizzare e tracciare le attività del tuo progetto di web design in modo collaborativo e visuale. Trello
62. Asana: Un'altra piattaforma di gestione dei progetti che offre strumenti per la pianificazione, l'organizzazione e la collaborazione per il tuo progetto di web design. Asana
63. Slack: Una piattaforma di comunicazione e collaborazione di squadra che facilita la comunicazione tra i membri del team di web design e la condivisione di file e risorse. Slack
64. Figma: Uno strumento di progettazione e prototipazione di interfacce utente basato su browser che consente la collaborazione in tempo reale e l'integrazione con altri strumenti di progettazione. Figma
65. Adobe XD: Un'applicazione di progettazione e prototipazione di interfacce utente che offre una vasta gamma di strumenti per la creazione di design interattivi e coinvolgenti. Adobe XD
66. Bootstrap: Un framework di sviluppo front-end che offre una vasta gamma di componenti e stili predefiniti per creare siti web responsive e moderni. Bootstrap
67. Material-UI: Una libreria di componenti UI basata sul design system di Material Design di Google, che offre componenti predefiniti per una rapida creazione di interfacce moderne. Material-UI
68. Tailwind CSS: Un framework di utilità CSS che ti consente di creare rapidamente e personalizzare lo stile del tuo sito web utilizzando classi CSS predefinite. Tailwind CSS
69. Bulma: Un framework CSS leggero e flessibile che fornisce una collezione di componenti e layout per costruire rapidamente siti web responsivi. Bulma
70. VuePress: Un generatore di siti statici basato su Vue.js che semplifica la creazione di documentazione, guide e blog per il tuo progetto di web design. VuePress
71. Storybook: Uno strumento di sviluppo che consente di creare e visualizzare componenti UI in isolamento, facilitando il testing e la documentazione delle interfacce del tuo sito web. Storybook
72. WordPress Theme Development Handbook: Una guida di riferimento ufficiale di WordPress che fornisce informazioni dettagliate sulla creazione di temi personalizzati per WordPress. WordPress Theme Development Handbook
73. CSS-Tricks: Un blog e una comunità online che offre tutorial, articoli e risorse su CSS, HTML, JavaScript e altre tecnologie web. CSS-Tricks
74. Smashing Magazine: Una risorsa online per web designer e sviluppatori che offre articoli, tutorial, guide e risorse per migliorare le tue competenze di web design. Smashing Magazine
75. Awwwards: Un sito web che premia e raccoglie esempi di design web di alta qualità, offrendo ispirazione e tendenze per il tuo progetto di web design. Awwwards
76. Codrops: Un blog che offre tutorial, articoli e risorse su design web, sviluppo front-end e animazioni. Codrops
77. CSS Grid Garden: Un gioco interattivo che ti aiuta a imparare e padroneggiare l'utilizzo del CSS Grid Layout. CSS Grid Garden
78. WebAIM: Una risorsa dedicata all'accessibilità web che fornisce linee guida, strumenti e risorse per assicurare che il tuo sito web sia accessibile a tutte le persone, inclusi quelli con disabilità. WebAIM
79. HTML5 Boilerplate: Un template HTML e CSS di base ottimizzato per iniziare rapidamente un nuovo progetto web, fornendo una struttura solida e compatibile con gli standard attuali. HTML5 Boilerplate
80. Font Awesome: Una libreria di icone vettoriali scalabili che puoi utilizzare nel tuo progetto di web design per aggiungere icone accattivanti e personalizzabili. Font Awesome
81. Ionicons: Una raccolta di icone open source altamente personalizzabili, perfetta per migliorare l'aspetto del tuo sito web con icone moderne. Ionicons
82. GitHub Gist: Una piattaforma di condivisione di snippet di codice, utile per condividere e trovare frammenti di codice da utilizzare nel tuo progetto di web design. GitHub Gist
83. Flexbox Froggy: Un gioco interattivo che ti insegna e ti fa esercitare sull'utilizzo del CSS Flexbox per la creazione di layout flessibili. Flexbox Froggy
84. Sizzy: Uno strumento di sviluppo responsivo che ti consente di visualizzare simultaneamente il tuo sito web su diversi dispositivi e risoluzioni, per assicurarti che sia ottimizzato per ogni schermo. Sizzy
85. Lighthouse: Uno strumento di audit delle prestazioni e dell'accessibilità fornito da Google, che ti fornisce un report dettagliato sulle prestazioni, l'accessibilità e altre metriche del tuo sito web. Lighthouse
86. JSONPlaceholder: Un servizio API di test che fornisce dati JSON di esempio per il tuo progetto di web design e sviluppo. JSONPlaceholder
87. Lorem Ipsum: Un generatore di testo fittizio ampiamente utilizzato per riempire temporaneamente i contenuti dei tuoi progetti di web design. Lorem Ipsum
88. Pexels: Una vasta raccolta di foto e video di alta qualità, gratuiti da utilizzare nel tuo progetto di web design. Pexels
89. CSS Gradient: Uno strumento online che ti consente di creare gradienti CSS personalizzati con facilità, per arricchire il design del tuo sito web. CSS Gradient
90. 10up Engineering Best Practices: Una guida completa alle migliori pratiche di ingegneria del team di 10up, che offre consigli utili per migliorare il tuo approccio allo sviluppo web. 10up Engineering Best Practices
91. BEM (Block Element Modifier): Una metodologia di denominazione delle classi CSS che ti aiuta a creare un codice più modulare e riutilizzabile per il tuo progetto di web design. BEM
92. CodePen: Una piattaforma online che ti consente di creare, condividere e scoprire esempi di codice HTML, CSS e JavaScript per il tuo progetto di web design. CodePen
93. DevDocs: Una raccolta di documentazione tecnica per diverse tecnologie web, che ti permette di accedere facilmente a reference e guide durante lo sviluppo del tuo sito web. DevDocs
94. CanIUse: Uno strumento che ti consente di verificare la compatibilità dei diversi attributi, metodi e proprietà CSS e JavaScript con i browser più comuni. CanIUse
95. W3Schools: Una risorsa online che offre tutorial, guide e riferimenti per imparare e approfondire diverse tecnologie web, inclusi HTML, CSS, JavaScript e molto altro. W3Schools
96. MDN Web Docs: Una documentazione completa e aggiornata sulle tecnologie web, fornita da Mozilla, che offre guide e riferimenti per sviluppatori web. MDN Web Docs
97. Stack Overflow: Una comunità online di sviluppatori che offre un vasto archivio di domande e risposte su diverse tecnologie web, utile per risolvere problemi e ottenere aiuto durante lo sviluppo del tuo sito web. Stack Overflow
98. SitePoint: Una risorsa online per sviluppatori e designer web che offre tutorial, articoli e risorse per migliorare le tue competenze di web design e sviluppo. SitePoint
99. FreeCodeCamp: Una piattaforma di apprendimento interattivo che offre corsi gratuiti su diverse tecnologie web, compreso il web design, ideale per migliorare le tue competenze di sviluppo. FreeCodeCamp
100. Google Developers: Una piattaforma che fornisce documentazione, guide e strumenti per sviluppatori web, inclusi tutorial, risorse di progettazione e informazioni sulle best practices. Google Developers

Spero che questa lista di risorse open source per web designer ti sia utile per i tuoi progetti di web design e sviluppo!