I am using the following in functions.php... function wpdocs_theme_add_editor_styles() { add_editor_style( array( 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', 'assets/css/editor.css' ) ); } add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' ); ... to apply the Bootstrap CSS to my WordPress post editor. Bootstrap comes in nicely. But this now results in the removal of any padding from the post editor. File editor.css contains padding: 40px !important; in turn applied to a range of CSS classes... the padding is not getting applied... .mce-panel, .mce-edit-area, .mce-container, .mce-panel, .mce-stack-layout-item, .wp-editor-container .wp-editor-area, .wp-editor-container, .wp-editor-area …

Before Gutenberg blocks we used to add editor styles by using add_editor_style( array( 'path/to/editor-style.css', 'whatever.css' ) ); Now we have Gutenberg editor whose stylesheet is also loaded by using the same function. What if we want to keep stylesheet for both of them? I ask because there are plugins which allow users to disable Gutenberg. Obviously it's not possible to do something like: add_editor_style( array( 'editor-style-mce.css', 'editor-style-gutenberg.css' ) ); To make things more complicated for developers, there's an option to …

I'm working on my first theme built from custom gutenberg blocks. I've managed to register blocks and enqueue their specific stylesheets, but I'm running into one issue that's kind of a pain. A lot of my blocks override global styles from my style.css file. However, when I enable editor styles, the .editor-styles-wrapper class is superseding the block styles. To offer an example, here's my global container style: div.tmp-container-fixed { flex-direction: row; } In my block-specific stylesheet: section.sign-up .tmp-container-fixed { flex-direction: …

I’ve defined some custom styles as directed in the article here, they work splendidly: https://codex.wordpress.org/TinyMCE_Custom_Styles However, I’d like to add keyboard shortcuts for these styles, and I’m unclear how to do that. It seems easy enough for custom defined buttons on the toolbar, but I don’t see any way to define them for the styles in the drop down. I have found this TinyMCE doc, https://www.tiny.cloud/docs/api/tinymce/tinymce.shortcuts, so I know shortcuts are supported, I just don't understand how to map them …

I wanted to include some CSS rules inside of my gutenberg editor (in a way that it better reflected the frontend of the website). Yet I absolutely didn't want to see the same styles applied inside of any Tinymce instance across the backend. I found a simple CSS solution, and I would like to share!

How do I include a css from a custom plugin that would take effect when editing the post? (I assume now the WP blog editing page are all using Gutenberg) I got this code during my research my it is not working for me at all: function ghub_child_setup() { // Add support for editor styles. add_theme_support( 'editor-styles' ); // Enqueue editor styles. add_editor_style( 'style.css' ); } add_action( 'after_setup_theme', 'ghub_child_setup' ); I have replace the css path with the following, not …

How can make wordpress auto direction to language detected and switch it automatically Example: when i use facebook app or website i usually use it in English language LTR but when I write something like Arabic it’s automatically switch text direction to RTL How can i do this! I hope to understand me Thanks guys Picture from my website with issue

I have added some text on tinymce editor on load. (Every time you click on Add new the tinymce editor load with this text.) but problem is how to enable css class which are using in default text. Thanks

All the resources I've read online suggest using a different CSS file (i.e. editor-style.css) in order to style the WYSIWYG editor to better resemble what the actual content will look like. For the purpose of testing I tried to just use the main style.css file that I've been using for the rest of the site and the styling in the WYSIWYG editor looks great and so far I haven't noticed any problems by doing this. Should I still create a …

I've added a custom style dropdown to the TinyMCE editor, but cannot get it to work with headings (h1, h2, etc..). I highlight plain text, select the style from the formats dropdown, and the text does not get wrapped in anything. However, it DOES work with span tags and div tags. The highlighted text correctly gets wrapped in the tag with the associated classes. What am I doing wrong with the H tags? Here's my code: $style_formats = array( // …

I have tried many different things to get add_editor_style() to load into the source code on my site without any luck. I would like to use editor-style.css to customize CSS properties for my WordPress WYSIWYG. However, I am unable to get it working. Even when I look in Chrome Inspector's Resources tab and scroll down to "Stylesheets" I don't see any listing of editor-style.css Here's what I tried so far: Placed editor-style.css in the root of my theme directory <?php …

I've reviewed various blog posts, stackexchange topics, etc, but can find no way to get add_editor_style() to work in WordPress 4.1.5. Is anyone having any luck getting this function to work in recent versions of WordPress? Can I see how you've done it? Currently I have something like the following in my functions.php file: add_action( 'init', 'my_theme_add_editor_styles' ); function my_theme_add_editor_styles() { add_editor_style('editor-style.css'); } I see my editor-style.css referenced in the tinyMCEPreInit settings in the head (among the stylesheets assigned to …

I'm trying to hide a series of posts from my editors in the admin panel based on either custom post type or category (whichever is easiest). I tried adding a function such as: add_action( 'admin_menu', 'my_remove_menu_pages' ); function my_remove_menu_pages() { global $current_user; get_currentuserinfo(); if($current_user->user_login = 'test2') { remove_submenu_page( 'edit.php?post_type=post', 'edit.php?post_format=image&post_type=post' ); } } (In this snippet, I'm hiding it from one specific account) but it doesn't seem to work. Any ideas on how to do this?

I am writing a stylesheet that will help show the content in the TinyMCE editor look more like it would appear on the front end of the website using the add_editor_style function in the WordPress theme functions file. I may even end up adding a few style rules in the editor-style.css file just to be used on content. So I am wondering if the styles added to the editor-style.css stylesheet are also loaded on the front of the website when …

In this Q&A, How do you change the visual editor's background color?, it is shown how to modify WordPress' editor background colour. My question is how can I modify the editor's background colour, in full screen mode? (also called "distraction free" mode). The solution in the linked thread does not work for full screen editor mode.

I need to add multiple css files from a css framework to my editor-style.css file. The point is that i don't want to update the editor-style.css file anytime there's a new update from either my theme or the css framework. Is there a filter or hook to add more than one stylesheet? (I'm aware of @import, but didnt try to use it here.)

I am wondering is it posible to define add_editor_style to specific post types? Currently I am using this function.. // EDITOR STYLE add_editor_style('editor-style.css'); But I would like have multiple editor styles for various post types. So guessing it could be like this... if ( ... ) { // EDITOR STYLE POSTS & PAGES add_editor_style('editor-style.css'); } else if ( ... ) { // EDITOR STYLE CUSTOM POST-TYPE BOOKS add_editor_style('editor-style-books.css'); } My post types are page, post, book Any ideas would be …

I have a plugin that uses the wp_editor() function to load an instance of the TinyMCE editor. However, the editor is affected by custom styling to make it look similar to the theme through the add_editor_style() function. While this may be great in giving the user an idea of how the content may look on the front-end, I do not want this as the content will only ever be displayed on the back-end. Is there any way to load an …