Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Reintroduce the edit module button #498

Merged
merged 5 commits into from
Oct 2, 2023
Merged

feat: Reintroduce the edit module button #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c29bdcf
Create script according to docs.
Sep 29, 2023
e9e6391
Revert "Create script according to docs."
Oct 2, 2023
a0cd32f
fix: Make script load in footer. Make it cachebust.
Oct 2, 2023
dc83c20
Refine method of adding edit button
Oct 2, 2023
241ffad
fix: Use const for conts.
Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 30 additions & 63 deletions source/js/edit-modules-block-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,37 @@
/* const { link } = require("fs");
*/
( function( window, wp ){

(function(window, wp){
const editModulesLinkId = 'editModulesPageLink';
const {editModulesLinkLabel, editModulesLinkHref} = modularityBlockEditor;

// prepare our custom link's html.
const editModulesLinkHTML = `
<a
id="${editModulesLinkId}"
class="components-button has-icon"
aria-label="${editModulesLinkLabel}"
href="${editModulesLinkHref}"
>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" style="margin-right: .3em;" aria-hidden="true" focusable="false">
<path d="M240-440h360v-80H240v80Zm0-120h360v-80H240v80Zm-80 400q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"/>
</svg>
${editModulesLinkLabel}
</a>
`;

// check if gutenberg's editor root element is present.
const editorEl = document.getElementById( 'editor' );
if( !editorEl ){
return; // do nothing if there's no gutenberg root element on page.
var editorEl = document.getElementById('editor');
sebastianthulin marked this conversation as resolved.
Show resolved Hide resolved
if(!editorEl){
return;
}

//Set default Values
const buttonID = 'mod-edit-modules';

//create button
let button = document.createElement('a');
button.className += ' components-button c-button c-button__outlined c-button__outlined--default c-button--sm';
button.setAttribute('id', buttonID);
button.setAttribute('href', blockeditior.hrefeditmodules);

//create label
let label = document.createElement('span');
label.classList.add = 'c-button__label';

let labelText = document.createElement('span');
labelText.classList.add = 'c-button__label-text';

//create text
const labelTextString = document.createTextNode(blockeditior.langeditmodules);
labelText.appendChild(labelTextString);

label.appendChild(labelText);
button.appendChild(label);

const unsubscribe = wp.data.subscribe( function () {
//Append button if not existing
wp.data.subscribe( function () {
setTimeout( function () {
if ( !document.getElementById( buttonID ) ) {
const toolbalEl = editorEl.querySelector( '.edit-post-header__toolbar' );
if( toolbalEl instanceof HTMLElement ){
toolbalEl.appendChild( button );
if (!document.getElementById( editModulesLinkId )) {
var toolbalEl = editorEl.querySelector( '.edit-post-header__toolbar' );
if(toolbalEl instanceof HTMLElement){
toolbalEl.insertAdjacentHTML('beforeend', editModulesLinkHTML);
}
}
}, 1 )
}, 1)
} );
// unsubscribe is a function - it's not used right now
// but in case you'll need to stop this link from being reappeared at any point you can just call unsubscribe();

const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
//Items has changed, check if it was a block
const typewriter = editorEl.querySelector('.edit-post-visual-editor');
const links = typewriter.querySelectorAll('[href]');

//block href from new items
links.forEach(link => {
link.onclick = function(event) {
console.log("Prevented opening of link in browser.");
event.preventDefault();
}
})
}
}
};

//Add observer for editor
const observer = new MutationObserver(callback);
observer.observe(editorEl, { childList: true, subtree: true });

} )( window, wp )

})( window, wp )
35 changes: 17 additions & 18 deletions source/php/App.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ class App
public function __construct()
{
add_action('admin_enqueue_scripts', array($this, 'enqueueAdmin'), 950);
add_action('enqueue_block_editor_assets', array($this, 'enqueueBlockEditor'));
add_action('wp_enqueue_scripts', array($this, 'enqueueFront'), 950);
add_action('admin_menu', array($this, 'addAdminMenuPage'));
add_action('admin_init', array($this, 'addCaps'));
Expand Down Expand Up @@ -208,6 +209,21 @@ public function enqueueFront()
}
}

public function enqueueBlockEditor() {

if ($modulesEditorId = \Modularity\Helper\Wp::isGutenbergEditor()) {
wp_register_script('block-editor-edit-modules', MODULARITY_URL . '/dist/'
. \Modularity\Helper\CacheBust::name('js/edit-modules-block-editor.js'), [], null, ['in_footer' => true]);

wp_localize_script('block-editor-edit-modules', 'modularityBlockEditor', array(
'editModulesLinkLabel' => __('Edit Modules', 'modularity'),
'editModulesLinkHref' => admin_url('options.php?page=modularity-editor&id=' . $modulesEditorId)
));

wp_enqueue_script('block-editor-edit-modules');
}
}

/**
* Enqueues scripts and styles
* @return void
Expand Down Expand Up @@ -254,24 +270,7 @@ public function enqueueAdmin()
";
});

// If gutenberg editor
if ($modulesEditorId = \Modularity\Helper\Wp::isGutenbergEditor()) {
wp_register_script(
'custom-link-in-toolbar',
plugin_dir_url(__FILE__) . 'source/js/edit-modules-block-editor.js',
array(),
'1.0',
true
);

wp_localize_script('custom-link-in-toolbar', 'blockeditior', array(
'langeditmodules' => __('Edit Modules', 'modularity'),
'hrefeditmodules' => admin_url('options.php?page=modularity-editor&id=' . $modulesEditorId)
));

wp_enqueue_script('custom-link-in-toolbar');
}


// If editor
if (\Modularity\Helper\Wp::isEditor()) {
wp_enqueue_script('jquery-ui-sortable');
Expand Down
2 changes: 2 additions & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ module.exports = {
'js/dynamic-acf': './source/js/admin/dynamic-acf.js',
'js/dynamic-map-acf': './source/js/admin/dynamic-map-acf.js',

'js/edit-modules-block-editor': './source/js/edit-modules-block-editor.js',

//Modules
'js/mod-curator-load-more': './source/php/Module/Curator/assets/mod-curator-load-more.js',
'js/table-init': './source/php/Module/Table/assets/table-init.js',
Expand Down