I am currently trying to copy Elementor's plugin Media control to do some adjustments to it in wordpress. I tried copying the control from \Elementor\Control_Media changing the name of the class and this method:
class Control_Custom_Media extends \Elementor\Control_Base_Multiple {
...
public function get_type() {
return 'custommedia';
}
}
Then registered it
function register_custom_controls($controls) {
include 'control-custom-media.php';
Plugin::instance()->controls_manager->register_control( 'custommedia', new Control_Custom_Media() );
}
add_action( 'elementor/controls/controls_registered', 'register_custom_controls');
Finally I created a widget with that control
protected function _register_controls() {
...
$this->add_control(
'image',
[
'label' => __( 'Test', 'custom-plugin' ),
'type' => 'custommedia',
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
...
}
But I can't seem to make it work. The field appears on the elementor sidebar but once I click to open the media library, it doesn't work. Checked the events and the one that fires the 'openFrame' event is not bind for some reason?
To test if the media control was working I added it after and that one works
What I could be doing wrong?
Thanks in advance
I ended up extending the Media control for my custom control and add it as a control view.
var customMediaView = elementor.modules.controls.Media.extend({
onReady: function () {
/* do stuff */
}
});
elementor.addControlView('customMediaView', customMediaView);
On the enqueue method
wp_register_script( 'custommedia-control', plugins_url('/custommedia-control.js', __DIR__), [ 'elementor-editor' ], '1.0.0', true );
wp_enqueue_script( 'custommedia-control' );
Related
I am working on a plugin. Unfortunately it is no longer updated. The function below is marked as "risk". Because it is thought to cause XSS.
Sanitization (the process of cleaning or filtering your input data.) has been performed in the relevant function. The data_id value is generated by another function and the Wordpress function is used for this at the last stage. Necessary actions were taken in the related Wordpress function.
What else could be causing XSS?
//...
private function __construct() {
//Add plugin to new content admin bar menu
add_action('wp_ajax_data_new_data_area', array($this, 'ajax_add_data'));
}
public function ajax_add_data{
if (!current_user_can('administrator'))
wp_die('-');
$data_title = sanitize_text_field(wp_unslash($_POST['title']));
$data_type = sanitize_text_field(wp_unslash($_POST['data_type']));
$data_type = empty($data_type) ? "reg" : $data_type;
$data_id = $this->add_new_area($data_title, $data_type);
if ($data_id) {
$response = array(
'id' => $data_id,
'redirect' => add_query_arg(
array(
'tab' => 'build',
'data_id' => $data_id,
'newdata' => '1',
), admin_url('admin.php?page=plugin-dashboard')
),
);
wp_send_json_success($response);
} else {
die(__('Error', 'plugin'));
}
}
Elementor is generating page specific styling and scripts inside head section of the WordPress page. Is there a way to read them to GraphQL?
I did the same for WpBakery pagebuilder in 2 steps:
register new field in graphQL with my CSS from editor, something like:
add_action( 'graphql_register_types', function() {
register_graphql_field( 'Page', 'customCSS', [
'type' => 'String',
'description' => __( 'Custom CSS from Editor', 'wp-graphql' ),
'resolve' => function() {
// call your function which return your custom css
return $this->addPageCustomCssToGraphql();
}
] );
} );
request them in Gatsby page and using Helmet plugin show your CSS in HEAD of your page.
At this time I have the code with Elementor group controls and render function. register_controls works well for classes used in render function. Example code: 'selector' => '{{WRAPPER}} .testsize controls Typography of <h1 class="testsize> because its in the render function, but I have .testsize classes outside the render function (Just HTML pasted in page) and controls are not working for them. Maybe That's how it should be, but I need to register controls for all .testsize classes, it does not matter classes are used in render() or not, controls must work for all. Can you help me? Thank you
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .testsize',
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
echo '<h1 class="testsize">TEST</h1>';
}
Easy Fix. Just delete {{WRAPPER}} from 'selector' => '{{WRAPPER}} .testsize', and problem is solved. It's not usable while live editing but works after saving the progress.
I've built an ACF block. As per the documentation, I've created the following via functions.php:
<?php
/**
* Register ACF Blocks
*/
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// Gallery block
acf_register_block(array(
'name' => 'gallery',
'title' => __('Gallery'),
'description' => __('A custom gallery block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'format-gallery',
'keywords' => array( 'gallery' ),
'enqueue_assets' => function() {
wp_enqueue_style( 'fancybox-style' );
wp_enqueue_script( 'fancybox-js', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.js', array('jquery'), '1.0', true );
}
));
}
}
The 'enqueue_assets' function allows me to enqueue styles and scripts if the block is loaded.
The script loads in the footer as intended. However, the styles also load in the footer.
I've tried registering the style via functions and then enqueing it in the block, but it still loads in the footer. Here's how I'm registering the style.
wp_register_style( 'fancybox-style', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.css');
Is there a way within WordPress to force styles to load in the header?
I created this function to show dataobjects as page
// DISPLAY ITEM AS PAGE
public function produkt(SS_HTTPRequest $request) {
$urlSegment = $this->request->param('URLSegment');
$item = ShopItem::get()->filter('URLSegment', $urlSegment)->first();
if( $item ) {
$data = array(
'Item' => $item,
'Title' => $item->Title,
'Parent' => Shop::get()->First(),
'Controller' => $this,
'URLSegment' => $item->URLSegment
);
return $this->customise($data)->renderWith(array('ShopItem', 'Page'));
} else {
return $this->httpError(404);
}
}
That's my YML File
---
Name: productRoute
After: 'framework/routes#coreroutes'
---
Director:
rules:
'onlineshop//produkt/$URLSegment!': 'Shop_Controller'
The function is on my Shop_Controller. and the Dataobjects are shown under onlineshop/produkt/blablabla-1
That works fine but in the navigation the link "Onlineshop" is not highlight as section.
I think I need to put the "LinkinMode()" function in my dataobject. But I don't know what the function should contain. return section current or link doesen't work.
Can someone help me?
thank you in advance
You just want to highlight "Onlineshop" which is a Page in your SiteTree, right?
If so, just override the LinkingMode() method inside that Class (extending SiteTree) and make it return section or current for your custom route being active...
You would just need that method on the DataObject itself if you would like to show each DataObject in the Navigation and highlighted when active.
see http://www.ssbits.com/tutorials/2010/dataobjects-as-pages-part-1-keeping-it-simple/