I’m trying to render a response I’m getting through WP API inside a blade view with the Laravel way: {!! $text !!}
the issue I’m facing at this moment is that the response has internal CSS together with the HTML as you can see below the whole response:
<code>"<style>.elementor-8 .elementor-element.elementor-element-0f0546d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5556662{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-897f945{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;--transition:0.3s;}.elementor-8 .elementor-element.elementor-element-68774d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-897f945{--width:50%;}.elementor-8 .elementor-element.elementor-element-68774d6{--width:50%;}}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}</style>tt<div data-elementor-type="wp-post" data-elementor-id="8" class="elementor elementor-8">ntttt<div class="elementor-element elementor-element-0f0546d e-flex e-con-boxed e-con e-parent" data-id="0f0546d" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-1d589be elementor-widget elementor-widget-heading" data-id="1d589be" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Teeeeest</h2>tt</div>ntttt</div>nttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-5556662 e-flex e-con-boxed e-con e-parent" data-id="5556662" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-fe7bf0d elementor-widget elementor-widget-text-editor" data-id="fe7bf0d" data-element_type="widget" data-widget_type="text-editor.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>tttt<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>tttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-897f945 e-con-full e-flex e-con e-child" data-id="897f945" data-element_type="container">ntttt<div class="elementor-element elementor-element-dfb1139 elementor-widget elementor-widget-heading" data-id="dfb1139" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<h2 class="elementor-heading-title elementor-size-default">Add Your Heading Text Here</h2>tt</div>ntttt</div>ntttt<div class="elementor-element elementor-element-cfc8ec7 elementor-widget elementor-widget-text-path" data-id="cfc8ec7" data-element_type="widget" data-settings="{"text":"Add Your Curvy Text Here","link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"start_point":{"unit":"%","size":0,"sizes":[]}}" data-widget_type="text-path.default">ntttt<div class="elementor-widget-container">nttttt<div class="e-text-path" data-text="Add Your Curvy Text Here" data-url="//cms.test/wp-content/plugins/elementor/assets/svg-paths/wave.svg" data-link-url=""></div>ntttt</div>ntttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-68774d6 e-con-full e-flex e-con e-child" data-id="68774d6" data-element_type="container">ntttt<div class="elementor-element elementor-element-c539c12 elementor-widget elementor-widget-image" data-id="c539c12" data-element_type="widget" data-widget_type="image.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style>tttttttttt<img src="https://cms.test/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" />ttttttttttttt</div>ntttt</div>ntttt</div>nttttt</div>ntttt</div>ntttt</div>ntt"
<code>"<style>.elementor-8 .elementor-element.elementor-element-0f0546d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5556662{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-897f945{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;--transition:0.3s;}.elementor-8 .elementor-element.elementor-element-68774d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-897f945{--width:50%;}.elementor-8 .elementor-element.elementor-element-68774d6{--width:50%;}}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}</style>tt<div data-elementor-type="wp-post" data-elementor-id="8" class="elementor elementor-8">ntttt<div class="elementor-element elementor-element-0f0546d e-flex e-con-boxed e-con e-parent" data-id="0f0546d" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-1d589be elementor-widget elementor-widget-heading" data-id="1d589be" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Teeeeest</h2>tt</div>ntttt</div>nttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-5556662 e-flex e-con-boxed e-con e-parent" data-id="5556662" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-fe7bf0d elementor-widget elementor-widget-text-editor" data-id="fe7bf0d" data-element_type="widget" data-widget_type="text-editor.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>tttt<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>tttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-897f945 e-con-full e-flex e-con e-child" data-id="897f945" data-element_type="container">ntttt<div class="elementor-element elementor-element-dfb1139 elementor-widget elementor-widget-heading" data-id="dfb1139" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<h2 class="elementor-heading-title elementor-size-default">Add Your Heading Text Here</h2>tt</div>ntttt</div>ntttt<div class="elementor-element elementor-element-cfc8ec7 elementor-widget elementor-widget-text-path" data-id="cfc8ec7" data-element_type="widget" data-settings="{"text":"Add Your Curvy Text Here","link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"start_point":{"unit":"%","size":0,"sizes":[]}}" data-widget_type="text-path.default">ntttt<div class="elementor-widget-container">nttttt<div class="e-text-path" data-text="Add Your Curvy Text Here" data-url="//cms.test/wp-content/plugins/elementor/assets/svg-paths/wave.svg" data-link-url=""></div>ntttt</div>ntttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-68774d6 e-con-full e-flex e-con e-child" data-id="68774d6" data-element_type="container">ntttt<div class="elementor-element elementor-element-c539c12 elementor-widget elementor-widget-image" data-id="c539c12" data-element_type="widget" data-widget_type="image.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style>tttttttttt<img src="https://cms.test/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" />ttttttttttttt</div>ntttt</div>ntttt</div>nttttt</div>ntttt</div>ntttt</div>ntt"
</code>
"<style>.elementor-8 .elementor-element.elementor-element-0f0546d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5556662{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-897f945{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;--transition:0.3s;}.elementor-8 .elementor-element.elementor-element-68774d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-897f945{--width:50%;}.elementor-8 .elementor-element.elementor-element-68774d6{--width:50%;}}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-cfc8ec7{--width:500px;}}</style>tt<div data-elementor-type="wp-post" data-elementor-id="8" class="elementor elementor-8">ntttt<div class="elementor-element elementor-element-0f0546d e-flex e-con-boxed e-con e-parent" data-id="0f0546d" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-1d589be elementor-widget elementor-widget-heading" data-id="1d589be" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Teeeeest</h2>tt</div>ntttt</div>nttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-5556662 e-flex e-con-boxed e-con e-parent" data-id="5556662" data-element_type="container">nttttt<div class="e-con-inner">ntttt<div class="elementor-element elementor-element-fe7bf0d elementor-widget elementor-widget-text-editor" data-id="fe7bf0d" data-element_type="widget" data-widget_type="text-editor.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>tttt<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>tttttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-897f945 e-con-full e-flex e-con e-child" data-id="897f945" data-element_type="container">ntttt<div class="elementor-element elementor-element-dfb1139 elementor-widget elementor-widget-heading" data-id="dfb1139" data-element_type="widget" data-widget_type="heading.default">ntttt<div class="elementor-widget-container">nttt<h2 class="elementor-heading-title elementor-size-default">Add Your Heading Text Here</h2>tt</div>ntttt</div>ntttt<div class="elementor-element elementor-element-cfc8ec7 elementor-widget elementor-widget-text-path" data-id="cfc8ec7" data-element_type="widget" data-settings="{"text":"Add Your Curvy Text Here","link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"start_point":{"unit":"%","size":0,"sizes":[]}}" data-widget_type="text-path.default">ntttt<div class="elementor-widget-container">nttttt<div class="e-text-path" data-text="Add Your Curvy Text Here" data-url="//cms.test/wp-content/plugins/elementor/assets/svg-paths/wave.svg" data-link-url=""></div>ntttt</div>ntttt</div>ntttt</div>ntt<div class="elementor-element elementor-element-68774d6 e-con-full e-flex e-con e-child" data-id="68774d6" data-element_type="container">ntttt<div class="elementor-element elementor-element-c539c12 elementor-widget elementor-widget-image" data-id="c539c12" data-element_type="widget" data-widget_type="image.default">ntttt<div class="elementor-widget-container">nttt<style>/*! elementor - v3.21.0 - 08-05-2024 */n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style>tttttttttt<img src="https://cms.test/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" />ttttttttttttt</div>ntttt</div>ntttt</div>nttttt</div>ntttt</div>ntttt</div>ntt"
The HTML renders just fine, although the <style>
tags do not seem to be rendered as a result the front end does not display the way it is supposed to be displayed.
Inside the controller i have this API request:
<code> $client = new Client();
$res = $client->get('https://cms.test/wp-json/test/v2/posts/8/contentElementor');
$text = json_decode($res->getBody()->getContents());
<code> $client = new Client();
$res = $client->get('https://cms.test/wp-json/test/v2/posts/8/contentElementor');
$text = json_decode($res->getBody()->getContents());
</code>
$client = new Client();
$res = $client->get('https://cms.test/wp-json/test/v2/posts/8/contentElementor');
$text = json_decode($res->getBody()->getContents());
And inside functions.php in wordpress to get only the Elementor content with the internal CSS i have created an endpoint:
<code>add_action("rest_api_init", function () {
, "/posts/(?P<id>d+)/contentElementor"
"callback" => function (WP_REST_Request $req) {
if (class_exists("\Elementor\Plugin")) {
$post_ID = $req->get_param("id");
$pluginElementor = ElementorPlugin::instance();
$contentElementor = $pluginElementor->frontend->get_builder_content($post_ID, $with_css = true);
return $contentElementor;
<code>add_action("rest_api_init", function () {
register_rest_route(
"test/v2"
, "/posts/(?P<id>d+)/contentElementor"
, [
"methods" => "GET",
"callback" => function (WP_REST_Request $req) {
$contentElementor = "";
if (class_exists("\Elementor\Plugin")) {
$post_ID = $req->get_param("id");
$pluginElementor = ElementorPlugin::instance();
$contentElementor = $pluginElementor->frontend->get_builder_content($post_ID, $with_css = true);
}
return $contentElementor;
},
]
);
});
</code>
add_action("rest_api_init", function () {
register_rest_route(
"test/v2"
, "/posts/(?P<id>d+)/contentElementor"
, [
"methods" => "GET",
"callback" => function (WP_REST_Request $req) {
$contentElementor = "";
if (class_exists("\Elementor\Plugin")) {
$post_ID = $req->get_param("id");
$pluginElementor = ElementorPlugin::instance();
$contentElementor = $pluginElementor->frontend->get_builder_content($post_ID, $with_css = true);
}
return $contentElementor;
},
]
);
});
So the questions are two in this case, is there a way to also render styles, if not, can we get the styles separately and render them inside the view somehow?