{"id":4788,"date":"2021-11-09T13:15:00","date_gmt":"2021-11-09T19:15:00","guid":{"rendered":"https:\/\/areciv.com\/blog\/?p=4788"},"modified":"2022-01-12T22:28:48","modified_gmt":"2022-01-13T04:28:48","slug":"embed-stl-wordpress-block-plugin","status":"publish","type":"post","link":"https:\/\/areciv.com\/blog\/2021\/11\/embed-stl-wordpress-block-plugin\/","title":{"rendered":"Embed STL WordPress Block Plugin"},"content":{"rendered":"\n<p>While writing up a few posts about recent designs for 3D printing I wanted to include an interactive preview of the model instead of just a static picture.  I looked at a couple of the plugins out there, but most of them had not been updated in quite a while and didn't support modern things like the block editor.<\/p>\n\n\n\n<p>So I put this one together mostly for myself but I also have it published to the <a href=\"https:\/\/wordpress.org\/plugins\/embed-stl\/\">WordPress plugin directory<\/a>.  You can install it directly from the plugin search under \"Embed STL\" but also in the block editor if you've searched for STL it will appear under \"available to install\" for super quick access.<\/p>\n\n\n\n<p>Once installed, STL will be a valid upload type for the media library and you can customize a ton of options on how to display the model.  The settings sidebar and the editor block look like this:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings.png\"><img decoding=\"async\" width=\"249\" height=\"1024\" data-attachment-id=\"4789\" data-permalink=\"https:\/\/areciv.com\/blog\/2021\/11\/embed-stl-wordpress-block-plugin\/embed-stl-settings\/\" data-orig-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings.png\" data-orig-size=\"278,1142\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Embed STL Settings Panel\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings-73x300.png\" data-large-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings-249x1024.png\" src=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings-249x1024.png\" alt=\"\" class=\"wp-image-4789\" srcset=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings-249x1024.png 249w, https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings-73x300.png 73w, https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/embed-stl-settings.png 278w\" sizes=\"(max-width: 249px) 100vw, 249px\" \/><\/a><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png\"><img decoding=\"async\" width=\"489\" height=\"400\" data-attachment-id=\"4808\" data-permalink=\"https:\/\/areciv.com\/blog\/2018\/07\/prescription-lens-holder-for-windows-mixed-reality-headsets\/embed-stl-preview\/\" data-orig-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png\" data-orig-size=\"489,400\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Embed STL Block Preview\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview-300x245.png\" data-large-file=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png\" src=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png\" alt=\"\" class=\"wp-image-4808\" srcset=\"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png 489w, https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview-300x245.png 300w\" sizes=\"(max-width: 489px) 100vw, 489px\" \/><\/a><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>It's also open-source and the code can be found on <a href=\"https:\/\/github.com\/mmdoogie\/embed-stl\">GitHub<\/a>.  It uses the <a href=\"https:\/\/www.viewstl.com\/plugin\/\">ViewSTL.com Javascript-based viewer<\/a> behind the scenes.<\/p>\n\n\n<div class=\"ebg-br-wrapper\">\n\t<div class=\"ebg-br-cfg-dark-theme-off ebg-br-template-repo\">\n\t\t<div class=\"ebg-br-body ebg-br-border ebg-br-background-color\">\n\t\t\t<i class=\"ebg-br-hide ebg-br-logo fab fa-github\"><\/i>\n\t\t\t<i class=\"ebg-br-cfg-icon-type-source-file ebg-br-logo ebg-br-icon-github ebg-br-img-color-auto\">&nbsp;<\/i>\n\t\t\t<div class=\"ebg-br-col ebg-br-col-sidebar\">\n\t\t\t\t<img decoding=\"async\" class=\"ebg-br-header-avatar\" src=\"https:\/\/avatars.githubusercontent.com\/u\/24367033?v=4\" alt=\"Avatar\" width=\"150\" height=\"150\" \/>\n\t\t\t<\/div>\n\t\t\t<div class=\"ebg-br-col ebg-br-col-main\">\n\t\t\t\t<p class=\"ebg-br-title\">\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/github.com\/mmdoogie\/embed-stl\">\n\t\t\t\t\t\t\tembed-stl <i class=\"ebg-br-hide fas fa-link\"><\/i><img decoding=\"async\" class=\"ebg-br-cfg-icon-type-source-file ebg-br-img-color-auto\" src=\"https:\/\/areciv.com\/blog\/wp-content\/plugins\/embed-block-for-github\/public\/images\/link.svg\" alt=\"\" height=\"22\" width=\"22\">\n\t\t\t\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/strong>\n\t\t\t\t\t<em>\n\t\t\t\t\t\tby<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/github.com\/mmdoogie\">\n\t\t\t\t\t\t\tmmdoogie <i class=\"ebg-br-hide fas fa-link\"><\/i><img decoding=\"async\" class=\"ebg-br-cfg-icon-type-source-file ebg-br-img-color-auto\" src=\"https:\/\/areciv.com\/blog\/wp-content\/plugins\/embed-block-for-github\/public\/images\/link.svg\" alt=\"\" height=\"9\" width=\"9\">\n\t\t\t\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/em>\n\t\t\t\t<\/p>\n\t\t\t\t<p class=\"ebg-br-description \">\n\t\t\t\t\tWordPress plugin adding Gutenberg block for embedding STL previews\n\t\t\t\t<\/p>\n\t\t\t\t<p class=\"ebg-br-footer\">\n\t\t\t\t\t<span class=\"ebg-br-subscribers\">\n\t\t\t\t\t\t<i class=\"ebg-br-hide ebg-br-icon fas fa-heart\">&nbsp;<\/i>\n\t\t\t\t\t\t<i class=\"ebg-br-cfg-icon-type-source-file ebg-br-icon ebg-br-icon-subscribers ebg-br-img-color-auto\">&nbsp;<\/i>\n\t\t\t\t\t\t2 Subscribers\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"ebg-br-watchers\">\n\t\t\t\t\t\t<i class=\"ebg-br-hide ebg-br-icon fas fa-eye\">&nbsp;<\/i>\n\t\t\t\t\t\t<i class=\"ebg-br-cfg-icon-type-source-file ebg-br-icon ebg-br-icon-watchers ebg-br-img-color-auto\">&nbsp;<\/i>\n\t\t\t\t\t\t3 Watchers\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"ebg-br-forks\">\n\t\t\t\t\t\t<i class=\"ebg-br-hide ebg-br-icon fas fa-code-branch\">&nbsp;<\/i>\n\t\t\t\t\t\t<i class=\"ebg-br-cfg-icon-type-source-file ebg-br-icon ebg-br-icon-forks ebg-br-img-color-auto\">&nbsp;<\/i>\n\t\t\t\t\t\t0 Forks\t\t\t\t\t<\/span>\n\t\t\t\t\t<a target=\"_blank\" rel=\"noopener noreferrer\" class=\"ebg-br-link\" href=\"https:\/\/github.com\/mmdoogie\/embed-stl\">\n\t\t\t\t\t\tCheck out this repository on GitHub.com <i class=\"ebg-br-hide fas fa-link\"><\/i><img decoding=\"async\" class=\"ebg-br-cfg-icon-type-source-file ebg-br-img-color-auto\" src=\"https:\/\/areciv.com\/blog\/wp-content\/plugins\/embed-block-for-github\/public\/images\/link.svg\" alt=\"\" height=\"11\" width=\"11\">\n\t\t\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"ebg-br-editmode ebg-br-box-status\">\n\t\t<div class=\"egb-br-cache-status\">\n\t\t\t<div class=\"ebg-br-cfg-cache-off\">\n\t\t\t\t<span class=\"egb-br-status-img-on-off\">Cache<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div class=\"egb-br-dark_theme-status\">\n\t\t\t<div class=\"ebg-br-cfg-dark-theme-off\">\n\t\t\t\t<span class=\"egb-br-status-img-on-off\">Dark Theme<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<p>To see it in action, check out my <a href=\"https:\/\/areciv.com\/blog\/tag\/stl\/\" data-type=\"post_tag\" data-id=\"91\">posts tagged STL<\/a>!  A couple of the most recent ones are linked below.<\/p>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-4317 post type-post status-publish format-standard has-post-thumbnail hentry category-3dp tag-bowden tag-clips tag-e3d tag-motion-system tag-stl tag-toolchanger\">\n<h3 class=\"wp-block-post-title\"><a href=\"https:\/\/areciv.com\/blog\/2022\/01\/e3d-toolchanger-bowden-tube-management-clips\/\" target=\"_self\" >E3D ToolChanger Bowden Tube Management Clips<\/a><\/h3>\n\n\n<p><\/p>\n\n<\/li><li class=\"wp-block-post post-4292 post type-post status-publish format-standard has-post-thumbnail hentry category-3dp tag-stl tag-vr tag-wmr\">\n<h3 class=\"wp-block-post-title\"><a href=\"https:\/\/areciv.com\/blog\/2019\/02\/controller-grip-for-windows-mixed-reality-motion-controllers\/\" target=\"_self\" >Controller Grip for Windows Mixed Reality Motion Controllers<\/a><\/h3>\n\n\n<p><\/p>\n\n<\/li><li class=\"wp-block-post post-4288 post type-post status-publish format-standard has-post-thumbnail hentry category-3dp tag-stl tag-vr tag-wmr\">\n<h3 class=\"wp-block-post-title\"><a href=\"https:\/\/areciv.com\/blog\/2018\/07\/prescription-lens-holder-for-windows-mixed-reality-headsets\/\" target=\"_self\" >Prescription Lens Holder for Windows Mixed Reality Headsets<\/a><\/h3>\n\n\n<p><\/p>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>While writing up a few posts about recent designs for 3D printing I wanted to include an interactive preview of the model instead of just a&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":4808,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"New blog post - a #WordPress block editor plugin to spice up my posts about #3DPrinting by embedding interactive previews of STL models!","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[88],"tags":[100,99,98],"class_list":["post-4788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-block","tag-plugin","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2018\/07\/embed-stl-preview.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/comments?post=4788"}],"version-history":[{"count":10,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4788\/revisions"}],"predecessor-version":[{"id":4816,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4788\/revisions\/4816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/media\/4808"}],"wp:attachment":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/media?parent=4788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/categories?post=4788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/tags?post=4788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}