Greenshift has powerful AI helper features, but you can also extend it and use custom-made solutions. For this, we added instruction_markdown.md file in the root folder of the plugin. Use it with your models or tools
Additionally, you can create blocks programmatically. There is one important thing. The plugin generates styles when you save a post in the editor, and this doesn’t happen if you use custom tools, like Python scripts or REST API.
There are two ways to fix this.
Adding styles directly in a block
For this, you need to add styles related to each block directly in the block attribute inlineCssStyles. Example
<!-- wp:greenshift-blocks/element {"id":"gsbp-2f32680","inlineCssStyles":".gsbp-2f32680{background-color:#c44242;color:#ffffff;}","textContent":"Content","localId":"gsbp-2f32680","styleAttributes":{"backgroundColor":["#c44242"],"color":["#ffffff"]},"CSSRender":1} -->
<div class="gsbp-2f32680">Content</div>
<!-- /wp:greenshift-blocks/element -->There is one simple way to do this. Create a Template in the Reusable template section. All templates that are made there already use inlineCssStyles attribute. So, copy the code of template in your tool and change only the text content.
Using a special Server render attribute
You can use another special attribute CSSRender in blocks. In this way, styles will be rendered on the frontend by the server. This works only for GreenLight Elements and styleAttributes. Example
<!-- wp:greenshift-blocks/element {"id":"gsbp-2f32680","textContent":"Content","localId":"gsbp-2f32680","styleAttributes":{"backgroundColor":["#c44242"],"color":["#ffffff"]},"CSSRender":1} -->
<div class="gsbp-2f32680">Content</div>
<!-- /wp:greenshift-blocks/element -->If you use own AI tool to generate posts with blocks, use one of these methods, we recommend to instruct your AI model to add CSSRender attribute to all wp:greenshift-blocks/element blocks
Converting fluent HTML to blocks
Sometimes you may need to have custom made tool that takes html to blocks. It’s easy to made. So, first, you will need custom function that generates unique id for blocks. Then, add this id to “id” parameter. Then add styles to styleAttribute. It must be camelcase syntax. So, instead of background-color, it must be backgroundColor. Values must be in an array. An array can have up to 4 values: each value represents a device: desktop, tablet, mobile landscape, mobile portrait. If you need to set only desktop and mobile, then use “null” for all values that you want to skip. Use CSSRender attribute to enable server style rendering. If you need tag that is different from “div”, use “tag” attribute. Read more details in instruction_markdown.md file in plugin
By the way, we provide browser extension to convert pages to blocks so you can open your design in browser and copy it to Greenshift