Cum adaugi un buton nou în editorul WordPress?

Am avut ieri nevoie de adăugarea unui buton în editor, un buton ce urma să fie responsabil cu inserarea unui mark-up simplu, ce ar permite acest layout în fronted:


Treaba asta are nevoie de mai mulți pași:

// încărcăm editor-style.css din root-ul temei, astfel încât tinymce să afișeze și stilurile noastre
add_action('admin_init', function () {
	add_editor_style(); 
});

// Cum tinymce este un editor scris în JS, avem nevoie de JS pentru a îl extinde: 
add_filter('mce_external_plugins', function ($plugins) {
	$plugins['pulled_quote'] = get_template_directory_uri() . "/pulled-quote.js";
	return $plugins;
});

// adăugăm un buton în editor:
add_filter('mce_buttons', function ($buttons) {
	array_push($buttons, 'pulled_quote');
	return $buttons;
});

În pulled-quote.js avem așa:

( function() {
tinymce.PluginManager.add('pulled_quote', function(editor, url) {
	editor.addButton('pulled_quote', { text: 'Pulled Quote', cmd: 'pulled_quote', icon: false });

	editor.addCommand('pulled_quote', function() {
		var text = editor.selection.getContent({
			'format': 'html'
		});

		placeholder = text || 'Text';
		var content = '<div class="pulledQuote"><div class="pulledQuote__content">' + placeholder + '</div><div class="pulledQuote__quote"><blockquote>quote</blockquote></div></div>';

		if (text.length === 0) {
			editor.insertContent(content);
		} else {
			editor.execCommand('mceReplaceContent', false, content);
		}
	});
});
} )();

Toată povestea asta adaugă un buton în toolbar-ul tinymce:

La click se întâmplă unul din următoarele două lucruri:

  1. Dacă este un text selectat, îl „împachetează” în markup-ul nostru;
  • dacă nu e nici un text selectat, introduce markup-ul cu un text dummy.

Tot markup-ul este rezonabil de simplu și nu îl folosim în nici un alt loc, deci putem să-l ținem fără probleme doar în JS, dar dacă ar fi fost ceva mai complex de atât, cu siguranță aș fi folosit un tempalte extern.


Acum să-l facem să arate și bine:

.pulledQuote {
	display: flex;
	justify-content: space-between;
}

.pulledQuote__content {
	width: 65%;
}

.pulledQuote__content,
.pulledQuote__quote {
	outline: 2px dashed #ddd;
	margin: -5px;
	padding: 5px;
}

Și cam atât. Frontend-ul arată ca mai sus, editorul arată așa:

8 Likes