I have been making lots of WordPress AI plugins/tools lately. If you didn’t see it yet checkout my WPML AI tool.
I think Block Editor is perfect for developing generative design ideas. I wanted to see it myself and made this prototype.
Here is a demo to see how my Block Editor AI prototype working;
It is a very simple idea.
There is more than one way to do this. It can be Custom Blocks, can be Patterns, and can be generating HTML directly.
I was first thinking of making one custom block and making the generation happen inside the block and pasting that generated DOM but then decided that would not be native to the block editor.
The most native thing to block editor is Patterns.
Then I co-wrote this code with GPT4. It took a day to fine-tune and I had to re-write some too but in the end, the prototype worked great.
It is not perfect because it still needs fine-tuning. GPT4 is not great at writing WordPress Patterns and it gets confused a lot with JSON. Probably the model didn’t have enough examples to learn from it. Poor GPT4. Sometimes it writes HTML or random JSON instead of WP Patterns.
I am pretty sure I can make it better by training or fine-tuning a Custom GPT for this. But that will need a great number of clean training data don’t have time for that yet. Maybe later.
Here is the Code paste your OpenAI key and have fun with it.
function block_editor_ai_metabox() {
add_meta_box(
'my_custom_metabox_id', // ID
'WordPress Block Editor AI', // Title
'my_custom_metabox_content', // Callback function
'post', // Post type
'normal', // Context
'high' // Priority
);
}
add_action('add_meta_boxes', 'block_editor_ai_metabox');
function my_custom_metabox_content($post) {
// The metabox content
echo '<textarea id="design-prompt" placeholder="Write your design prompt" style="width:100%; height: 100px;"></textarea> <br>'; // Textarea for design prompt
echo '<button id="send-prompt-button" style="margin-top: 10px;">Send Prompt</button>'; // Button for sending prompt
add_inline_script();
}
function add_inline_script() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('send-prompt-button').addEventListener('click', function() {
var prompt = document.getElementById('design-prompt').value;
var openAIKey = 'sk-yourkey'; // Replace with your actual OpenAI API key
// Send prompt to OpenAI API using GPT-4
fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${openAIKey}`
},
body: JSON.stringify({
model: "gpt-4",
messages: [{ role: "system", content: "Generate a response that can be directly inserted into the WordPress editor as WordPress Pattern for a block editor." },
{ role: "user", content: prompt }],
temperature: 0.7,
max_tokens: 1024
})
})
.then(response => response.json())
.then(data => {
if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {
// Assuming the message content is the raw HTML for a block pattern
var blockPatternHTML = data.choices[0].message.content;
// Directly insert the block pattern HTML into the editor
wp.data.dispatch('core/block-editor').replaceBlocks(
wp.data.select('core/block-editor').getSelectedBlock().clientId,
wp.blocks.parse(blockPatternHTML)
);
console.log('Block pattern inserted:', blockPatternHTML);
} else {
console.error('No appropriate response found in data:', data);
}
})
.catch(error => {
console.error('Error fetching data:', error);
});
});
});
</script>
<?php
}
Recommendations;
Give specific design ideas. Like “2 columns, group it, add an image with cover block…etc” Be specific because when you don’t it will write random HTML or JSON. Finetune the system prompt too. I probably used a different system prompt on my video demo.