I have created a custom guten blocks plugin for multiple blocks, I have registered block with server registartion function. but in Wordpress backend iframe editor only editor style is coming, my frontend style handle is not working.
Block Registration
Wordpress editor view
Related
I want to create reusable blocks with Elementor similar to VueJS and React. The blocks should be the same. Only the content will be different. I try to do it with template functionality, but I cannot add content outside it.
I have a react application which fetches the wordpress post content and renders it through WP REST API.
The designer templates that are created have lots of CSS classnames around it.
Now when I view this post content in react application, no styles are applied as the classnames are particular to wordpress theme/plugin.
Question: Is there a way to get all the related CSS, so that I can use it in react?
Expected: The template shown in react should be same as the post created in wordpress.
Plugins used: Elementor(to create shapes, style content etc..,)
Tried Solutions:
Keeping a copy of styles from WordPress in client application – not scalable as the CSS files in WP changes when Admin adds more themes/plugins.
Used AutoOptimize plugin to combine & minify all CSS files, and use the final generated file in react, but CSS concatenation has its own drawbacks
Rendering the WP post directly in client application using permalink – This contains navigation header and other information of the site which we don’t want to expose in the client application
The solution that can be tried over here is to get all the stylesheet links from wordpress and add it react head tag. If there are any dependent js links they can also be added. so now when the template is rendered in react it will have all the styles shown.
The other way is similar to the above one but lot easier. Get the total wordpress-post document via rest-api and pass it to iframe in react. In this the page doesn't break in any case because the html document will have all the links that needs to be rendered.
https://wordpress.stackexchange.com/questions/320065/get-the-list-of-enqueued-registered-scripts-for-a-specific-post -> refer this to check on how to get the stylesheet links and also document based on the post id.
https://www.haselt.com/blog/wp-rest-api-modifying-the-json-response -> Refer this to check on how to modify the json response.
I need a custom media tab, that im using as widget area so that the admin user can add custom made templates.
But I'm having trouble inserting anything into the text editor because the tab is inside an iframe.
Is there a way to add a custom media tab without the content of it being inside a iframe?
WordPress 'out of the box' comes with some javascript to allow you to send AJAX requests, show the image select dialog, etc.
Does WordPress 'out of the box' come with any default CSS? Especially for use in themes? As an example, does it have its own Grid CSS setup where I can create grids without needing an external dependency like Bootstrap Twitter?
Usecase:
I am developing a simple plugin similar to Visual Composer. It will allow the user to create HTML components. If WordPress has default CSS for grids, I can create the HTML components using that grid CSS rather than relying on Bootstrap Twitter (which could conflict with the users theme).
Wordpress doesn't come with ajax code but there is a hook called wp_ajax_ that you can add custom functions to and a admin-ajax.php file that is used to process ajax requests. See here for a guide on how to implement ajax code in wordpress.
Wordpresses default templates don't come with grid CSS.
While editing a post that contains an image, WP attaches a properties inspector icon over the image to allow editing basic properties such as size, alignment, link etc.
I'd like to know how difficult it would be to hack into this dialog screen and add some custom programming to the link area.
I'd like to add a popup menu there that I can access with the click of a button (next to the existing "Link to Image" button.
I'd prefer to hook into this dialog via a file in my theme's folder or via a plug-in. I don't want to alter the wordpress code itself (to allow this to be more portable and theme specific).
The edit image popup is a TinyMCE plugin (the rich text editor that Wordpress uses), the files for which are in wp-includes/js/tinymce/plugins/wpeditimage/.
As such you can't simply use the Wordpress plugin API to modify it. You'd need to create your own TinyMCE plugin, probably by duplicating the wpeditimage plugin and adding your extra functionality. You'd also need to create a Wordpress plugin to activate the TinyMCE plugin, see these codex pages for more information on working with TinyMCE plugins in Wordpress:
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/User:Skeltoac/Extending_TinyMCE