{"id":266,"date":"2022-12-14T10:06:39","date_gmt":"2022-12-14T10:06:39","guid":{"rendered":"http:\/\/localhost:8888\/?p=266"},"modified":"2025-11-26T10:06:39","modified_gmt":"2025-11-26T10:06:39","slug":"dropdown-block","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2022\/12\/dropdown-block\/","title":{"rendered":"Dropdown Block"},"content":{"rendered":"\n

The Dropdown<\/strong> block allows the user to select an item. But what is an item and how do we define it?
It can be created using a JSON input, and we provide two options:<\/p>\n\n\n\n

    \n
  1. a simple array with items<\/li>\n\n\n\n
  2. an array of objects that require the keys label<\/kbd><\/strong> and value<\/kbd><\/strong><\/li>\n<\/ol>\n\n\n\n

    Below we provide two examples.<\/p>\n\n\n\n

    is loading …<\/div>\n\n\n\n
    is loading …<\/div>\n\n\n\n

    Edit the text block below (we can make the text editable so the user can change it) and check the dropdown updates live:<\/p>\n\n\n\n

    is loading …<\/div>\n\n\n\n

    Pay attention to the value that you select from the Dropdown and next at its output value which can be used as an input of another block. If the items of the JSON array are Objects, the label<\/strong><\/code> can be selected, and the value<\/strong><\/code> is its corresponding output.<\/p>\n\n\n\n

    is loading …<\/div>\n\n\n\n
    is loading …<\/div>\n\n\n\n

    For more details please see the corresponding documentation<\/a>.<\/p>\n\n\n\n

    \n
    <\/div>\n\n\n\n
    \n
    is loading …<\/div>\n<\/div>\n\n\n\n
    \n
    is loading …<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    The Dropdown block allows the user to select an item. But what is an item and how do we define it? It can be created using a JSON input, and we provide two options: Below we provide two examples. Edit the text block below (we can make the text editable so the user can change […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[39,40,50,52,53],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-inseri-core-block","tag-dropdown","tag-export","tag-share","tag-text-editor","tag-text-viewer"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":2109,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/266\/revisions\/2109"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}