The Gutenberg Handbook currently has a short entry for creating whole templates of blocks used e.g. for Custom Post Types or the like.
https://wordpress.org/gutenberg/handbook/templates/
It seems to be missing a comprehensive overview of the core/-Blocks though. Especially the available attributes are interesting here. Is there a reference-entry I am just missing?
To elaborate:
By playing around, I found out a few things. E.g. preformatted blocks do take the formatting of a php file like line breaks, indends and tabs, which makes them a bit sensitive..
array( 'core/preformatted', array(
'content' => 'Grundlegende Fakten:
Operator: Max Mustermann
Wo: City, Country
Wer: 99999 Kinder
Wieviel: 99999 Angestellte',
) ),
This does translate into:
(note that every tab or indent before later lines would have been taken over as well)
So - what other possibilities do i have to modify the 'content' and 'placeholder' attributes? Can I make use of the fact that they are arrays and insert selectors or other html like .. This does NOT work:
array( 'core/preformatted', array(
'content' => array('selector' => 'h1', 'content' => 'Does this do anything?'),
) ),
..But this DOES:
array( 'core/preformatted', array(
'content' => array('Does', 'this', 'do', 'anything?'),
) ),
And where can I find a comprehensive list of first order attributes, since e.g it's not always clear whether a core/block will take a 'text'-string or a 'content'-array and so on..
To partly answer my own question:
As mentioned in this git issue you can use
console.log(wp.blocks.getBlockTypes());
in the browser console after all the Gutenberg magic loaded (e.g. in the editor window of a post) to show all currently registered blocks, inluding their attributes.
Definitely a helpful tool!
Another Info-Source:
The Git-Project of Gutenberg holds all core blocks and their properties can be accessed by
Name-of-Block/index.js
Then find: const blockAttributes =
Related
I'm rewriting wordpress site to yii2.
and I have to keep previous posts urls for some reasons!
They are somethings like that
https://example.com/blog-thenameofpost
So I created a Blog controller and I have this link in this way
https://example.com/blog/view?id=thenameofpost
I don't know how can I write a urlManager rule for doing that.
I just add this rules
'<controller:\w+>/<id:\d+>' => '<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
'<controller:\w+>/<action:\w+>' => '<controller>/<action>',
and now this link
https://example.com/blog/view?id=thenameofpost
opens with something like it:
https://example.com/blog/thenameofpost
Are there any rules to open link with some thing like it https://example.com/blog/thenameofpost ?
If you want to create a rule for https://example.com/blog-thenameofpost you could add the following rule.
'blog-<id>' => 'blog/view',
The left part is what you will actually see in your address bar. You can use < > to indicate a parameter. So this rule will match anything that starts with blog- and then consider the part after that as the id param. The right part is where this request should be routed to. So this request will end up in the BlogController and call actionView($id), where $id will be set to the <id> part; thenameofpost in the case of the example URL.
The rule for https://example.com/blog/thenameofpost would be
'blog/<id>' => 'blog/view'
Additional info:
In the param part (left side) you can add additional info for matching the param. So <id:\d+> will only match digits, because of de \d+ part. For more info read the docs: http://www.yiiframework.com/doc-2.0/yii-web-urlmanager.html#$rules-detail
I have created a custom content element without extending the tt_content columns because the existing fields in the database are sufficient for what I need.
I am using "header", "header_link" and "image" but I need the "image" column to have a different TCA configuration when it's used in my custom content element.
I can change the configuration globally:
$GLOBALS['TCA']['tt_content']['columns']['image']['config']['maxitems'] = 1;
but that's not what I want.
Something like
$GLOBALS['TCA']['tt_content']['my_custom_element']['columns']['image']['config']['maxitems'] = 1;
or
$GLOBALS['TCA']['tt_content']['columns']['my_custom_element']['image']['config']['maxitems'] = 1;
isn't working.
Does anyone know how to accomplish what I want? Thanks! :-)
It's not documented yet but the following code works in TYPO3 7.3
$GLOBALS['TCA']['tt_content']['types']['my_custom_element']['columnsOverrides'] = array(
'image' => array(
'config' => array(
'maxitems' => 1
)
)
);
#dmnkhhn is right. below is your solution if your TYPO3 CMS version is newer or equal to TYPO3 CMS 7.3
$GLOBALS['TCA']['tt_content']['types'][$myCType]['columnsOverrides']['images']['config']['maxitems'] = 1;
Note that you have to configure you new plugin type as a ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT for this to work.
Example
Take a look at the Configuration backend module TCA section and browse to (foldout) tt_content/types/html/columnsOverrides and see how the TYPO3 core handles the override of the bodytext field for the HTML content element.
The Configuration backend module is a great tool to learn and understand TCA and other global variables by seeing how other already has done the thing you want.
TCA config of columns is some kind of final, that means they are cached once and it's not possible to use different configs for one field depending on any conditions.
The typical solution is adding custom image field ie. my_image to the tt_content and replacing original image field within your CE type only
like (sample):
$GLOBALS['TCA']['tt_content']['types']['Tx_Your_Type']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['image']['showitem'];
$GLOBALS['TCA']['tt_content']['types']['Tx_Your_Type']['showitem'] = str_replace(',image ,', ',my_image ,', $GLOBALS['TCA']['tt_content']['types']['Tx_Your_Type']['showitem']);
Override a field with the the configuration of another column like this:
$GLOBALS['TCA']['tt_content']['types']['myType']['columnsOverrides']['header']['config'] =
$GLOBALS['TCA']['tt_content']['columns']['header_link']['config'];
I am using wordpress multisite for 5 websites. I created a child theme off of the parent so all sites have the same theme, but we have a need for slightly different introduction text at the top of the home pages.
The theme I am using has 3 columns but only has widget-able functionality in column 2 and 3, but the main content area does not have a widget area. Otherwise i would have dropped in a text widget for what i want here.
My question is what is the best way to add this text?
1.) Would I do this in functions.txt? Something like if(site1) echo, elsif(site2) echo, or is there an easier way than this?
2.) Is there a way to do this by editing the theme files and using some short of shortcode? But then where would i define what text to place in there based on the site thats loading?
Please provide a simple example in code if possible. Thanks in advance!
step 1, add to your function.php
<?php
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'Column 1',
'id' => 'column_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
step 2, now you will find the widget area in your dashboard Appearance/Widgets, add your content to it.
step 3 add <?php dynamic_sidebar( 'column_1' ); ?> in your template where you want to have column 1
Beside coding the theme there are also other way maybe easier ...
Use this plugin to create widget zone inside a page:
Widgets on Pages
Versione 0.0.12 | by Todd Halfpenny
Use this plugin so you can display or not the widget deending on what page you are:
Dynamic Widgets
Versione 1.5.6 | by Qurl
When i use the cakePHP form helper for a type 'time' field, it automatically generates a dropdown select input and not an easy&easy html5 type time keyboard input like this
Anyone has a quick solution to this ? (preferably without any javascript)
thanks !
FYI, finally i used a jQuery timepicker, that's working fine ! find it here
And after importing the css and js through cakePHP, it's very easy to use.
For example:
With an form element like this (note the type => text)
echo $this->Form->input('time', array(
'type'=>'text',
'label'=>'Réel',
'div'=> array(
'class'=>'two columns')
));
you just call it with
<script>
$('#TimeID').timepicker();
</script>
Just lock the type by manually adding it.
So if you want to use a text field for JS snippets:
echo $this->Form->input('time', array('type' => 'text'));
You can also make it anything else (manually).
For "time" you can try
echo $this->Form->input('time', array('type' => 'time'));
Don't forget to adjust your data form input if necessary.
But careful with HTML5 stuff. This is not suitable for all browsers and therefore can lead to problems in some.
I'm new to PHPUnit, and I'm having some trouble with unit testing HTML output.
My test follows:
/**
* #covers Scrap::removeTags
*
*/
public function testRemoveTags() {
// Variables
$simple_parameter = 'script';
$array_parameter = array('script', 'div');
$html = '<div class="pubanunciomrec" style="background:#FFFFFF;"><script type="text/javascript"><!-- google_ad_slot = "9853257829"; google_ad_width = 300; google_ad_height = 250; //--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><table></table>';
// Expected HTML
$expected_html_whitout_script = new DOMDocument;
$expected_html_whitout_script->loadHTML('<div class="pubanunciomrec" style="background:#FFFFFF;"></div><table></table>');
$expected_html_without_script_div = new DOMDocument;
$expected_html_without_script_div->loadHTML('<table></table>');
// Actual HTML
$actual_whitout_script = new DOMDocument;
$actual_whitout_script->loadHTML($this->scrap->removeTags($html, $simple_parameter));
$actual_without_script_div = new DOMDocument;
$actual_without_script_div->loadHTML($this->scrap->removeTags($html, $array_parameter));
// Test
$this->assertEquals($expected_html_whitout_script, $actual_whitout_script);
$this->assertEquals($expected_html_without_script_div, $actual_without_script_div);
}
My problem is that the DOMDocument object generates some HTML code and I can't compare it. How can I print the DOMDocument object to see the output? Any clues on how to compare the HTML?
Sorry for my bad english.
Best Regards,
Since 2013, there is another way to test HTML Output using PHPUnit.
It is using assertTag() method that can be found in PHPUnit 3.7 and 3.8.
For example :
// Matcher that asserts that there is an element with an id="my_id".
$matcher = array('id' => 'my_id');
// Matcher that asserts that there is a "span" tag.
$matcher = array('tag' => 'span');
// Matcher that asserts that there is a "div", with an "ul" ancestor and a "li"
// parent (with class="enum"), and containing a "span" descendant that contains
// an element with id="my_test" and the text "Hello World".
$matcher = array(
'tag' => 'div',
'ancestor' => array('tag' => 'ul'),
'parent' => array(
'tag' => 'li',
'attributes' => array('class' => 'enum')
),
'descendant' => array(
'tag' => 'span',
'child' => array(
'id' => 'my_test',
'content' => 'Hello World'
)
)
);
// Use assertTag() to apply a $matcher to a piece of $html.
$this->assertTag($matcher, $html);
Read more in official PHPUnit Website.
You may want to consider looking at Selenium. It is a browser-based testing tool for doing functional tests for a web site.
You write scripts which involve loading a web browser and simulating clicks and other actions, and then doing asserts to check that, for example, specific page elements are present, in the correct place or contain the expected values.
The tests can be written using an IDE that runs as a plug-in for Firefox, but they can be run against all the major browsers.
We have a suite of Selenium tests that run as part of our CI process, allowing us to see very quickly if something has gone wrong with our HTML output.
All in all, its a very powerful testing tool.
Also, it integrates with PHPUnit (and other language-specific tools), so it does answer your question, although probably not in the way you were thinking of.
You should be a bit careful in comparing outputted HTML to a correct template. Your HTML will change a lot, and you can end up spending too much time on maintaining your tests.
See this post for an alternative approach.
You can use saveHtml method of DOMDocument and compare the output.
You can compare two HTML strings with PHPUnit assertXmlStringEqualsXmlString method:
$this->assertXmlStringEqualsXmlString($emailMarkup, $html);
where
$emailMarkup - expected HTML string
$html - current HTML string
Important! HTML strings must be XML-valid. For example use
<br/>
instead
<br>
Also tag attributes must have values, e.g. use
<hr noshade="true">
instead
<hr noshade>
It is best not to validate against a template (unless you want to make sure nothing changes, but that is a different condition / test that you may want). You will probably want to test that your HTML includes what the user should actually see, and not that the actual HTML that formats the output is exactly what is in a template. I would recommend sending your HTML through a converter that changes it into pure text, then testing to see if you get the right results. This accommodates future functionality and data related changes that are inevitable in software development. You don't want your tests failing because someone added a class somewhere. This is probably a custom type test you will want to code yourself to meet your needs.
It is also best to insure your HTML (and CSS) is correctly formatted, what ever it may be. Sometimes invalid HTML is parsed and displayed somewhat reasonably by the browser, but best not to rely on browsers knowing what do to with invalid HTML and CSS. I have seen many issues fixed just by correcting the HTML.
I developed a library that outputs HTML PHPFUI, and I could not find any recent or even supported HTML unit tests for PHPUnit. So I created https://packagist.org/packages/phpfui/html-unit-tester which is a modern HTML and CSS unit tester. It validates against w3.org standards, so will always be up to date with the latest.
Basically you can pass in HTML fragments, or entire pages, and it will check validity of your HTML. You can test strings, files or even live URLs. Really handy to make sure all the HTML and CSS you are generating is valid. I found so many issues with my code with this library, was definitely worth the time invested. Hope everyone can benefit from it as well.