{"id":171315,"date":"2023-03-02T00:32:14","date_gmt":"2023-03-02T00:32:14","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/easy-p5-js-block\/"},"modified":"2026-10-29T08:23:54","modified_gmt":"2026-10-29T08:23:54","slug":"easy-p5-js-block","status":"publish","type":"plugin","link":"https:\/\/ast.wordpress.org\/plugins\/easy-p5-js-block\/","author":18781509,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.1.3","stable_tag":"1.1.3","tested":"7.1.4","requires":"6.1","requires_php":"7.0","requires_plugins":null,"header_name":"Easy p5.js Block","header_author":"Florian Rieder","header_description":"Adds a Gutenberg block to easily add custom p5.js code in your pages and preview it as you edit.","assets_banners_color":"ffffff","last_updated":"2026-10-29 08:23:54","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/florianrieder.com","rating":5,"author_block_rating":0,"active_installs":200,"downloads":6247,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"florianrieder","date":"2023-03-02 00:31:51","revision":2873329},"1.1.0":{"tag":"1.1.0","author":"florianrieder","date":"2023-03-07 00:11:52","revision":2875551},"1.1.1":{"tag":"1.1.1","author":"florianrieder","date":"2024-02-06 09:14:46","revision":3032060},"1.1.2":{"tag":"1.1.2","author":"florianrieder","date":"2024-10-06 13:27:44","revision":3163551},"1.1.3":{"tag":"1.1.3","author":"florianrieder","date":"2026-10-29 08:23:54","revision":3772391}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3772391,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3772391,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3772391,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3772391,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3772391,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3772392,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"plugins\":[\"easy-p5-js-block\"],\"preferredVersions\":{\"php\":\"latest\",\"wp\":\"latest\"},\"features\":{\"networking\":true},\"login\":true,\"landingPage\":\"\\\/wp-admin\\\/post-new.php\",\"steps\":[{\"step\":\"updateUserMeta\",\"meta\":{\"admin_color\":\"modern\",\"wp_persisted_preferences\":{\"core\\\/edit-post\":{\"welcomeGuide\":false},\"_modified\":\"2026-10-28T00:00:00.000Z\"}},\"userId\":1},{\"step\":\"mkdir\",\"path\":\"\\\/wordpress\\\/wp-content\\\/mu-plugins\"},{\"step\":\"writeFile\",\"path\":\"\\\/wordpress\\\/wp-content\\\/mu-plugins\\\/gutenbergp5-demo.php\",\"data\":\" GUTENBERGP5_DEMO_SKETCH,\\n\\t\\t\\t\\t'width' => '100%',\\n\\t\\t\\t\\t'height' => '700px',\\n\\t\\t\\t\\t'isPreview' => true,\\n\\t\\t\\t) ),\\n\\t\\t);\\n\\t}\\n\\treturn $args;\\n}, 10, 2 );\\n\\nadd_filter( 'default_title', function () {\\n\\treturn 'Schotter, after Georg Nees';\\n} );\\n\\n\\\/*\\n * Playground answers requests through a service worker, but the srcdoc iframes\\n * of the block bypass it, so the bundled p5.min.js 404s. Load the same p5.js\\n * version from a CDN instead, in this demo only.\\n *\\\/\\nadd_action( 'enqueue_block_editor_assets', function () {\\n\\twp_add_inline_script(\\n\\t\\t'gutenbergp5-p5js-editor-script',\\n\\t\\t'window._p5ScriptUrl = \\\"https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/p5@1.11.0\\\/lib\\\/p5.min.js\\\";'\\n\\t);\\n}, 20 );\\n\"},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"easy-p5-js-block\"},\"options\":{\"activate\":true}}]}"}},"all_blocks":{"gutenbergp5\/p5js":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":2,"name":"gutenbergp5\/p5js","version":"1.1.2","title":"p5.js","category":"media","description":"Add custom p5.js code and preview it as you edit.","supports":{"html":false},"textdomain":"gutenbergp5","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","attributes":{"sketch":{"type":"string","default":"function setup() {\n createCanvas(600, 600);\n}\n\nfunction draw() {\n \/\/ Your code here\n}"},"alignment":{"type":"string","default":"center"},"hasScrollbar":{"type":"boolean","default":false},"width":{"type":"string","default":""},"height":{"type":"string","default":""},"isPreview":{"type":"boolean","default":false}}}},"tagged_versions":["1.0.0","1.1.0","1.1.1","1.1.2","1.1.3"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3772391,"resolution":"1","location":"assets","locale":"","width":2880,"height":1372},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3772391,"resolution":"2","location":"assets","locale":"","width":2880,"height":1372},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3772391,"resolution":"3","location":"assets","locale":"","width":2850,"height":1382}},"screenshots":{"1":"Insert the p5.js block in the editor and edit the code.","2":"Preview the results from within the editor.","3":"Create full width sketches using the \"Full width\" alignment setting and createCanvas(windowWidth, windowHeight)<\/code>"}},"plugin_section":[],"plugin_tags":[218590,167725,229,153542,9036],"plugin_category":[59],"plugin_contributors":[218591],"plugin_business_model":[],"class_list":["post-171315","plugin","type-plugin","status-publish","hentry","plugin_tags-creative-coding","plugin_tags-generative-art","plugin_tags-javascript","plugin_tags-p5js","plugin_tags-processing","plugin_category-utilities-and-tools","plugin_contributors-florianrieder","plugin_committers-florianrieder"],"banners":{"banner":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/banner-772x250.png?rev=3772391","banner_2x":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/banner-1544x500.png?rev=3772391","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/icon.svg?rev=3772391","icon":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/icon.svg?rev=3772391","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/screenshot-1.png?rev=3772391","caption":"Insert the p5.js block in the editor and edit the code."},{"src":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/screenshot-2.png?rev=3772391","caption":"Preview the results from within the editor."},{"src":"https:\/\/ps.w.org\/easy-p5-js-block\/assets\/screenshot-3.png?rev=3772391","caption":"Create full width sketches using the \"Full width\" alignment setting and createCanvas(windowWidth, windowHeight)<\/code>"}],"raw_content":"\n

This p5.js Gutenberg block plugin is the perfect tool for showcasing your generative art or adding an extra level of visual interest to your website. With p5.js<\/a>, you can create interactive, dynamic, and customizable visuals that will keep your audience engaged and excited. Whether you're an artist, designer, or developer, this plugin makes it easy to integrate your p5.js sketches into your WordPress website. Impress your visitors with your stunning generative art and take your website to the next level with this p5.js Gutenberg block plugin.<\/p>\n\n

Try it out on a free dummy site now !<\/a><\/p>\n\n

Acknowledgements<\/h3>\n\n

This plugin is similar to Mark Uraine's p5.js block<\/a>, and is in fact reverse engineered from it, although very little of the actual code is reused (see mapk\/p5js-block<\/a>). I was prompted to develop this plugin due to encountering bugs, lack of display options, and mostly the lack of updates and support for this original plugin. I feel like it should be easier to insert p5.js artworks into Wordpress websites and blogs, and this is my contribution to it (although it may be buggy, I try my best. Feel free to ask in the support forum, or open an issue or a pull request on Github<\/a>).<\/p>\n\n

This project uses the p5.js library version 1.11.0, which is free software under the LGPL License<\/a>. Currently, this plugin does not include the p5.sound.js<\/code> libraries.<\/p>\n\n\n

    \n
  1. Upload the plugin files to the \/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n
  2. Activate the plugin through the \u2018Plugins\u2019 screen in WordPress.<\/li>\n<\/ol>\n\n\n
    \n

    Q: Does this plugin require a configuration ?<\/h3><\/dt>\n

    A: No ! Just activate the plugin and add the p5.js block to any page or post to get started.<\/p><\/dd>\n

    Q: How should I size my canvas with this plugin ?<\/h3><\/dt>\n

    A: It is highly recommended to define the height and width of your block in the block settings panel, and use createCanvas(windowWidth, windowHeight)<\/code> to ensure that your sketche's sizing is responsive. However, you can define a fixed size for the canvas in your script using for example createCanvas(600, 400)<\/code>. In this case, the size of the block will adapt to the canvas size defined in the script automatically, unless the size of the block has been defined in its setting panel.<\/p>\n\n

    In order for your sketch to be rendered properly when using createCanvas(windowWidth, windowHeight)<\/code>, it is important to remember that in the context of the p5.js block, the variables windowWidth<\/code> and windowHeight<\/code> refer to the width and height of the block. When using dynamic sizing in your script, define the desired height and width of your canvas in the block settings panel.<\/p>\n\n

    Warning : when using windowHeight<\/code>, the preview won't work. You can fix this by using an integer value (e.g. createCanvas(windowWidth, 500)<\/code>), or leave as is, since it won't affect the final page.<\/p><\/dd>\n

    Q: How can I make a canvas that takes the full width of the window ?<\/h3><\/dt>\n

    A: To achieve this effect, select the \"Full width\" alignment option in the block's toolbar, and use createCanvas(windowWidth, windowHeight)<\/code> in your script. Don't forget to set the height of your canvas in the block settings panel. The width setting will be ignored.<\/p>\n\n

    A horizontal scroll bar can appear in pages using full width alignment. To fix it, you can add this CSS to your site's custom CSS:<\/p>\n\n

    `css\n<\/code><\/pre>\n\n
    body {\n    overflow-x: hidden;\n}\n    `<\/p><\/dd>\n
    Q: Where can I contribute to the project?<\/h3><\/dt>\n
    A: You can contribute on the GitHub Repository<\/a> of this plugin.<\/p><\/dd>\n\n<\/dl>\n\n\n
    1.1.3<\/p>\n\n